TIL #14 - 개발자 도구(Chrome) 사용법

Elements

• DOM (웹 페이지 구성)과 CSS를 실시간으로 수정할 수 있는 도구 패널이다.

• 개발자 도구에서 쓰는건 저장되지 않으므로 확인하는 용도로만 사용해야한다.

• Styles은 우선순위가 높은 순서대로 나타난다.

• user agent stylesheet는 브라우저의 기본 스타일 값을 뜻한다.
  브라우저별로 다른 값을 초기화하고 CSS를 입히기 위해서는 reset.css나 nomalize.css와 같은 파일을 링크시킨다.

• 이미지 파일을 확인할 때 폴더명만 보일 경우 토글에 나타나는 링크+파일경로를 입력해야 확인할 수 있다.
  
  

Console

• 자바스크립트 코드를 실행할 수 있다.

• console 은 객체이다. 해당 객체는 log 메소드 포함 다양한 메소드가 존재한다.
  (참고 : https://developer.mozilla.org/ko/docs/Web/API/Console)

• console.log - 백엔드에서 보내주는 response를 확인하고 디버깅 한다. 백엔드에서는 상황을 명확히 알려줄 수 있는 메시지와 status를 전달해야한다.

• console에서 에러나 경고 메시지를 보여주는 것이 좋은 경험은 아니다. 가리고 싶을 경우 Filter를 이용해 가릴 수 있다.

• 창의 데이터를 지우고 싶을 때 clear(); 혹은 ctrl+l / cmd+k 를 이용한다.

• 패널을 꾸밀 수 있다.

• console.group(document); -> 그룹핑해서 볼 수 있음

• console.dir(document); -> element 속성을 볼 수 있음

• $_ ->

• table -> 테이블로 데이터를 볼 수 있음
  
  

Network

• 네트워킹되는 모든 것이 뜨는 패널이다.

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

• XHR (Xml(Extensible Markup Language) Http Request)

• preview와 response 차이는 없으나 response는 코드 있는 그대로 보이고 preview는 깔끔하게 보이도록 한 것이다.

• 미디어 파일은 링크로 올릴 경우 Elements 에서만 보이고 Network에 보이지 않는다.
  
  

Application

• 필요한 데이터를 저장하는 저장소

• IndexedDB와 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사한다.
  
  

  	Cookie	Local Storage	Session Storage
  Capacity	4kb	10mb	5mb
  Browsers	HTML4 / HTML5	HTML 5	HTML 5
  Accessible from	Any Window	Any Window	Same tab
  Expires	Manually set	Never	On tab close
  Storage Location	Browser & Server	Browser only	Browser only
  Sent with requests	O	X	X

• Local Storage

  • 해당 스토리지 데이터는 사용자가 지우지 않는 이상 계속 남는다. 지속적으로 필요하거나 UI 정보들을 저장한다. Key-Value 페어의 객체 형태로 데이터 저장.
  • ex) ID 저장, 비회원 카트

• Session Storage

  • 탭을 닫을 경우 제거되기 때문에 잠깐 필요하거나 보안이 중요한 데이터를 저장한다. Key-Value 페어의 객체 형태로 데이터 저장.
  • ex) 은행 사이트, 결제 정보, 특정 유저 정보, 언어 선택

• Cookie

  • 시간 제한 설정 가능. 쿠키는 서버까지 저장되기 때문에 프론트와 백엔드 통신에 관련이 있다. 이로 인해 용량이 4kb로 제한된다. Key-Value 페어의 문자열 형태로 데이터 저장.(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.
  • ex) 이벤트 팝업, 서비스 약관 동의 등

*비밀번호같이 중요한 정보는 스토리지에 저장되면 위험할 수 있어 서비스나 사이트의 특성에 따라 결정된다.

Local Storage 데이터 저장 및 호출 방법

• 데이터 저장

  • localStorage.setItem("key", "value")
  • sessionStorage.setItem("key", "value")
  • setcookie("key", "value", "지속시간 (초단위)")

• 데이터 호출

  • localStorage.getItem("key")
  • sessionStorage.getItem("key")
  • document.cookie

• 기타 메소드

  • 외에도 removeItem, clear 등등의 공통 메소드 존재