서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구
빨간점과 clear : 기록되고 있다는 뜻, 클릭 시 기록을 멈출 수 있다. 오른쪽 멈춤표시?를 클릭하면 기록된거 다 지움
Filter 와 search: 필터링하고 검색하는 기능. filter를 통해 확장자별로 볼수있다.filter와 search 모두 검색기능이 있다. search가 좀더 자세한 느낌이다.
Preserve log: 페이지가 이동되어도 로그가 사라지지 않는다.
Disable cache: 브라우저의 캐시를 비활성화
No throttling: fast 3g, slow 3g, offline등 다양한 환경에서의 사용경험을 테스트할 수 있다.
네트워크 소스를 타입별로 볼 수 있다. 대체로 Fetch/XHR이 사용. 예약어를 통한 필터링도 가능. 예를 들어 method:GET를 통해 Get인 인터페이스만 볼 수 있다. (ex. domain,has-response-header,is,larger-than,method,mime-type,scheme,set-cookie-name,set-cookie-value,set-cookie-domain,status-code)
waterfall: request가 언제, 얼마만큼의 시간이 소요되며 도달하는지에 대한 정보를 나타내며 waterfall을 클릭하면 더 자세한 사항을 볼 수 있다.
Queued at s : 개발자 도구를 켠 순간부터 큐에 적재되는데 까지 걸리는 시간 Started at s : 개발자 도구를 켠 순간부터 request를 보내는데 까지 걸리는 시간 Queueing : 구문을 분석한 시점에서 큐에 적재되어 있는 시간 Stalled : 큐에서 request를 보내느 동안 정지되어 있는 시간 Proxy negotiation : 브라우저가 프록시 서버로 요청을 보내는데까지 걸리는 시간 request sent : request를 보내는데 걸리는 시간 waiting (TTFB) : response의 첫번째 바이트가 도달하는데까지 걸리는 시간(TTFB: Time To First Byte) Content Download : content가 다운로드 되는데 까지 기다린 시간 Explanation : 총 소요되는 시간
DOMContentLoaded : waterfall에서 파란색 선으로 표시가 되는 부분, Dom Tree를 그리는데 걸리는 시간 Load : waterfall에서 빨간색 선으로 표시가 되는 부분으로 DOM Tree 구조를 포함하여 이미지까지 화면에 로드되는 시간