개요
개발자 도구의 네트워크 탭은 서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구이다. 각 소스들을 불어올 대 속도, 응답 등 네트워크 측면에서 확인이 가능하며, 문제시 비교, 분석을 할 수 있게 도와준다.
네트워크 탭 도구 살펴보기
- 빨간점은 로그가 기록되고 있다는 뜻이며, 기록되는 동안 주고받는 모든 Network 요소를 보여준다, 클릭시 기록을 멈출 수 있으며, 바로 오른쪽 버튼을 누르면 기록된 모든 요소를 지운다.
- 로그보존(Preserve Log) : 페이지가 이동되어도 로그가 사라지지 않게 하는 기능이다.
- 캐시 사용중지(Disable cache) : 브라우저의 캐시를 비활성화 한다.
- 제한 없음(No throttling) : Fast 3G, Slow 3G, Offline 등 다양한 환경에서의 사용경험을 테스트할 수 있도록 도와주는 도구이며, 바로 옆 More network conditions...(와이파이모양)에서 더 다양한 환경을 테스트할 수 있다.
Filter
Filter는 네트워크 소스를 타입별로 볼 수 있으며, 대체로 Fetch/XHR이 주로 사용된다. 직관적인 이름과 기능을 사용하는 Filter를 따로 소개하는 이유는 별도의 Filtering 방식을 사용할 수 있기 때문인데, 에를 들어 HTTP Method가 GET인 인터페이스만 Filtering해보고 싶다면 method:GET 이라고 입력하면 된다. filter텍스트 박스에 입력할 수 있는 keyword는 아래와 같다.
- domain
- has-response-header
- is
- larger-than
- method
- mime-type
- scheme
- set-cookie-name
- set-cookie-value
- set-cookie-domain
- status-code
Network 소스
폭포(waterfall)은 request가 언제, 얼마만큼의 시간이 소요되며 도달하는지에 대한 정보를 나타내며, 클릭하면 좀 더 자세한 사항을 볼 수 있다.
- ~초에 대기열에 추가 됨(Queued at s) : 개발자 도구를 켠 순간부터 큐에 적재되는데 까지 걸리는 시간
- ~초에 시작함(Started at s) : 개발자 도구를 켠 순간부터 request를 보내는데 까지 걸리는 시간
- 대기열(Queuing) : 구문을 분석한 시점에서 큐에 적재되어 있는 시간
- 중단됨(Stalled) : 큐에서 request를 보내는 동안 정지되어 있는 시간
- Proxy negotiation : 브라우저가 프록시 서버로 요청을 보내는데까지 걸리는 시간
- Request sent : request를 보내는데 걸리는 시간
- Waiting(TTFB) : response의 첫번째 바이트가 도달하는데까지 걸리는 시간(Time to First Byte)
- Content Download : content가 다운로드 되는게까지 기다린 시간
- Explanation : 총 소요 시간
Network 탭 최하단
DOMContentLoaded : WaterFall에서 파란색 선으로 표시가 되는 부분으로, DOM Tree를 그리는 데 걸리는 시간을 나타낸다.
Load : Watertfall에서 빨간색 선으로 표시가 되는 부분으로, DOM Tree구조를 포함하여, 이미지까지 화면에 로드되는 시간을 의미한다. DOMContendLoaded와 Load는 사용자 경험을 판단하는 기준 중에서 가장 기본이 되는 곳으로 프론트엔드 개발자에게는 중요한 지표라고 한다.
개발자도구 Network탭 총정리
네트워크 탭 개요 개발자도구의 네트워크 탭은 서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구이다. 각 소스들을 불러올 때 속도, 응답 등 네트워크 측면에서 확
velog.io
