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

브라우저 개발자 도구

• 일반적인 브라우저 환경에서 발생할 수 있는 문제를 디버깅할 수 있는 도구
• 웹사이트를 불러올 때 발생하는 거의 대부분의 작업을 기록하고, 또 이와 관련된 많은 기능을 제공함

 

 

크롬 개발자 도구

• 요소 탭
  • 현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있음
  • 요소 화면
    • 현재 웹페이지를 구성하는 HTML을 나타냄
    • 이중 원하는 태그를 클릭하면 브라우저 페이지의 해당 요소가 강조되고, 해당 태그와 관련된 정보 확인 가능
    • 웹페이지의 DOM을 직접적으로 수정하면 프로덕션으로 개발된 페이지에서 수정된 내용을 바로 확인 가능
    • DOM 요소를 선택해 디버깅 위치를 설정할 수도 있음
  • 요소 정보
    • 스타일 : 요소와 관련된 스타일 정보
    • 계산됨 : 해당 요소의 크기, 패딩, 보더 마진과 각종 CSS 적용 결과값을 알 수 있음
    • 레이아웃 : CSS 그리드나 레이아웃과 관련된 정보 확인 가능
    • 이벤트 리스너 : 현재 요소에 부착된 각종 이벤트 리스너 확인 가능
    • DOM 중단점 : 중단점이 있는지 알려주는 탭
    • 속성 : 해당 요소가 가지고 있는 모든 속성값
    • 접근성 : 접근성 정보 확인 가능
• 소스 탭
  • 웹 애플리케이션을 불러오기 위해 실행하거나 참조된 모든 파일을 확인 가능
  • 소스 중단점을 생성해 자바스크립트 실행을 중단시키고 디버깅 수행 가능 => 소스코드를 오염시키지 않는 방법
  • 감시 : 감시하고싶은 변수를 선언하고, 해당 변수의 정보를 확인할 수 있는 메뉴
  • 중단점 : 현재 웹사이트에서 추가한 중단점
  • 범위 : 현재 중단점에서의 스코프
  • 호출 스택 : 현재 중단점의 콜스택
  • 전역 리스너 : 현재 전역 스코프에 추가된 리스너 목록 확인 가능
  • XHR/가져오기, DOM, 이벤트 리스너, CSP 위반 중단점 : 소스의 중단점 이외에 다양한 중단점 확인 가능
• 네트워크 탭
  • 해당 웹페이지를 접속하는 순간부터 발생하는 모든 네트워크 관련 작동이 기록됨
  • 불필요한 요청 또는 중복되는 요청이 없는지 확인
  • 웹페이지 구성에 필요한 리소스 크기가 너무 크지 않은지 확인
  • 리소스를 불러오는 속도는 적절한지 또는 너무 속도가 오래 걸리는 리소스는 없는지 확인
  • 리소스가 올바른 우선순위로 다운로드되어 페이지를 자연스럽게 만들어가는지 확인
• 메모리 탭
  • 현재 웹페이지가 차지하고 있는 메모리 관련 정보 확인 가능
  • 애플리케이션에서 발생하는 메모리 누수, 속도 저하, 혹은 웹페이지 프리징 현상 확인 가능
  • 프로파일링 유형
    • 힙 스냅샷 : 현재 시점의 메모리 상황을 사진 찍듯이 활용할 수 있음
    • 타임라인의 할당 계측 : 시간의 흐름에 따라 메모리의 변화를 확인 할 수 있음. 주로, 로딩이 되는 과정의 메모리 변화 또는 페이지에서 어떠한 상호작용을 했을 때 메모리의 변화 과정을 알고 싶을 때 사용함
    • 할당 샘플링 : 메모리 공간을 차지하고 있는 자바스크립트 함수 볼 수 있음

 

 

메모리 현황 디버깅

• 자바스크립트 인스턴스 VM 선택
  • 현재 실행중인 자바스크립트 VM 인스턴스 확인 가능
  • 실제 해당 페이지가 자바스크립트 힙을 얼마나 점유하고 있는지 나타냄
• 힙 스냅샷
  • 현재 페이지의 메모리 상태 확인 가능
  • 스냅샷을 활용할 때는 두 개 이상의 스냅샷을 보는 것이 훨씬 쉬움
• 타임라인 할당 계측
  • 시간의 흐름에 따라 메모리의 변화를 모두 기록하기 때문에 상대적으로 많은 부담이 발생함
• 할당 샘플링
  • 시간의 흐름에 따라 발생하는 메모리 점유를 확인할 수 있어 할당 계측과 비슷하지만 자바스크립트 실행 스택별로 분석할 수 있고, 이 분석을 함수 단위로 한다는 차이점
  • 프로파일링할 때 브라우저에 주는 부담을 최소화할 수 있어 장시간에 걸쳐 디버깅을 수행해야 할 때 유리함