크롬 개발자도구 - Network panel
◼︎ 네트워크 패널이란?
-
서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구이며 이미지나 영상 등 각 소스들을 불러올 때 속도, 응답 상태 등 네트워크 측면에서 확인 가능하며, 문제 시 비교, 분석을 할 수 있게 도움을 주는 도구이다.
-
개발자도구가 열려 있는 동안의 실제 네트워크 요청을 기록한다.
◼︎ 상단 탭
-
파일 형식별로 보여주는 탭
-
All : 통신하는 모든 목록을 표시한다.
-
JS : 페이지에서 사용하고 있는 JS 파일들을 표시하며 해당 페이지에서 어떤 라이브러리를 사용했는지 확인할 수도 있다.
-
CSS : css 파일을 볼 수 있다.
-
Img : 이미지 파일을 볼 수 있다.
-
Media : 동영상(mp4) 파일을 볼 수 있다.
-
Font : 폰트 파일을 볼 수 있다.
-
XHR : 브라우저와 서버가 HTTP(HyperText Transfer Protocol) 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지 표시하며 서버로부터 요청에 따른 response 결과를 확인할 때 사용한다.
-
FE에서 BE로 API를 호출했을 때 제대로 통신이 이루어져있는지 알 수 있다.
-
만약 원하는 동작이 이뤄지지 않은 경우 호출이나 응답은 제대로 됐는지 등에 대한 모든 정보를 알 수 있다.
◼︎ 하단 탭
-
Filmstrip : 이미지 최상단에 위치한 그래프. 타임라인형태로 어떠한 데이터가 어떤 순서로 로드 됐는지 표시되는 탭.
-
Name : 리소스의 이름과 URL
-
Status : 작동 여부를 숫자로 표시하여 오류를 확인 할 수 있는 탭
1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다. -
Type : 파일의 형식 (.html / .js 등의 형식)을 볼 수 있는 탭.
-
Initiator : 시작지점을 의미하며, Other이라고 되있다는것은 쉽게 말해서 root를 의미한다.
-
Size : 각 리소스들의 파일 사이즈를 확인할 수 있는 탭.
-
Time : 웹페이지(클라이언트)가 요청하고, 서버가 응답하는 것까지의 걸린 시간을 표시한다.
-
Waterfall : 타임라인의 세부 정보를 알려주는 탭.
Mission
1. Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
- 개발자 도구 > network > Fetch / XHR 탭 클릭
- Name 탭에서 category-groups 클릭
- 우측 상단의 Preview 클릭해서 json 형식의 파일을 펼쳐보면 api호출을 통해 가져온 데이터를 확인할 수 있다.
2. Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기
- 개발자 도구 > network > Midea 탭 클릭
