개발자 도구는 브라우저에 제공하는 하나의 도구이다.
여러 브라우저가 있는데 각각의 브라우저마다 자기회사에서 만든 개발자 도구를 제공한다.
개발자 도구는 프론트엔드 개발을 하면서 코딩에 있어 도움이 될만한 여러가지 기능을 가지고있다.

1. Elements panel

기능

• 웹 페이지의 구성 (DOM)
• 구성요소의 스타일 속성 (CSS)
• CSS 수정, UI 수정 ...

HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널이다.
DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있습니다.
변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인 할 수 있습니다.

2. Console panel

기능

• 자바스크립트 코드 즉시 실행
• 디버깅

프론트엔드의 경우 실제로 디버깅 시 다른 도구를 사용하는 것보다 console.log 를 활용하는 경우가 대부분이다.
백엔드에서 보내주는 response(ex. 에러 메세지, status 코드)도 아래 예시와 같이 console.log를 활용해 확인 가능하다.

3. Network panel

기능

• http 네트워크 통신 확인
• API 크롤링, 페이지 로딩 성능 테스트
• 이미지, 영상 등의 소스 (mock data 활용)

4. Application panel

기능

• 브라우저 저장소
• Local storage, Session Storage, Cookie

Storage : 브라우저의 저장소

Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장된다.

Session Storage: 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장된다.

Cookie : 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없다. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장한다.