◾ 네트워크 탭 개요
개발자도구의 네트워크 탭은 서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구이다. 각 소스들을 불러올 때 속도, 응답 등 네트워크 측면에서 확인 가능하며, 문제시 비교, 분석을 할 수 있게 해주는 아주 소중한 친구이다.
◾ 네트워크 탭 도구 살펴보기
가장 먼저 눈에 띄는 빨간점🔴은 기록되고 있다는 뜻이며, 기록되는 동안 주고받는 모든 Network 요소를 보여준다. 클릭 시 기록을 멈출 수 있으며 오른쪽 🚫을 클릭하면 기록된 모든 요소를 지운다.
Filter와 Search🔍는 이름과 같이 필터링하고, 검색하는 기능이며, Filter는 아래에서 좀 더 상세하게 다루겠다.
Preserve log: 페이지가 이동되어도 로그가 사라지지 않는다.
Disable cache: 브라우저의 캐시를 비활성화 한다.
No throttling: Fast 3G, Slow 3G, Offline 등 다양한 환경에서의 사용경험을 테스트할 수 있도록 해주는 도구이며, 바로 옆 More network conditions...에서 더 다양한 환경을 테스트할 수 있다.
◽ Filter
Filter는 네트워크 소스를 타입별로 볼 수 있으며, 대체로 Fetch/XHR 이 주로 사용된다.
직관적인 이름과 기능을 사용하는 FIlter를 따로 소개하는 이유는 별도의 Filtering 방식을 사용할 수 있기 때문인데,
예를들어 HTTP Method 가 GET 인 인터페이스만 Filtering 해보고 싶다면 method:GET 이라고 입력하면 된다.
method와 같이 Filter 텍스트 박스에 입력할 수 있는 keyword는 다음과 같다.
- domain
- has-response-header
- is
- larger-than
- method
- mime-type
- scheme
- set-cookie-name
- set-cookie-value
- set-cookie-domain
- status-code
◾ Network 소스
Name, Status 등을 따로 설명할 필요는 없을 것 같으니 바로 Waterfall으로 넘어가자면, request가 언제, 얼마만큼의 시간이 소요되며 도달하는지에 대한 정보를 나타내며, Waterfall을 클릭하면 더 자세한 사항을 볼 수 있다.
- Queued at s : 개발자 도구를 켠 순간부터 큐에 적재되는데 까지 걸리는 시간
- Started at s : 개발자 도구를 켠 순간부터 request를 보내는데 까지 걸리는 시간
- Queueing : 구문을 분석한 시점에서 큐에 적재되어 있는 시간
- Stalled : 큐에서 request를 보내는 동안 정지되어 있는 시간
- Proxy negotiation : 브라우저가 프록시 서버로 요청을 보내는데까지 걸리는 시간
- Request sent : request를 보내는데 걸리는 시간
- Waiting (TTFB) : response의 첫번째 바이트가 도달하는데까지 걸리는 시간 (TTFB: Time To First Byte)
- Content Download : content가 다운로드가 되는데 까지 기다린 시간
- Explanation : 총 소요되는 시간
◾ Network 탭 최하단
DOMContentLoaded : Waterfall에서 파란색 선으로 표시가 되는 부분으로, DOM Tree를 그리는데 걸리는 시간을 나타낸다.
Load : Waterfall에서 빨간색 선으로 표시가 되는 부분으로, DOM Tree 구조를 포함하여, 이미지까지 화면에 로드되는 시간을 의미한다.
DOMContentLoaded와 Load는 사용자 경험을 판단하는 기준 중, 가장 기본이 되는 곳으로 프론트엔드 개발자에게 중요한 지표이다.
참고사이트 즐거운인생 Network탭 살펴보기, [Chrome]개발자 도구 Network 패널의 기능
👀 fetch API
비동기 요청의 가장 대표적인 사례는 네트워크 요청이며, 네트워크를 통해 이루어지는 요청은 다양한 형태가 있다.
그 중에서 URL로 요청하는 경우가 가장 일반적이며, URL로 요청하는 것을 가능하게 해주는 API가 fetch API 이다.
아래의 예시를 보면, 항상 동적으로 변하는 정보와, 고정적인 정보가 분리되어 있는데, 최신 뉴스나 오늘 날씨(날씨/미세먼지 정보)는 동적으로 데이터를 받아야하는 정보이다.
이런 경우, 항상 동적으로 변하는 정보(뉴스, 날씨)만 업데이트하기 위해서는 요청 API를 이용해야하는데, fetch API를 이용해 해당 정보를 원격 URL로부터 불러오는 경우를 살펴보자.
아래는 원격 URL로부터 정보를 받아와서 특정 DOM element를 업데이트하는 컨셉을 도식화한 그림이다.
fetch API는 위와 같이, 특정 URL로부터 정보를 받아오는 역할을 하며, 이 과정이 비동기로 이루어지기 때문에, 경우에 따라 다소 시간이 걸릴 수 있다.
이렇게 시간이 소요되는 작업을 요구할 경우에는 blocking이 발생하면 안 되므로, 특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우는 경우도 있다.
✔ 사용 예시
let url = "//koreanjson.com/posts/1"; fetch(url) .then((response) => response.json()) .then((json) => console.log(json)) .catch((error) => console.log(error));위의 코드를 크롬 브라우저 개발자 도구 콘솔창에 입력 후, 실행한 출력 결과는 아래와 같다.
Reference: 코드스테이츠
크롬 개발자 도구 네트워크 탭에서 유형별로 필터링
크롬 개발자 도구의 네트워크 탭에는 필터 기능이 존재하며 유형별로 요청(Request)을 필터링할 수 있습니다.
이번 포스팅은 요청(Request)을 유형별로 필터링하는 방법과 각 유형에 대해 간략하게 설명합니다.
※ Wasm과 매니페스트(manifest)
Wasm은 WebAssembly의 약자이며, JavaScript가 아닌 다른 프로그래밍 언어로 작성된 코드를 호출하도록 하는 기술입니다.
매니페스트(manifest)는 웹 애플리케이션에 대한 정보를 JSON으로 표현하는 파일입니다.Wasm와 매니페스트에 대한 자세한 정보가 없어서 설명은 생략합니다.
다중 선택
여러 유형을 동시에 필터링하려면 Mac은 Command, Windows는 Control를 누른 상태에서 유형을 클릭합니다.
다음 스크린샷은 Fetch/XHR, CSS, 미디어 유형이 선택된 경우입니다.
Fetch/XHR
JSON 형식의 데이터를 요청하는 방식으로 JavaScript의 Fetch API와 AJAX 요청을 생성하는 XHR(XMLHttpRequest)를 사용합니다.
Fetch API를 사용하여 데이터를 요청한 경우 유형은 fetch, Fetch API 이외의 방식은 xhr로 표시됩니다.(Axios도 xhr로 표시됩니다.)
JS
JavaScript 파일 요청을 필터링하고 싶은 경우 JS를 선택합니다.
유형은 script로 표시됩니다.
요청에 대한 응답을 보면 JavaScript 문법이 존재하는 것을 확인할 수 있습니다.
CSS
CSS 파일 요청을 필터링하고 싶은 경우 CSS를 선택합니다.
유형은 stylesheet로 표시됩니다.
요청에 대한 응답을 보면 CSS 문법이 존재하는 것을 확인할 수 있습니다.
이미지
이미지 요청을 필터링하고 싶은 경우 이미지를 선택합니다.
이미지의 유형은 응답 헤더의 content-type에 따라 다르게 표시됩니다.
다음 예시를 살펴봅시다.
선택된 이미지 요청의 유형은 webp입니다.
요청에 대한 응답 헤더를 보면 content-type이 image/webp인 것을 확인할 수 있습니다.
미디어
비디오(동영상) 파일에 대한 요청을 필터링하고 싶은 경우 미디어를 선택합니다.
유형은 media로 표시하며, 미디어 플레이어가 존재하는 웹 페이지에서 동영상을 재생하면 미디어에 대한 요청이 발생합니다.
글꼴
특정 웹 사이트 전용 웹 폰트를 불러오는 경우 폰트에 대한 요청이 발생합니다.
특정 웹 사이트 전용 웹 폰트를 불러오려면 HTML의 <link> 태그를 사용하거나 CSS의 @import 키워드를 사용할 수 있습니다.
다음 예시는 에어비앤비(airbnb) 사이트 접속 후 에어비앤비 사이트 전용 웹 폰트를 요청하는 경우입니다.
문서
html 문서에 대한 요청은 문서를 선택하여 필터링할 수 있습니다.
유형은 document로 표시됩니다.
WS
WS는 WebSocket의 약자로 REST API 방식이 아닌 WebSocket 방식으로 데이터를 주고받는 요청(Request)을 필터링할 수 있습니다.
다음 사이트는 WebSocket을 테스트할 수 있는 페이지입니다.
Online Websockets Tester - Debug Client Tool
www.piesocket.com
페이지 접속 후 크롬 개발자 도구의 네트워크 탭을 확인하면 WS에 요청(Request)이 발생하는 것을 볼 수 있습니다.