개요
코드를 디버깅할 때 유용하게 쓸 수 있는 크롬 개발자 도구의 Network 탭. 입사 후 기존 소스코드를 분석할 때 이 네트워크 탭이 굉장히 중요하다는 사실을 알게 되었다. 이전까지는 데이터가 제대로 수신됐는지만 확인하는 용도로 사용했던 터라 겉핥기 식으로 이해하고 있었는데, 이제는 기능을 확실하게 파악해서 제대로 뽑아 먹어보자.
Network 탭 기능별 설명
Recording
-
🟥 / 🔴: Recording 기능. 🟥 상태에서 클릭을 하면 🔴로 아이콘이 변하면서 네트워크 상태를 기록한다. 바로 옆에 정지 표시를 누르면 녹화를 멈출 수 있다.
네트워크 기록 후 같은 탭의 가장 오른쪽에 있는 ↓ 아이콘(export)을 누르면 har(http archive) 파일을 다운로드 받을 수 있다. 다운로드 받아서 IDE나 텍스트 에디터로 열어보면 다음과 같이 json 형식의 파일을 확인할 수 있다.
har 파일은 웹 페이지 성능 문제 해결이나 디버깅을 위해서 주로 사용된다. export 아이콘 바로 왼쪽의 ↑ 아이콘(import)을 클릭하면 반대로 크롬에서 해당 네트워크 세션을 재현할 수 있다. export는 됐는데 import 후 아무런 반응이 일어나지 않아서 구글링해보니 현재 크롬 팀에서 에러를 수정하고 있는 것 같다.
(*출처: https://support.google.com/chrome/thread/219473337/unable-to-import-har-files-in-the-network-tab-of-the-developer-console?hl=en, 2023-06-10 기준)
- Recording 표시 오른쪽 깔때기 아이콘은 아래에서 다시 살펴보겠다.
preserve log / disable cache / No throttling
- ✅ preserve log: 화면이 전환되거나 할 때 네트워크 기록들이 사라지지 않고 쌓인 채로 확인할 수 있다.
- ✅ Disable cache: 캐시 비활성화 설정
- No throttling: ▼ 버튼을 누르면 3G, 5G 등 네트워크 대역폭(속도)을 조절할 수 있다.
filter
-
깔때기 모양 아이콘을 누르면 하단에 filter 탭이 열린다. filter 검색 창에 확인하고 싶은 request 키워드를 입력해서 필터링할 수 있다. (ex. video를 입력하면 request url에 video가 포함된 것만 표시. 정규표현식도 입력 가능)
-
특정 property으로도 필터링할 수 있다. property의 경우 입력 시 자동완성되면서 드롭다운 메뉴로 나타난다.
(ex. method:GET으로 필터링하면 GET 요청 네트워크만 표시된다.)
- property 종류는 다음과 같다.
- method
- domain
- has-response-header: response-header에 포함된 옵션
- is larger-than: 요청 리소스의 size를 지정
- mime-type: mime(Multipurpose Internet Mail Extensions) 유형을 표시. response header의 content-type을 의미
- scheme: 요청과 응답 url에 사용된 프로토콜 스키마 (http(s), ftp, file 등)
- set-cookie-name
- set-cookie-value
- set-cookie-domain
- status-code
- ✅ invert: filter에 입력된 내용을 무시한 상태의 기록을 보여준다. (filter에 입력된 검색어를 일시적으로 해제)
- ✅ Hide data URLs: data:로 시작하는 모든 data URL을 제외한다.
waterfall
- waterfall은 네트워크 요청과 응답 시간을 시각적으로 나타내는 그래프다. 그래프가 위에서 아래로 내려가는 모습이 폭포수가 아래로 흐르는 모습과 유사하여 명명되었다. 네트워크 요청과 응답 시간을 명확하게 시각화하여 볼 수 있다.
Headers
- 네트워크 Name을 선택하면 우측에 상세보기 창이 열린다.
- headers는 네트워크 요청과 응답에서 전소되는 메타데이터 정보를 나타낸다. General, Response, Request로 나뉜다.
payload
- 서버로 전송한 데이터를 확인할 수 있다.
Preview
- 서버로부터 수신한 데이터를 예쁘게 parsing해서 보여준다.
Initiator
- 네트워크 요청이 어떤 원인에 의해 시작되었는지를 나타내는 정보다.
DOMContentLoaded / Load
- DOMContentLoaded : Waterfall에서 파란색 선으로 표시가 되는 부분으로, DOM Tree를 그리는데 걸리는 시간을 나타낸다.
- Load : Waterfall에서 빨간색 선으로 표시가 되는 부분으로, DOM Tree 구조를 포함하여, 이미지까지 화면에 로드되는 시간을 의미한다.
