7.1 크롬 개발자 도구란?
크롬에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있는 강력한 개발 도구이다.
7.2 요소 탭
현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있다.
요소 화면
HTML확인 가능
직접 코드를 수정해서 웹페이지 확인 가능
중단점을 사용해 디버깅 가능
해당 속성 변경 시 브라우저가 렌더링을 중단하고 해당 요소 변경을 일으킨 소스코드 보여줌
요소 정보
스타일 : 스타일 정보를 나타내며 클래스, 아이디 등으로 매핑되어 설정된 스타일인지 확인 할 수 있다.
계산됨 : 현재 요소에 부착된 각종 이벤트 리스너 확인이 가능하다.
레이아웃 : css 그리드, 레이아웃과 관련된 정보 확인가능
이벤트 리스너 : 현재 요소에 부착된 각종 이벤트 리스너를 확인 할 수 있다.
DOM 중단점 : 앞서 설명한 중단점이 나오는 탭이다.
속성 : 해당 요소가 모든 속성 값을 나타낸다.
접근성 : 웹 이용에 어려움을 겪는 장애인, 노약자를 위한 스크린리더기 등이 활용하는 값을 말한다.
7.3 소스 탭
웹 애플리케이션을 불러오기 위해 실행하거나 참조된 모든 파일을 확인할 수 있다.
프로덕션 모드에서는 파일이 모두 압축이 되어있기 때문에 디버깅 하기가 매우 불편하지만 개발 모드에서는 유용하게 사용할 수 있다.
소스를 직접적으로 고치지 않고 소스탭에서 고쳐 디버깅이 가능해 소스오염 없이 개발 가능
감시 : 감시하고 싶은 변수를 선언하고, 해당 변수의 정보를 확인할 수 있는 메뉴
중단점 : 현재 웹사이트에서 추가한 중단점을 확인 가능. 현재 페이지 뿐만 아니라 페이지 전체에 걸쳐 모든 중단점 확인 가능
범위 : 현재 중단점에서의 스코프를 의미한다.
호출 스택 : 현재 중단점에서의 콜스택을 확인할 수 있다. 자바스크립트 코드가 실행되며 생성되는 실행 콘텍스트가 어떻게 저장되어 어떤모습을 하고 있는지 볼 수 있다.
전역 리스너 : 현재 전역 스코프에 추가된 리스너 목록을 확인할 수 있다.
7.4 네트워크 탭
웹페이지를 접속하는 순간부터 발생하는 모든 네트워크 관련 작동이 기록된다.
확인해볼 사항
불필요한 요청 또는 중복되는 요청이 없는지
웹페이지 구성에 필요한 리소스 크기가 너무 크지 않은지
리소스를 불러오는 속도는 적절한지 또는 너무 속도가 오래 걸리는 리소스는 없는지
리소스가 올바른 우선순위로 다운로드되어 페이지를 자연스럽게 만들어가는지
7.5 메모리 탭
애플리케이션에서 발생하는 메모리 누수, 속도 저하, 혹은 웹페이지 프리징 현상을 확인할 수 있는 유용한 도구다.
힙 스냅샷
현재 메모리 상황을 사진찍듯이 촬영한다. 현재 시점의 메모리를 알고싶을때 사용
타임라인의 할당 계측
시간의 흐름에 따라 메모리의 변화를 살펴보고 싶을 때 사용한다.
주로 로딩이 되는 과정의 메모리 변화 또는 페이지에서 어떠한 상호작용을 했을 때 메모리 변화 과정을 알고 싶을 때 사용한다.
할당 샘플링
메모리 공간을 차지하는 자바스크립트 함수를 볼 수 있다.
자바스크립트 인스턴스 VM 선택
개발자가 디버깅하고싶은 자바스크립트 VM환경을 선택한다.
환경별 힘 크기를 볼 수 있는데, 해당 페이지가 자바스크립트 힙을 얼마나 점유하고 있는지 나타낸다.
힙 스냅샷
현재 페이지의 메모리 상태를 확인해 볼 수 있는 메모리 프로파일 도구다.
리액트 기반 애플리케이션이 기본으로 차지하는 내용, window 객체 등 브라우저가 차지하는 내용이 존재하기 때문에 컴포넌트가 적은 파일도 수 많은 값이 나오게 된다.
사진을 찍듯이 메모리를 보기 때문에 스냅샷을 두 장 찍은 상태에서 비교하며 메모리를 확인하면 좋다.
타임라인 할당 계측
시간의 흐름에 따라 메모리 변화를 확인할 수 있는 기능이다.
시간의 흐름에 따라 메모리의 변화를 모두 기록하기 때문에 상대적으로 많은 부담이 발생한다.
실시간으로 메모리를 볼 수 있기 때문에 시간의 흐름에 따른 메모리 점유율을 자세히 알고 싶을 때 타임라인 할당 계측을 활용할 수 있다.
할당 샘플링
타임라인 할당 계측과 동작 방식은 비슷하지만 자바스크립트 실행 스택별로 분석할 수 있고 분석을 함수 단위로 한다는 차이점이 있다.
어떤 함수가 문제가 있는지 확인할 수 있으며 마우스 우클릭을 통해 소스패널에 표시하여 어디에 정의 되었는지 또한 볼 수 있다.
7.6 Next.js 환경 디버깅하기
관련 예제 실행 결과 메모리 탭에서 '힙 스냅샷' 과 '타입라인의 할당 계측' 을 시도 했으나 메모리가 같게 나와서 확인이 불가능 했습니다.
Next.js의 경험 부족으로 나타난 이슈인 것 같습니다.
다음주 4장 학습 후 부족한 부분 보충하도록 하겠습니다.