💡 개발자도구 단축키
option + cmd + i
<> Elements Tab
드래그해서 요소를 옮길 수 있다.
Elements Tab > Styles
우선순위가 높은 순으로 나열되며 css를 수정해 바로 확인해볼 수 있다. (실제로 바뀌는 것은 아님)
💡
user agent stylesheet해당 선택자의 웹브라우저 default css
> Console Tab
console.log / console.error / console.warn
console.log() 해당 값이 출력
console.error() 해당 값이 error 형태로 출력 🔴
console.warn() 해당 값이 warn 형태로 출력 🟡
💡 elements tab 에서 ESC 키를 누르면 console 창을 같이 볼 수 있다.
🛠 Sources Tab
좌측에 폴더 | 중앙은 에디터 | 우측은 디버깅 툴
Sources Tab > Page
top 폴더에서 해당 웹 페이지의 자료들을 볼 수 있다.
💡 디버깅 (Debugging)
컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을
찾아내고 그 원인을 밝히고 수정하는 작업 과정
🌐 Network Tab
어떻게 통신이 이뤄지는 지 확인할 수 있다.
XHR
HTTP 프로토콜을 통해서 이뤄지는 통신들을 볼 수 있는 곳.
해당 파일의 Request URL 을 통해 api를 가져올 수 있다.
📱 Application Tab
key - value 쌍으로 저장
브라우저의 3가지 저장소
local storage
반영구적. 지우지 않는 한 데이터가 남아있다.
클라이언트의 컴퓨터에 저장이 된다.
ex. 자동로그인, 최근 검색 기능
session storage
탭을 refresh하면 데이터가 남아있으나 브라우저를 닫으면 사라진다.
데이터가 서버로 전송되지 않는다. 👉 클라이언트 쪽에서만 읽을 수 있다.
ex. 비회원 장바구니
cookie
웹사이트에 접속할 때 웹 서버에 의해 사용자의 컴퓨터에 저장되는 정보를 뜻함
저장된 쿠키는 같은 웹 요청이 발생될 때마다 서버에 전송해 읽히고 새로운 정보로 바뀐다.
웹 사이트당 20개, 개당 4kb 초과 쿠키는 저장할 수 없고 만료일자가 존재한다.
ex. 쇼핑몰 장바구니, 로그인 상태 유지, 팝업의 '다시 열지 않기'
cookie가 웹 서버 요청시마다 서버로 전송되기 때문에 비효율적이다.
때문에 local과 session을 적절히 이용해 원하는 데이터만을 가져와 효율적으로 이용한다.
