[TIL] 개발자 도구

Elements Pannel

• 웹 페이지의 구성(DOM), 스타일속성(CSS)을 분석하고 수정할 수 있는 패널
• CSS의 순서: 가장 세분화된(지엽적인) 속성부터 나열
• user agent stylesheet
  해당 브라우저에서 디폴트로 지정한 스타일
  브라우저에 지정된 속성값이 있고, 개별 페이지에서 해당 속성을 따로 지정하지 않았다면 적용됨
  모든 브라우저에서 동일하게 보이기를 원한다면 개발시작단계에서 reset.css 이용

Console Pannel

• 로그를 확인하고 스크립트 명령어를 입력하는 패널
  (로그는 일반적으로 '기록'을 의미함)
• 다른 탭을 띄워놓고 esc 누르면 콘솔 창이 같이 뜸
• enter를 칠 때마다 바로 실행되기 때문에 function 처럼 줄바꿈이 필요할 경우 shft+enter
• clear() or ctrl+L로 기록된 로그를 초기화할 수 있음

Sources Pannel

• 페이지의 리소스를 확인하고, 디버깅 작업을 할 수 있는 패널
• debugger 명령어로 중단점을 건 시작점의 변수를 체크할 수 있고, 값을 평가하거나 수정할 수 있음

Network Pannel

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

Application Pannel

• 브라우저의 데이터 저장소
• Local Storage: 저장된 데이터는 사용자가 지우지 않는 이상 계속 남아 있음
• Session Storage: 윈도우나 브라우저의 탭을 닫으면 제거됨
• Cookie: 기록을 저장할 시간을 설정 가능하고, 프론트-백엔드 통신과 연관되어 용량이 작을 수밖에 없음

Storage와 관련된 메서드

✔ 저장
localStorage.setItem('key', 'value')
sessionStorage.setItem('key', 'value')
setcookie('key', 'value', '지속시간(초단위)')

✔ 호출
localStorage.getItem("key")
sessionStorage.getItem("key")
document.cookie

✔ 제거
localStorage.remove('key')

✔ 전체 제거
localStorage.clear()