개발자도구
개발자도구는 브라우저에 내장된 웹 개발자 도구 모음이다.
(예 : Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구. etc)
특징
-
웹 사이트를 즉각적으로 수정할 수 있다.
-
문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와 준다.
- 특히 프론트엔드 개발자는 개발자 도구를 항시 활용 하며 업무를 진행한다.
자주 사용되는 패널
Elements 패널
웹 페이지 구성과 구성 요소들의 스타일을 확인할 수 있다.
페이지의 구성요소 확인 가능.
웹페이지 구성 확인 수정 가능.
크롤링 시 활용 가능.
styles우선순위 확인 가능.(인라인-아이디-클래스-태그선택자)
쉽게 쉽게 스타일 순서도 바꿀 수 있음.
Console 패널
자바스크립트 코드를 브라우저에서 즉시 실행할 수 있다.
Network 패널
네트워크 상으로 주고 받는 데이터를 확인할 수 있다.
Application 패널
브라우저의 저장소에 담긴 데이터를 확인할 수 있다.
예 : 쿠키 (팝업창)
그 중
Network 패널
- Network 패널의 기능은?
웹브라우저가 서버에 요청하는 데이터 흐름을 확인 할 수 있는 패널이다.
- Network 패널의 여러 가지 탭의 종류와 기능
상태
200 : 정상
304 : 이미 전송된 파일
-> 다시 전송받을 필요가 없다는 뜻.
유형
데이터 유형 확인가능
크기
데이터 크기 확인가능
시간
클라이언트 - 서버 응답하는 시간 확인가능
폭포
데이터 로드 순서 확인 가능.
->어떤 데이터에서 병목현상 (로드시간이 오래걸리는지) 확인가능.
네트워크 패널의 하단 탭을 통해 아래 내용을 확인 할 수 있다.
전체 요청의 개수
전송된 용량
리소스의 용량
리소스 로드에 걸린 시간
헤더를 통해서 클라이언트랑 헤더가 주고받은 요청-응답내용을 자세히 확인가능
FETCH/XHR 중요!!
API요청 확인가능하다!
API란
데이터베이스와 프론트엔드 사이를 연결해주는 매개체이다.
유저 에이전트 시트란
각 브라우저마다 정해둔 기본적인 스타일형식이다.
