.png){kind=logo}
1. What is Network Panel?
- 현재 사용자 브라우저의 모든 통신 정보를 나타내는 도구.
- Network Pannel을 통해 백-프론트 사이에서 발생하는 통신, 프론트와 사용자 사이에서 발생하는 통신상태를 알 수 있다.
- 로드하는데 걸리는 시간
- 어떤 순서로 로드하는지- 어떤 요청과 응답인지
- 웹페이지/서버 간의 데이터 흐름 분석
- 네트워크 문제 발생시 발생 원인 파악
2. Network Panel의 기능
- http 네트워크 통신 확인
- API 크롤링, 로딩 성능(쓰로틀링으로 성능 테스트 가능) 테스트
- 이미지, 영상등의 소스
- ALL, XHR(API), JS, CSS, Img, Media, Font, Doc, WS, Wasm, Manifest... 필터를 적용해서 해당 요소만 찾을 수 있다.
- 만약 문제가 발생했을때, Network Panel로 프론트엔드의 문제인지 백엔드의 문제인지 오류를 확인할 수 있다.([XHR-headers-status code:])
3. Market Kurly API
카테고리 정보를 가져오는 API 찾아보기
network>Fetch/XHR>categories?ver=1
4. Tesla 자동차 동영상 url
Tesla 홈페지에서 주행중인 Model S 동영상 url
network>media>mp4>headers
비진