질문
Network패널의 기능은?Network패널의 여러 가지 탭의 종류와 기능 살펴보기- Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
- Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기
1. Network 패널의 기능은?
한마디로 현재 내가 보고있는 브라우저에서 발생하고있는 모든 통신 상태를 나타낸다 라고 할 수 있다.(백-프론트사이 의 관계,프론트와 유저사이의 관계)
네트워크 패널에는 서버 전체의 네트워크 활용도 통계가 표시되고, 통계는 각각 구성된 가상 네트워크 디바이스에 대해 포트별로 정렬한다.
해당 웹사이트에서 통신하고 있는 모든 정보가 표시된다.
->무슨 요청으로 호출했고 응답은 어떻게 되고 있는지 확인가능.
2.Network 패널의 여러 가지 탭의 종류와 기능 살펴보기
Network 패널엔 많은 탭이 있지만 그 중에 가장 중요한것은 'XHR'이라고 할 수 있음
XHR (Xml http Request) => 프론트엔드에서 백엔드에 API 호출할때의 정보
👀 XHR은 AJAX(실시간으로 서버와 브라우저가 네트워크가 가능한 기능 ex:인스타의 좋아요기능
요청을 생성하는 JavaScript API
브라우저가 가지고있는 XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 것.
즉, XHR이 API이며 그 XHR의 기능이 AJAX 라는 것이다.
여기서 API 란 프로그램들이 서로 상호작용하는 것을 도와주는 매개체이자 접근성을 허용할지 말지 확인하는 것
✔마켓컬리 카테고리 정보 가져오는 API 찾아보기
마켓컬리 홈페이지 - F12 or option + command + j - Network panel에서 XHR - categories 파일
(오류가 나서 수정하고 싶거나 찾고싶은 부분은 Filter에 검색으로 빠르게 찾을 수 있다.)
✔테슬라 영상 가져오기
영상이 틀어져있는 곳을 띄워두고 Network panel - filter 아래 media - mp4로 되어 있는 영상 링크 복사해서 url을 가져올 수 있음.
XHR: Xml http Request =>프론트엔드에서 백엔드에 api호출할때의 정보.
Elements : html/CSS 상태 확인
Console : 콘솔 (변수 정보를 확인하고 오류 메시지 표시)
Sources : 스크립트 디버깅 (break point 지정 및 변수 모니터링 등)
Network : 브라우저에서 발생하는 통신 상태
Performance(예전 Timeline패널) : 성능 측정
Memory(예전 Profiles 패널) : 메모리 사용 형태를 작성하고 누수 탐색.
Application(예전 Resources 패널) : 쿠키 및 스토리지 등의 내용 수집
Audits : 페이지를 분석하고 최적화를 위한 팁 나열
Security : Mixed content 이슈, 인증서 문제 등을 디버깅
