Web 개발에 도움이 되는 도구로서 'Element', 'console',
'Sources', 'Network', 'Performance', 'Memory',
'Application', 'Security', 'Lighthouse' 패널 등,
브라우저에서 제공하는 툴.
Network 패널은 웹페이지를 로드하기 시작했을 때 부터 웹페이지 안에 포함되어있는
이미지, 리소스 등을 Network(서버)를 통해서 각각의 이미지, 리소스를 가져오는데
**얼마나 많은 시간이 걸리는지, 어떤 순서로 리소스를 가져오는지, 어떤 요청과 응답이 오고가는지 등,
웹페이지와 서버 사이에서의 데이터의 흐름을 분석하고, 문제 발생 시 해결책을 찾을 수 있는 곳.**
현재 작성중인 velog 페이지를 보면 상단의 url과 개발자도구에서 Name의 첫번째 부분이 동일한 것을 볼 수 있는데요,
Network는 결국 페이지를 구성하는 URL부터 시작하여 요소 별로 서버에 있는 데이터를 가져오는 것을 보여주는 곳 입니다.
위 이미지처럼 Network 패널 속에는 데이터를 확인 할 수 있는 각 요소들이 존재하는데요, 이를 통해서 요소 별 상태를 체크 할 수 있습니다.
타입 형식 중 XHR = API이며,
API 란 프로그램들이 서로 상호작용하는 것을
도와주는 매개체이자 접근성을 허용할지 말지 확인하는 것이다.
- Queued at <N> ms : 개발자 도구를 켠 순간부터 큐에 적재되는데 까지 걸리는 시간
- Started at <N> ms : 개발자 도구를 켠 순간부터 request를 보내는데 까지 걸리는 시간
- Queueing : 구문 분석한 시점에서 큐에 넣는데 그게 적재되어 있는 시간
- Stalled : 큐에서 request를 보내는데 그게 정지되어 있는 시간
- Proxy negotiation : 브라우저가 프록시 서버로 요청을 보내는데까지 걸리는 시간
- Request sent : request를 보내는데 걸리는 시간.
- Waiting (TTFB) : response의 첫번째바이트가 도달하는데까지 기다린 시간
(TTFB는 Time To First Byte)
- Content Download : content가 다운로드가 되는데 까지 기다린 시간.
시작 시점은 response 시작 시점, 종료 시점은 response 종료시점이라 생각해도 무방
- Explanation : 이 모든걸 종료하는데 걸리는 시간