[모던 리액트 Deep Dive] 7장 크롬 개발자 도구를 활용한 애플리케이션 분석

• 순수하게 웹페이지 관련 정보만 확인하고자 할 땐, 시크릿 모드에서 개발자 모드를 활용하면 확장 프로그램 실행 시의 발생하는 불필요한 정보를 제외하고 볼 수 있음.
• 요소 탭의 HTML 트리에서 요소에 중단 위치를 설정해두면 중단과 관련된 작업이 일어날 때 브라우저가 렌더링을 중단하고 해당 요소 변경을 일으킨 소스코드를 보여줌.
• 소스 탭은 개발 모드일 때, 디버깅할 때 유용함. 중단점을 만들고 할당한 변수에 어떤 값이 들어있는지 확인할 수 있음.

 

메모리 탭

메모리 누수, 웹페이지 프리징 현상을 확인해볼 수 있습니다.

• 힙 스냅샷: 현재 메모리 상황을 기록합니다.
• 타임라인의 할당 계측: 시간의 흐름에 따른 메모리 변화를 살펴볼 수 있습니다. 주로 로딩 과정의 메모리 변화, 상호작용에 따른 메모리 변화 과정을 파악할 때 유용합니다.
• 할당 샘플링: 메모리 공간을 차지하고 있는 JS 함수를 볼 수 있습니다.

자바스크립트 인스턴스 VM

현재 실행 중인 JS VM 인스턴스를 확인할 수 있습니다. 디버깅하고 싶은 VM 환경을 선택합니다. 해당 페이지가 JS 힙을 얼마나 점유하고 있는지도 알 수 있습니다.

힙 스냅샷

어떤 변수가 메모리를 크게 차지하고 있는지, 어떤 이유로 발생했는지 파악해볼 수 있습니다.

💡 얕은 크기: 객체 자체가 보유하는 메모리 바이트 크기

💡 유지된 크기: 해당 객체 자체와 다른 부모가 존재하지 않는 모든 자식 객체들의 크기까지 더한 메모리 크기

타임라인 할당 계측

시간의 흐름에 따라 메모리의 변화를 모두 기록하기에 브라우저에 부담이 발생합니다.

할당 샘플링

타임라인 할당 계측과 비슷하지만 JS 실행 스택별로 분석할 수 있고, 함수 단위로 분석합니다. 메모리를 많이 차지하는 함수를 금방 파악할 수 있습니다.

브라우저에 주는 부담을 최소화할 수 있어 장시간에 걸쳐 디버깅을 할 때 유리합니다.

 

Next.js 환경 디버깅하기

Next의 디버그 모드를 활용합니다. NODE_OPTIONS='--inspect'라는 인수와 next dev를 실행하면 디버거가 활성화됩니다.

"dev": NODE_OPTIONS='--inspect' next dev

Next.js 서버에 트래픽 유입시키기

아파치 재단의 웹서버 성능 검사 도구인 ab를 사용하여 트래픽을 시뮬레이션해볼 수 있습니다.

ab -k -c 50 -n 10000 "http://127.0.0.1:3000"

위 명령어는 주소로 한 번에 50개의 요청을 10,000회 시도합니다. 주소를 localhost로 하면 실행되지 않으므로 주의합니다.