TIL10 | 크롬 개발자 도구 - Network panel

팀 미션 💫️

주제 : 개발자 도구의 Network 패널

팀원 : 박민정, 한화연, 이지은

 

Network 패널

해당 웹 사이트에서 통신하고 있는 모든 정보가 표시되는 곳이다.

 

Network 패널의 기능

http 네트워크 통신, 페이지 로딩 성능 테스트, 이미지 영상 등의 소스를 확인 가능하다.

 

Network 패널의 여러 가지 탭의 종류와 기능

상단 탭 : 파일 형식별로 보여주는 탭

• All - 통신하는 모든 목록

• JS - 페이지에서 사용하고 있는 JS 파일들. 해당 페이지에서 어떤 라이브러리를 사용했는지 대충 알 수 있음.

• Media - 보통 mp4 파일들

• XHR - 브라우저와 서버가 HTTP 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용한다.

  프론트엔드에서 백엔드쪽으로 API를 호출하는 일이 많은데 제대로 통신이 이루어져있는지,

  만약 원하는 동작이 이뤄지지 않은 경우 호출이나 응답은 제대로 됐는지 등에 대한 모든 정보를 알 수 있음

하단 탭

Filmstrip :

이미지 최상단에 위치한 그래프.

타임라인형태로 어떠한 데이터가 어떤 순서로 로드 됐는지 표시되는 곳.

Name :

리소스의 이름과 URL

Status :

작동 여부를 숫자로 표시하여 오류를 확인 할 수 있는 곳

ex. 200 : 정상작동 / 304 : Not modified 등..

Type :

파일의 형식 (.html / .js 등의 형식)을 볼 수 있는 곳.

Initiator :

시작지점을 의미하며, ‘(Initiator)에서 호출 됐다’의 의미? (사실.. 무슨 얘긴지 잘 모르겠다..)

Size :

각 리소스들의 파일 사이즈

Time :

웹페이지(클라이언트)가 요청하고, 서버가 응답하는 것 까지의 걸린 시간

Waterfall :

타임라인의 세부 정보를 알려주는 곳

 

Mission 🚀️

1. Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기

• 개발자 도구 > network > Fetch / XHR 탭 클릭
• Name 탭에서 categories?ver=1 클릭

• 우측 상단의 Preview 클릭해서 json 형식의 파일을 펼쳐보면 api호출을 통해 가져온 데이터를 확인할 수 있다.

https://api.kurly.com/v2/categories?ver=1

 

2. Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기

• 개발자 도구 > network > Midea 탭 클릭

https://tesla-cdn.thron.com/delivery/public/image/tesla/676da95d-942e-414c-8534-f1832f0d4ced/bvlatuR/std/3296x1798/ms-homepage-desktop

 

첫번째 팀 미션을 마무리하며

웹 개발 공부하면서 개발자도구는 디폴트로 열어놓던 창인데 Elements, Console, Application 탭을 주로 사용했었다. 이번 팀 미션에서는 Network 탭을 주제로 학습해서 발표하는 미션이라 좋은 기회였던 것 같다.

팀 프로젝트를 진행할 때 프론트엔드에서 백엔드로 API호출하는 부분이 많은데 Network 패널을 이용해서 원활하게 통신이 되고 있는지, 문제되고 있는 부분은 어딘지를 확인하는데 유용하게 쓰인다니깐 앞으로 더 잘 숙지해서 팀 프로젝트 할 때 잘 활용해봐야겠다.