✒️ 크롬 개발자 도구를 활용한 애플리케이션 분석
✏️ 크롬 개발자 도구란?
크롬에서 제공하는 도구인 개발자 도구를 사용하여 웹사이트 내 요소, Console, 네트워크, 메모리와 같은 여러 지표를 확인할 수 있다.
개발자 도구를 제대로 활용하기 위해서는 시크릿 모드를 활성화하는 것을 권장한다. 브라우저에 기본적으로 설치된 확장 프로그램 및 Cookie 같은 요소들이 일관된 디버깅을 방해할 수 있다.
✏️ Element 탭
웹 페이지를 구성하는 HTML, CSS 와 같은 정보를 확인할 수 있는 탭이다. 원하는 탭을 클릭할 경우 브라우저 내에 요소가 강조된다.
- 파랑 : 요소의 실제 width, height
- 초록 : 요소가 가진 Padding 영역
- 주황 : 요소가 가진 Margin 영역
- 노랑 : 요소가 가진 Border 영역
요소 화면에서는 HTML 열람 및 사용자의 직접적인 DOM 수정이 가능하다. 수정된 DOM 은 Hot - Reload 기능으로 화면에 즉각적으로 나타난다.
✏️ Element 정보
요소 탭 오른쪽에서는 사용자가 선택한 요소의 정보를 열람할 수 있다.
- Style : 태그에 포함된 CSS Class, Id, Tag Style 목록
- Computed (계산된 영역) : 해당 요소의 실제 크기, Padding, Margin, Border 와 같은 CSS 적용 결과
- Layout : CSS Grid, Layout 과 관련된 정보
- Event Listener : 해당 요소에 부착된 이벤트 리스너 목록 (이벤트 버블링으로는 불가)
- 그 외 DOM 중단점, 속성, 접근성...
✏️ Source 탭
웹 애플리케이션을 로드하기 위해 필요한 모든 파일들을 확인할 수 있다. 번들링 된 JS 파일 및 HTML, CSS 가 이 탭에서 모두 보여진다.
Production 모드에서는 파일이 번들링되어 하나로 압축되었기에 Development 모드에서 Source 탭을 켜 각 모듈 파일을 추적하기가 용이하다.
Element 탭에서 DOM 중단점을 고의로 추가한 것과 마찬가지로, Source 탭에서도 코드의 중단점을 걸어 JS 실행을 중단시키고 디버깅을 수행할 수 있다.
✏️ Network 탭
웹 페이지를 접속하는 순간부터 발생되는 모든 네트워크 관련 기록이 저장되는 탭.
XHR, Fetch, WS 와 같이 사용자가 열람하고 싶은 네트워크 요청 종류를 필터링할 수 있음.
스크린샷 캡쳐 기능을 활용하여 특정 Timeline 에 대한 네트워크 요청 흐름을 캡쳐하고, 웹페이지의 Loading Flow 를 시각적으로 확인할 수 있음.
모바일 웹페이지 제작 지 유의 사항
모바일 웹페이지의 경우 애플리케이션을 로드하기 위해 필요한 리소스의 양만큼 사용자가 비용을 지불해야 한다.
따라서 가급적 네트워크 리소스 요청 횟수와 크기를 줄이기 위해 gzip, brotil 과 같은 리소스 압축 방식을 잘 활용하는 것이 좋다.
네트워크 탭으로 봐야 할 중요한 요소
- 불필요한 요청, 중복되는 요청이 있는지 검사
- 웹페이지 구성이 필요한 리소스 크기가 크지 않은지 검사
- 리소스 로딩 속도가 적절한지, 특정 리소스의 경우 로딩 시간이 너무 길지 않은지 점검
- 각 리소스가 올바른 순서대로 오고 있는지 (preload 등) 점검
✏️ Memory 탭
웹 페이지가 차지하는 메모리 관련 정보를 열람하기 위해 쓰인다. 메모리 누수나 속도 저하, 프리징 현상을 관찰할 수 있는 도구다.
메모리 탭 내에는 세 가지의 프로파일링 도구가 있으며, 각 도구의 목적은 아래와 같다.
- Heap Snapshot : 현재 브라우저 메모리 상황을 캡쳐하여 도식화한다. (특정 시점을 포착)
- 타임라인 할당 계측 : 일련의 시간에 따라 메모리의 변화를 관측하는 기능 (Timeline 별로 메모리의 변화를 관측 가능)
- 할당 샘플링 : 메모리를 차지하는 함수를 볼 수 있다.
Memory 탭을 통한 애플리케이션 상태 관측은 아래의 순서로 나뉜다.
-
Javascript VM 인스턴스 선택
현재 실행 중인 VM 인스턴스 목록을 열람하는 탭이다.
개발자가 디버깅하고 싶은 VM 환경을 선택할 수 있다. 환경 별로 현재 차지하는 Heap 영역의 크기가 나오며, JS 실행에 따라 실시간으로 변경된다.
-
heap snapshot
힙 스냅샷은 현재 페이지의 메모리 상태를 열람하는 메모리 프로파일 도구다.
사용자가 스냅샷을 촬영하는 시점을 기준으로 현재 애플리케이션의 메모리 현황을 보여준다.
두 스냅샷 사이의 변경 사항을 보고 싶다면..
두 스냅샷 사이의 변경 사항을 보고 싶다면 [모든 객체 메뉴] 를 클릭하고 [스냅샷 1에서 스냅샷 2 사이에 할당된 객체] 를 클릭해 [얕은 크기] 항목을 기준으로 내림차순 정렬한다.
새롭게 추가된 객체가 어떤 타입인지, 어떤 인터랙션을 기반으로 생성되었는지를 Context 로 알 수 있으며, 전역 객체로 복사가 가능하다.
- 메모이제이션이 잘 되었는지를 확인하기 위해서는 두 스냅샷 간의 비교에서 메모이제이션이 된 함수 혹은 값이 보이지 않는지를 체크하면 된다. (재생성이 되지 않으므로)
얕은 크기와 유지된 크기 간의 차이점은?
- 얕은 크기 : 객체 자체가 보유한 메모리의 크기 (Bytes 단위)
- 유지된 크기 : 객체 및 다른 부모가 존재하지 않는 모든 자식 객체들의 크기를 더한 값
정리하자면 객체 내부에 또 다른 객체를 포함하여 생성된 경우, 해당 객체 자체가 가진 앝은 크기는 작지만 유지된 크기는 다른 객체도 포함되기 때문에 사이즈가 커진다.
메모리 누수가 의심되는 상황에서는 두 케이스 간의 크기가 많이 차이나는 객체를 우선적으로 찾아야 한다
- 타임라인 할당 계측
할당 계측은 시간에 따라 메모리의 변화를 유동적으로 확인 가능한 기능이다. Heap Snapshot 에 비해 연속적으로 변경 사항을 추적하므로 메모리 부담이 크다.
할당 계측 탭 내에서 지원하는 기능들은 아래와 같다.
- 계측된 TimeLine 내에 특정 생성자의 변화를 시간 별로 정밀하게 관측할 수 있다
- 사용자가 관측하고 싶은 기간이 있다면 이를 좁힐 수 있다.
- 특정 변수를 클릭하여 전역 변수로 저장하면 Console 을 통해 무슨 값을 가진 객체인지를 체크할 수 있다.
- 할당 샘플림
시간에 흐름에 따라 JS 함수들을 실행 스택 별로 열람할 수 있다는 특이점이 있다.
무거운 순으로 정렬할 경우 가장 많은 메모리를 점유한 함수의 Task 가 최상단으로 들어온다.
- 함수 내부에서 실행된 Context Stack 을 열람하여 구체적으로 어떤 작업에서 작업이 지체되었는지 알 수 있다.
- 소스 패널에 표시 옵션을 키면 해당 함수가 어떤 모듈에서 어떻게 정의되었는지 체크할 수 있다.
✒️ 크롬 개발자 도구를 활용한 애플리케이션 분석
✏️ NextJS 환경 디버깅하기
- NextJS 프로젝트 디버그 모드로 실행하기
"dev": NODE_OPTIONS='--inspect' next dev- NODE_OPTIONS 변수를
--inspect로 넘겨 Development 모드로 앱을 부팅하면 디버거가 활성화됨을 알 수 있다.
- Chrome 브라우저 내
chrome://inspect로 이동
- Open Dedicated DevTools for Node 를 클릭하여 새로운 창에서 개발자 도구를 띄운다.
- NextJS 서버에 트래픽 유입시키기.
- 오픈소스 ab 를 사용하면 특정 Domain 에 사용자가 의도한 요청을 1회 N 개의 요청을 M 개 실행할 수 있다.
>> ab -k -c [1회 당 요청 횟수] -n [요청 횟수] [Domain]- ab 를 사용하면 요청으로부터 응답받는데 걸리는 시간, Byte 크기와 같은 다양한 정보를 확인할 수 있다.
