개발자 도구

mac : alt + cmd + i

Elements panel

웹페이지의 구성(DOM)과 CSS를 확인할 수 있다. HTML코드를 분석하고 실시간으로 수정할 수 있는 패널이고, 실시간으로 레이아웃과 디자인을 변경할 수 있다.

Console panel

브라우저가 어떻게 동작하는지 조절하는 패널이다.
여기서 자바스크립트 코드를 즉시 실행할 수 있다. 브라우저 콘솔창에 로그를 찍는다.

백엔드의 경우 respnse(에러 메세지, status 코드)도 console.log를 활용해 확인 가능하다. 그렇기 때문에 백엔드에서는 상황을 알려주는 response 메세지와 적절한 status code를 전달하는 것이 중요하다.

Network panel

프로젝트할때 가장 중요하다 볼 수 있다.

• 웹사이트에서 통신하고 있는 모든 정보를 목록으로 보여준다.
• 리소스들이 예상대로 다운로드 되고 업데이트 되는지 확인할 때 사용한다.
• 웹페이지와 서버 사이에서 데이터 흐름을 분석하고, 문제 발생 시 해결책을 찾도록 개발자를 돕는 역할을 한다.

각 탭은 리소스가 무슨 타입인지를 알려준다. 예시로 Fetch/XHR는 API 정보를 확인할 수 있다.

Application panel

• Local Storage
  사용자가 지우지 않는 이상 계속 브라우저에 남아있고, 지속적으로 필요한 데이터를 저장한다.
  예) 자동로그인 기능, 비회원 장바구니 (나갔다가 들어왔는데 있다면)

• Session Storage
  브라우저 종료 전까지만 보존가능하다. ⇒ 탭 종료 전까지 남아있는다.
  잠깐 동안 필요한 정보를 저장한다.
  예) 비회원 장바구니 (나갔다가 들어왔는데 없다면)

• Cookie ⇒ 클라이언트에 저장되지만 서버에서도 리스폰스를 보낼 수 있다.
  저장 용량이 작습니다.
  시간 제한 설정이 가능하다. 프론트엔드와 백엔드 통신과 관련있고, 무조건 요청 보낼때마다 딸려서 간다. → 때문에 브라우저가 늦어지는 이유가 쿠키가 차서 그럴 수 있다.
  서비스가 직접적이지 않은 데이터에 사용한다.
  예) 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등
  팝업창 1일동안 보지않기 버튼을 누르면 안보겠다는 것을 저장, 만료기간 세팅 가능 ⇒ 1일짜리 쿠키를 만들어놓으면 된다.