Network 패널이란?

Network패널의 기능

"http 네트워크 통신 확인"

"API 크롤링, 페이지 로딩 성능 테스트"

"이미지, 영상 등의 소스 (mock data 활용)"

보통 네트워크 패널은 resources 들이 기대한대로 download되고 upload 되는지 확인하고자 할 때 사용한다.

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

(All, XHR, JS, CSS, Img, Media ...)
XHR(Xml(Extensible Markup Language) Http Request) - 브라우저와 서버가 HTTP 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용한다.

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

네트워크 패널의 XHR탭에서 categories라는 api를 담고 있는 항목을 찾을 수 있다.

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

원래대로라면 Network패널의 media탭에서 영상url을 확인 해야 하는데, 해당 위치에 아무 항목이 로드되지 않아서 홈페이지의 영상의 콘솔창을 열어보니 위와 같은 결과를 얻을 수 있었다.
Network패널이 아닌 Elements패널에서 위치를 찾을 수 있었는데, Elements패널을 공부하신 팀원분께 질문해야겠다!