Chrome 개발자도구 Network탭 사용법

Chrome 개발자도구의 Network 탭은 웹페이지에서 일어나는 모든 네트워크 요청을 실시간으로 관찰하고 분석할 수 있는 매우 강력한 도구이다.

웹 개발자라면 디버깅, 성능 최적화, 오류 추적 등에 반드시 사용하게 되는 기능이므로 기본적인 구성이나 사용 방법에 대해 알아두면 좋을 것 같아 정리하였다.

Google Chrome for Developers 공식 채널 영상인
https://www.youtube.com/watch?v=e1gAyQuIFQo&t=53s 를 참고하였다.

⚠️ 유의점

개발자 도구의 Network 패널을 활성화하기 이전에 브라우저가 이미 응답을 받은 경우 응답된 리소스가 표시되지 않는다. 따라서 아무런 리소스가 표시되지 않는다면 Netowrk 패널이 켜진 상태에서 페이지를 새로고침해야 한다.

• 네트워크 차트를 숨기고 싶다면 다음과 같이 톱니바퀴 버튼 > 개요 체크 해제를 하면 된다.
  
  

• 톱니바퀴 > 큰 요청 행 을 체크하면 자원들에 대한 상세 정보를 볼 수 있다. 이 때 size가 유용한데, 실제 압축되어 전송되는 파일의 용량을 함께 볼 수 있다.

❓ 압축된 파일의 용량이 더 큰 이유?

밑에 적힌 용량이 압축된 용량이라고 하는데, 더 큰 경우가 있었다. 알아보니 압축 방식에 따라 압축된 용량이 더 큰 경우도 있다고 한다. 쉬운 예시를 들자면 다음과 같다.

'22228888'
이걸 만약 연속하는 숫자의 개수로 표현해서 압축한다면 2484이다.
하지만 28을 이렇게 압축하면 2181로 오히려 늘어나게 된다.

이처럼 압축 방식에 따라 비효율이 생길 수 있다.

📌 네트워크 패널 구성

대표적인 네트워크 패널의 컬럼들에 대해 알아보자.

1) 상태(status): 서버가 리턴한 http 상태 코드

2) 유형(type): 받아온 자원의 유형

3) 시작점(Initiator): 누가 이 자원을 요청하게 만들었는가?

16 <img src="logo.png">

이 경우 Initiator는 index.html:16

4) 크기(size)필드: 자원의 크기(용량)

5) 시간(time)필드: 브라우저가 해당 자원을 다운로드 받는 데 얼마나 걸렸는지

📌 etc.

• 정지 버튼: 네트워크 로그 기록 중지
  -> Devtools가 열려 있는 동안에는 계속 로그를 기록하므로, 로그가 너무 많이 쌓였다면 정지 버튼을 눌러 중지해주도록 하자.

• 마우스 우클릭으로 원하는 컬럼을 추가/삭제 할 수 있다.

• 와이파이 모양의 아이콘을 눌러 네트워크 쓰로틀링을 설정할 수 있다.
  느린 네트워크 환경을 시뮬레이션 해 볼 수도 있다.
  

• 개발자 도구를 연 상태에서 새로고침 길게 클릭 > 캐시 비우기 및 강력 새로고침을 하면 캐시를 무시하고 모든 리소스를 새로 요청한다. 이렇게 하면 처음 방문자의 입장에서 테스트해볼 수 있다.

• Preview 탭은 해당 리소스의 기본적인 렌더링 결과를 보여준다.
  HTML의 경우, API가 에러 코드를 HTML로 반환할 때 이를 확인하는 데 유용할 때가 있다고 한다.
  

• 응답(response) 탭은 해당 자원의 소스 코드를 보여준다.
  

• 검색 아이콘을 눌러 'cache-control'을 검색하면 캐시 정책을 확인해볼 수 있다.
  

이 밖에도 다양한 사용법이 있을 텐데, 차차 정리해 나가도록 하자.