개발자도구

bmoyeon·2020년 8월 6일
0

웹 개발 기초

목록 보기
2/6
post-thumbnail

💡 개발자도구 단축키 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을 적절히 이용해 원하는 데이터만을 가져와 효율적으로 이용한다.

profile
꾸준히 나아가자!

0개의 댓글