WEB | DevTools (Network Panel)

Network Panel (네트워크 패널)

Inspect Network Activity Demo Site

언제 네트워크 패널을 사용하는가?

보통 네트워크 패널은 resources 들이 기대한대로 download되고 upload 되는지 확인하고자 할 때 사용한다.

resources 들이 제대로 upload되거나 download 되는지 확인하고자 할 때,
개별적인 resource의 속성들을 확인할 때 (HTTp headers, content, size 등)

만약 page load 속도를 향상시키고자 한다면 네트워크 패널보다는 Audits panel을 찾는 것이 좋다. 이것은 어떻게 하면 page 성능을 향상시킬지에 대한 방법들에 대해 제안해주기 때문이다.
최근에는 Audits panel 은 Lighthouse로 대체되었다.

The Network Log

Network Log(네트워크 로그)의 각 줄은 resource를 나타낸다. 기본적으로 리소스들은 시간순서대로 배치되며, 가장 맨 위에 오는 리소스는 대게 HTML 문서이며 가장 마지막 리소스는 마지막으로 요청한 무언가가 된다.

status : HTTP response code.
Type : The resource type.
Initiator : What caused a resource to be requested. Clicking a link in the initiator column takes you to the souce code that caused the request.
Time : How long the request took.
Waterfall : A graphical representation of the different stages of the reuqest.
Hover over a waterfall to see a breakdown.

낮은 네트워크 연결에서의 시뮬레이션

네트워크 패널의 기능을 사용하여 만들어진 페이지가 보다 안좋은 네트워크 환경에서 어떻게 로딩될지 확인해볼 수 있다.

개발자 도구\네트워크 패널 우측 상단에 보면 위 스크린샷과 같이 우측 상단에 Online 이라는 default 값으로 set up 되어 있는 것을 클릭하면

아래와 같이 여러 네트워크 환경과 유사하게 임의로 Throttling(쓰로틀링)을 걸 수 있게 된다.
원하는 수준의 네트워크를 선택하고 페이지를 새로고침하면 해당 네트워크 수준에서 페이지가 어떻게 로딩되는지 확인할 수 있다.

참조
Inspect network activity(https://developer.chrome.com/docs/devtools/network/)