- Element 패널
: 웹 페이지 구성, 구성 요소들의 스타일 확인- Console
: 자바스크립트 코드를 브라우저에서 즉시 실행 가능- Network
: 네트워크 상으로 주고 받는 데이터 확인- Application
: 브라우저의 저장소에 담긴 데이터 확인
<important>
를 적용하면 이를 무시하고 가장 우선 적용됨reset.css
, normalize.css
로 초기화 할 수 있음Console Open
- Windows / Linux: Ctrl+Shift+J
- Mac: Cmd+Opt+J
- 개발자 도구가 열린 상태: ESC
: 다른 패널에서 console 확인하고 싶을 때!
Console Clear
- clear() 입력 혹은 Ctrl + L, Command + K
Log & Script
- Log
: Application의 상태 관찰할 수 있도록 Application이 제공하는 정보- Script 언어를 사용해 볼 수 있다.
Network
패널의 기능은?Network
패널의 여러 가지 탭의 종류와 기능 살펴보기
Application
패널의 기능은?Local Storage
, Session Storage
, Cookie
차이점은?local
: 보안, 개인정보 관련 객체는 저장하면 안됨
: 데이터의 영구성 보장 (사용자가 지우지 않는 이상 브라우저에 남아있음)
: key-value 객체 형태로 저장
Session
: 개인정보, 잠시 저장되어야 할 정보 저장
Cookie
:
Local Storage
, Session Storage
, Cookie
사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?Local Storage
에 특정 데이터를 저장하고 가져오는 방법