크롬 개발자도구를 활용한 애플리케이션 분석
리액트의 문제를 디버깅 하기 위해서 리액트 개발 도구로 충분히 가능하지만
리액트 밖에서 일어나는 이슈는 확인할 수 없다
브라우저 개발자 도구를 통해 이러한 문제들을 디버깅 할 수 있다
Elements 탭
HTML, CSS 등의 정보 확인을 할 수 있다
DOM 에 추가되어 있는 이벤트 리스너, 접근성 등 모든 정보를 확인할 수 있다
Source 탭
소스 탭에서는 웹 애플리케이션을 불러오기 위해 실행하거나 참조된 모든 파일을 확인할 수 있다
HTML,CSS,JS, font 등 다양한 파일 정보를 확인하고
코드 내용까지 볼 수 있다
소스에 중단점을 생성해 디버깅을 수행할 수 있다
소스 내부에 debugger 를 선언하는 것과 동일하지만
소스코드를 오염시키지 않으면서 확인할 수 있기 때문에 더 유용하다
Network 탭
발생하는 모든 네트워크 관련 작도잉 기록된다
HTTP 요청에서 웹소켓까지 외부 데이터와 통신하는 정보를 확인할 수 있다
중점적으로 확인해보아야 할 내용은
- 불필요한 요청 및 중복 요청이 없는지
- 리소스가 너무 크진 않은지
- 리소스를 불러오는 속도가 적절한지
- 리소스를 올바른 우선순위에 따라 가져오는지
Memory 탭
웹페이지가 차지하고 있는 메모리 관련 정보를 확인할 수 있다
메모리 누수, 속도 저하, 프리징 현상을 확인할 수 있다
리액트 개발 도구의 프로파일과 비슷하게 사용할 수 있다
- 힙 스냅샷: 현재 시점의 메모리 상황을 스냅샷 한다
- 타임라인의 할당 계측: 시간의 흐름에 따라 메모리 변화를 보고 싶을 때 사용
- 할당 샘플링: 메모리 공간을 차지하고 있는 자바스크립트 함수를 볼 수 있다
자바스크립트 인스턴스 VM 선택
현재 실행중인 자바스크립트 VM 인스턴스를 확인할 수 있다
환경별 힙 크기를 볼 수 있다
힙 스냅샷
스냅샷 정보에 많은 내용을 담고 있기 때문에 메모리 누수를 찾는 것이 쉽지 않으므로 예상되는 곳을 중점적으로 살펴보고
변수나 함수 네이밍에 적적한 이름을 주어야 한다
타임라인 할당 계측
시간의 흐름에 따른 메모리 변화 뿐만 아니라
메모리의 변화를 일으킨 변수가 무엇인지, 어느 정도의 크기를 차지하고 있는지를 확인할 수 있다
할당 샘플링
할당 샘플링은 무거운 순으로 정렬할 수 있어 메모리 사용량이 많은 곳을 쉽게 찾을 수 있다
타임라인 할당 계측과 유사하지만 브라우저에 주는 부담을 최소화할 수 있어 장시간 디버깅에 유리하다
메모리 누수가 짐작되지만 정확한 위치를 찾기 어려워 장시간 디버깅을 수행해야 하는 경우 유용하다
Next.js
SSR 의 메모리 누수를 확인하는 방법 또한 크롬 개발자 도구로 가능하다
디버그 모드
Next.js 를 디버그 모드로 실행한다
"dev": MODE_OPTIONS='--inpect' next dev
위와 같이 실행 후
크롬 브라우저에서 chome://inspect 로 진입
Open dedicated DevTools for Node 클릭
새로운 창에서 개발자 도구가 나타난다
직접 트래핑 발생
SSR 의 메모리 누수 경우는 지접 트래필을 발생시켜 확인하는 방법이 확실하다
오픈소스 도구인 ab 를 활용하면 좋다
ab -k -c 50 -n 10000 "http://127.0.0.1:3000/"
위와 같이 실행하면 한 번에 50개 요청을 10000 번 보내는 것이다
요청을 실행할 뿐만 아니라 응답에 걸린 시간, 크기 등 다양한 정보를 확인할 수 있다
