개발자 도구란?
개발자 도구란 브라우저에서 제공하는 도구(Tool)이다.
HTML, CSS, JavaScript와 같은 언어들은 서버로부터 컴파일 되어서 실행되는것이 아니라, 브라우저에서 실행되는 언어들이다.
따라서 개발자 도구를 이용하면 해당 언어들을 브라우저에서 문제 없이 실행되는지 보다 편리하게 확인이 가능하다.
chrome>Safari>Edge 순으로 많이 사용한다.
Network 패널과 그 기능은?
현재 사용중인 브라우저에서 발생하고 있는 모든 통신상태를 나타내는 곳이다.
네트워크 패널에는 서버 전체의 네트워크 활용도 통계가 표시되고,
통계는 각각 구성된 가상 네트워크 디바이스에 대해 포트별로 정렬한다.
http 네트워크 통신, 페이지, 로딩 성능 테스트, 이미지 영상 등의 소스 확인이 가능하다.
Network 패널의 여러가지 탭의 종류와 기능
상단 탭 (yellow Box)
ALL : 통신하는 모든 목록
JS : 페이지에서 사용하고 있는 JS 파일들. 해당 페이지에서 어떤 라이브러리를 사용했는지 대략 확인 가능.
Media : 보통 mp4 파일이 들어가며 별도 url을 호출하기도 함
Fetch/XHR : 브라우저-서버간 HTTP 통신할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로부터 요청에 따른 response결과를 확인할 때 사용
하단 탭 (blue Box)
Filmstrip : 타임라인 형태로 어떤 데이터가 어떤 순서로 로드됐는지 확인 가능
Name : 리소스의 이름과 url
Status : 작동여부를 숫자로 표시하여 오류를 확인할 수 있음 (페이지 하단 참고)
Type : 파일의 형식을 볼 수 있음
Initiator : 시작 지점
Size : 각 리소스들의 파일 사이즈
Time : 웹페이지(클라이언트)가 요청하고, 서버가 응답 하는것 까지의 걸린 시간
Waterfall : 타임라인의 세부 정보를 알려주는 곳
🤹 Mission 🤹
1. Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
- 개발자 도구 > network > Fetch / XHR 탭 클릭
- Name 탭에서 category-groups 클릭
- preview 클릭해서 json형식의 파일을 펼쳐보면 api호출을 통해 가져온 데이터를 확인할 수 있다.
https://api.kurly.com/collection/v2/home/sites/market/category-groups
2. Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기
- 개발자도구 > network > Media 탭 클릭
*하단 탭_Status
1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.
병아리 개발자입니다 🐥 틀린 정보가 있다면 말씀해주세요!