🚀 94sssh
Published on

2025.05.08

[리액트 딥다이브] - 07. 크롬 개발자 도구를 활용한 애플리케이션 분석

7.1. 크롬 개발자 도구란?

크롬에서 제공하는 개발자용 도구

7.2. 요소 탭

웹페이지를 구성하는 HTML, CSS 등의 정보 확인 가능

7.2.1. 요소 화면

현재 웹페이지를 구성하는 HTML을 나타냄. 원하는 태그와 관련된 정보 확인 가능
요소의 구조를 확인, 추가, 수정, 삭제 가능

7.2.2. 요소 정보

다음과 같은 요소와 관련된 모든 정보를 확인할 수 있음

  • 스타일: 요소의 스타일 정보
  • 계산됨: 해당 요소의 크기, padding, border, margin 등 CSS 적용 결괏값
  • 레이아웃: CSS 그리드나 레이아웃과 관련된 정보
  • 이벤트 리스너: 요소에 부착된 이벤트 리스너 정보
  • DOM 중단점: 중단점 여부
  • 속성: 해당 요소의 모든 속성값
  • 접근성: 접근성 정보

7.3. 소스 탭

실행하거나 참조된 모든 파일 확인 가능
자바스크립트, CSS, HTML, 폰트 등 파일 정보를 확인할 수 있음
소스 탭에서 소스 중단점을 생성해 자바스크립트 실행을 중단시키고 디버깅을 수행할 수 있음, 코드에 debugger를 선언하는 것과 동일하지만 소스코드를 오염시키지 않아 더 유용

다음과 같은 정보를 확인할 수 있음

  • 감시: 감시하고 싶은 변수를 선언하고, 해당 변수의 정보
  • 중단점: 현재 웹에서 추가한 중단점
  • 범위: 현재 중단점에서의 스코프
  • 호출 스택: 현재 중단점의 콜스택
  • 전역 리스너: 현재 전역 스코프에 추가된 리스너 목록
  • XHR/가져오기, DOM, 이벤트 리스너, CSP 위반 중단점: 소스의 중단점 이외에 다양한 중단점

7.4. 네트워크 탭

모든 네트워크 작동이 기록되며, 네트워크 요청 종류를 필터링하거나 제한할 수 있음
스크린숏 캡처를 통해 페이지가 의도대로 완성되는지 확인 가능

네트워크 탭을 통해 집중적으로 확인할 점

  • 불필요한 요청 또는 중복 요청이 없는지
  • 웹 구성에 필요한 리소스 크기가 너무 크지 않은지
  • 리소스 로딩 속도가 적절한지
  • 리소스가 올바른 우선순위대로 다운로드되는지

7.5. 메모리 탭

현재 웹페이지가 차지하고 있는 메모리 관련 정보를 확인할 수 있음
메모리 누수, 속도 저하, 웹페이지 프리징 현상을 확인 가능

다른 탭과 달리 메모리 탭 자체만으로는 할 수 있는 것이 없고, 프로파일링 작업을 거쳐야 원하는 정보를 볼 수 있음. 프로파일 유형은 크게 세 가지로 다음과 같은 특징이 있음

  • 힙 스냅샷: 현재 메모리 상황을 사진처럼 촬영 가능
  • 타임라인의 할당 계측: 현재 시점이 아닌, 시간의 흐름에 따라 변화하는 메모리를 살펴볼 수 있음
  • 할당 샘플링: 메모리 공간을 차지하고 있는 자바스크립트 함수를 볼 수 있음

7.5.1. 자바스크립트 인스턴스 VM 선택

프로파일링에 앞서 자바스크립트 VM 인스턴스 선택 항목에서 디버깅하고 싶은 자바스크립트 VM 환경을 선택

7.5.2. 힙 스냅샷

촬영하는 시점을 기준으로 메모리 현황을 보여줌

메모리 변화 확인을 위해 두 스냅샷 간의 비교를 통해 메모리 변화의 원인을 파악할 수 있음
메모리 누수를 찾을 때는 얕은 크기(객체 자체의 크기)는 작으나 유지된 크기(객체가 참조하고 있는 모든 객체들의 크기)가 큰 객체를 찾아야 함. 두 크기의 차이가 큰 객체는 많은 다른 객체를 참조하고 있다는 뜻이며, 해당 객체가 복잡한 참조 관계를 가지고 있음을 의미.

7.5.3. 타임라인 할당 계측

시간의 흐름에 따른 메모리 변화 확인 가능, 메모리의 변화를 모두 기록하므로 많은 부담 발생

7.5.4. 할당 샘플링

시간의 흐름에 따라 발생하는 메모리 점유 확인 가능
자바스크립트를 실행 스택별로 함수 단위로 분석할 수 있다.
할당 샘플링을 무거운 순으로 정렬해 가장 많은 바이트를 차지한 함수의 작업을 확인할 수 있음
브라우저에 주는 부담을 최소화할 수 있어 장시간 디버깅에 유리

7.6. Next.js 환경 디버깅하기

7.6.1. Next.js 프로젝트를 디버그 모드로 실행하기

Next.js를 디버그 모드로 실행한다.

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

chrome://inspect로 이동해 Open dedicated DevTools for Node를 클릭하면 새로운 창에서 개발자 도구가 나타남

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

서버에 직접 트래픽을 발생시켜 메모리 누수를 확인할 수 있음
아파치 재단의 웹서버 성능 검사 오픈소스 도구인 ab를 사용해 요청을 수행하고 응답 시간, 바이트 크기 등 정보를 확인할 수 있다.

// http://127.0.0.1:3000/으로 한 번에 50개의 요청을 총 10,000회 시도
ab -k -c 50 -n 10000 "http://127.0.0.1:3000/"

로컬에서 테스트할 경우 주소를 localhost로 하면 정상적으로 실행되지 않으므로 반드시 IP 등 올바른 주소 기재

7.6.3. Next.js의 메모리 누수 지점 확인하기

메모리 도구로 프로파일링 해 getServerSideProps의 다수 실행과 메모리 누수 등을 확인 가능