크롬 개발자 도구?
개발을 도와주는 다양한 도구를 사용자에게 제공
❓ Network 패널의 기능은?
Network 패널은 웹페이지를 시작하는 순간부터 웹페이지 안에 있는 이미지, 리소스 등을 네트워크를 통해서 각각의 이미지, 리소스를 가져오는데
얼마나 많은 시간이 걸리는지, 어떤 순서로 리소스를 가져오는지, 어떤 요청과 응답이 오고가는지 등, 웹페이지와 서버 사이에서의 데이터의 흐름을 분석하고, 문제 발생 시 해결책을 찾을 수 있는 곳.
❓ Network 패널의 여러 가지 탭의 종류와 기능
Filmstrip : 타임라인형태로 보여진다.
Name : 리소스의 이름과 URL
Status : 작동 여부를 숫자로 알 수 있다.
ex. 200 : 정상작동 / 404 Not Found:서버는 요청받은 리소스를 찾을 수 없습니다./400 Bad Request:잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음을 의미 etc
Type : html이나 js등 파일형식을 알 수 있다.
타입 형식 중 XHR = API이며,
API 란 프로그램들이 서로 상호작용하는 것을
도와주는 매개체이자 접근성을 허용할지 말지 확인하는 것이다.Initiator : 시작지점을 의미하며,클릭하면 요청을 발생시킨 소스코드로 이동합니다. 예시)Other =>root라고 볼수 있으며, 암묵적으로 root(/)는 index로 변환된다.
Size : 파일의 사이즈를 알 수 있다.
Time : 웹페이지의 request로 부터 server의 response를 받기까지의 시간
Waterfall : 타임라인의 디테일한 정보를 알 수 있다.
✅ Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
network 클릭 -> fetch/xhr-> categories 클릭
header에는 자세한 정보가 표시되어 있다.
preview에서는 categories에 저장된 data를 볼 수 있다.
header의 url으로도 data를 볼 수있으나, preview로 보는 것이 더 보기 편한것을 알 수 있다.
✅ Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기
network 클릭 ->영상을 찾기위해 media 클릭 -> mp4 영상 ->header에서 url을 찾을 수 있다.
url을 복사해서 새탭에 보여질수 도 있으나, 위에 mp4영상을 더블클릭하면 더 쉽게 볼 수 있다.
