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

7. 크롬 개발자 도구를 활용한 애플리케이션 분석

7.1 크롬 개발자 도구란?

• 크롬에서 제공하는 개발자용 도구
• 메뉴 → 보기 → 개발자 도구 선택 or 마우스 우클릭 → 검사

📍 제대로 디버깅을 원하면 시크릿 모드로 불리는 개인정보 보호 모드에서 여는것 권장

→ 시크릿 모드 : 크롬에 설치되어 있는 각종 확장 프로그램을 실행 하지 않기 때문에 순수 웹페이지 관련 정보만 확인이 가능

7.2 요소 탭

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

7.2.1 요소 화면

• 원하는 태그 클릭 시 브라우저 페이지의 해당 요소가 강조되고 태그와 관련된 정보를 확인 가능
• 단순히 현재 HTML을 보는 것만이 아닌 직접 코드를 수정하여 바뀐 사항을 빠르게 확인 가능
• 개발 모드에서도 리액트 코드를 수정해 핫 리로딩을 거치지 않아도 확인 할 수 있어 빠른 작업이 가능
• 클래스나 속성 값이 동적으로 제어되는 DOM이 있다면 요소의 중단점을 사용해 디버깅 가능

7.2.2 요소 정보

• 스타일 : 요소와 관련된 스타일 정보를 나타낸다.
• 계산됨 : 해당 요소의 크기, 패딩(padding), 보더(border), 마진(margin)과 각종 CSS 적용 결괏값을 알 수 있다.
• 레이아웃 : CSS 그리드나 레이아웃 관련 정보를 확인 할 수 있다.
• 이벤트 리스너 : 요소에 부착된 각종 이벤트 리스너를 확인 할 수 있다. 이벤트 버블링으로 이벤트를 발생시키는 경우에는 확인이 불가하다.
• DOM 중단점 : 중단점이 있는지 알려준다.
• 속성 : 요소가 가지고 있는 모든 속성값을 나타낸다. .attributes와 비슷하지만 할당 된 값만 나오는 .attributes와 다르게 모든 값이 나온다.
• 접근성 : 웹 이용에 어려움을 겪는 장애인, 노약자를 위한 스크린 리더기 등이 활용하는 값을 나타낸다.

왼쪽 요소 화면 : 웹페이지 요소의 구조 확인 및 추가, 수정, 삭제 하는 공간

오른쪽 요소 화면 : 해당 요소와 관련된 모든 정보를 확인 가능

7.3 소스 탭

• 웹 애플리케이션을 불러오기 위해 실행하거나 참조된 모든 파일을 확인 가능
• 프로덕션 모드의 경우 파일이 모두 압축되어 있어 디버깅 하기 불편하지만 개발 모드는 유용하다.
• command + p 로 원하는 파일을 열고, 소스 중단점을 생성해 자바스크립트 실행을 중단 시키고 디버깅을 수행 할 수 있다.

• 사용중인 라이브러리에서 버그가 의심되는 지점을 디버깅하거나 실제 소스코드 상에서 어떤 식으로 작동하는지 확인 하고 싶을때 사용 가능

소스 탭 오른쪽에서 제공하는 정보와 기능

• 감시 : 감시하고 싶은 변수를 선언하면 해당 변수의 정보를 확인 가능, 확인 할 수 있는 정보가 있으면 해당 변수의 값을 보여주고 확인 할 수 없는 값은 <not available>로 나타난다.
• 중단점 : 열려있는 파일 뿐만 아니라 웹페이지 전체에 걸쳐 소스 탭에서 추가한 중단점을 확인 가능하다.
• 범위 : 현재 중단점의 스코프를 의미한다.
• 호출 스택 : 현재 중단점의 콜스택을 확인 할 수 있다.
• 전역 리스너 : 현재 전역 스코프에 추가된 리스너 목록을 확인 할 수 있다.

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 프로젝트를 디버그 모드로 실행하기

1. 디버그 모드 실행

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

 

위 npm script 를 사용하면 디버거가 활성화 되면서 디버그 모드가 실행된다.

 

2. chrome inspect를 사용해 개발자 도구 오픈하면 디버깅 준비 완료

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

오픈소스 ab를 사용해 트래픽을 유입시킬 수 있다.

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

위 명령어는 http://127.0.0.1:3000/ 를 향해 한번에 50개의 요청을 총 10,000회 시도한다는 명령어이다.

로컬 테스트의 경우 localhost로 하면 정상적으로 실행되지 않아, IP나 올바른 주소를 기재해야 한다.

ab를 사용하면 단순히 요청을 수행하는 것 뿐만 아니라 요청으로부터 응답받는 데 걸리는 시간, 바이트 크기 등의 다양한 정보를 확인 할 수 있다.

결론

---

• 크롬 개발자 도구에는 웹페이지에 일어나는 모든 정보가 담겨져 있어 디버깅 하기 용이 하므로 다양한 기능을 활용해 디버깅 해보자.