[개발자 도구] 네트워크 패널

kurly.com 의 네트워크 패널

크롬 개발자 도구 - 구글에서 크롬 브라우저에는 개발자를 도와주기 위한 좋은 개발자 도구가 있다 ! 

개발자 도구에는 다양한 패널들이 있다. 그 중의 네트워크 패널을 사용하여 유용한 정보를 알아보자 ! 

 

네트워크 패널 

현재 웹사이트에서 통신하는 모든 소스들을 나타낸다.

모든 소스들의 네트워크 측면에서 확인 가능하며, 문제가 있을 시 비교/분석 가능하다

Waterfall : request가 언제, 얼마나 걸려서 도달하는지를 알려준다

네트워크 패널의 용도

- 리소스가 올바르게 업로드 / 다운로드 되었는지 확인할 때 !

- 리소스의 HTTP header, 사이즈 등의 부가적인 metadata를 검사할 때 !

- 느린 속도로 모바일 환경 테스트 가능

 

 

 

DOMContentLoaded : Waterfall에서 파란색 선으로 표시가 되는 부분으로, DOM Tree를 그리는데 걸리는 시간을 나타낸다.
Load : Waterfall에서 빨간색 선으로 표시가 되는 부분으로, DOM Tree 구조를 포함하여, 이미지까지 화면에 로드되는 시간을 의미한다.
DOMContentLoaded와 Load는 사용자 경험을 판단하는 기준 중, 가장 기본이 되는 곳으로 프론트엔드 개발자에게 중요한 지표이다.