크롬 개발자도구 Network 사용법

크롬 개발자도구 Network 사용법

개발자도구의 네트워크탭에 진입하면  다양한 그림 그리고 표로 구성되어 있는 것을 볼 수 있다.

기본적인 설명을 작성해보았다.

Network 탭의 장점

• NetWork 탭을 통해서 HTTP 통신 과정을 들여다 볼 수 있다.

• 브라우저와 서버 간의 통신과정에서 어떤 문제가 있는지 알 수 있다.

• 클라이언트 성능 개선 지점을 분석하고 찾기 위해 다양하게 활용할 수 있다.
  

기본

네트워크 탭에 진입하면 아래와 같은 그림이 나온다. 

name : 이름.

status : 상태 200이면 정상.

type : js, font, css 종류를 나타낸다.

size : 불러온 파일의 사이즈.

time : 해당 파일이 로드되는데 시간.

DOMContentLoaded: DOM Tree 구조를 그리는데 걸리는 시간.

Load : DOM Tree 구조를 포함, 이미지까지 화면에 로드되는 시간.

Filter 활용

아래에 부채표 모양을 클릭하면 확인하고 싶은 부분에 대해서만 내역을 볼 수 있다.

XHR, JS, CSS, IMAGE 등등을 확인할 수 있다.

촬영 모드

이 기능은 아래와 같이 카메라 버튼을 클릭하게 되면 F5를 클릭하여 리프레쉬를 해야한다.

레프레쉬를 한다면 ms별로 화면이 로드되어 있고 필요한 자원이 로드되어 있는지 확인할 수 있다.

특정 페이지가 유독 느려서 어디서 느린지 찾느라 고생을 했다.

근데 Network탭을 이용하여 한 눈에 찾을 수 잇었다. 원인은 이미지 크기..

사실 나도 동영상 강의를 보고 공부를 했지만 

확인해보니 구글 번역 사이트에 자세히 정리되어 있었다.

https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading?hl=ko

정말 하나하나 자세히 설명되어 있으니 각잡고 한번 보는 것도 좋을 듯.