1. 네트워크 탭 개요

개발자도구의 네트워크 탭은 서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구이다. 각 소스들을 불러올 때 속도, 응답 등 네트워크 측면에서 확인 가능하며, 문제시 비교, 분석을 할 수 있게 해준다.

2. 네트워크 탭 도구 살펴보기

• 가장 먼저 눈에 띄는 빨간점🔴은 기록되고 있다는 뜻이며, 기록되는 동안 주고받는 모든 Network 요소를 보여준다. 클릭 시 기록을 멈출 수 있으며 오른쪽 🚫을 클릭하면 기록된 모든 요소를 지운다.
• Filter와 Search 🔍는 이름과 같이 필터링하고, 검색하는 기능이며, Filter는 아래에서 좀 더 상세하게 다루겠다.
• Preserve log: 페이지가 이동되어도 로그가 사라지지 않는다.
• Disable cache: 브라우저의 캐시를 비활성화 한다.
• No throttling: Fast 3G, Slow 3G, Offline 등 다양한 환경에서의 사용경험을 테스트할 수 있도록 해주는 도구이며, 바로 옆 More network conditions...에서 더 다양한 환경을 테스트할 수 있다.

3. Filter

Filter는 네트워크 소스를 타입별로 볼 수 있으며, 대체로 Fetch/XHR 이 주로 사용된다.

직관적인 이름과 기능을 사용하는 FIlter를 따로 소개하는 이유는 별도의 Filtering 방식을 사용할 수 있기 때문인데, 예를들어 HTTP Method 가 GET 인 인터페이스만 Filtering 해보고 싶다면 method:GET 이라고 입력하면 된다.

method와 같이 Filter 텍스트 박스에 입력할 수 있는 keyword는 다음과 같다.

• domain
• has-response-header