개발자도구의 주요한 특징들을 정리해 보았다.

로컬스토리지, 세션스토리지, 쿠키

쿠키의 단점을 보완해서 HTML5에서 웹스토리지라는 기술이 탄생했다. 웹스토리지는 로컬 스토리지와 세션 스토리지를 말하며 key와 value 형태로 (마치 객체...?) 이루어져있다. 웹스토리지와 쿠키의 특징들은 다음과 같다.

• 웹스토리지는 로컬에만 정보를 저장하고 쿠키는 서버와 로컬에 정보를 저장한다.
• 로컬스토리지는 직접 삭제하지는 않는 이상 클라이언트에 대한 정보를 영구적으로 저장하고 세션트소리지는 세션 종료 시 (브라우저를 닫을 경우에) 클라이언트에 대한 정보를 삭제한다.
• 웹스토리지는 서버에 불필요하게 데이터를 저장하지 않고 용량이 크다는 장점이 있지만 HTML5를 지원하지 않는 브라우저의 경우 사용이 불가하다는 단점이 있다.
• 쿠키는 만료기한이 있는 key/value 형태의 저장소이며 대부분의 브라우저가 지원하지만 매 HTTP 요청마다 포함되어 api호출로 서버에 부담이가고 용량이 4kb로 적으며 암호화가 불가능하여 사용자 정보의 도난 위험이 있다.

각 저장소의 특징을 살려 각 저장소에 저장하면 좋을 유형의 데이터들을 간략하게 생각해보면 자동 로그인과 같은 정보는 브라우저를 새로 열때도 계속 쓸 수 있게 로컬 스토리지에 저장되고 입력 폼 정보라던지 10분 후 자동로그아웃 되는 은행 사이트들은 세션 스토리지에 저장하며 팝업창에서 오늘 하루보지 않기와 같은 정보는 쿠키에 저장하는 것이 좋을 것이다.

웹스토리지와 쿠키에 접근해서 값을 가져오는 방법은 다음과 같다.
localStorage.getItem("A")
sessionStorage.getitem("A")
getCookie("A")

웹스토리지와 쿠키에 새로운 정보를 세팅하는 법은 다음과 같다.
localStorage.setItem("A",1)
sessionStorage.setItem("A",1)
setCookie("A",1,7) --> 만료기한 : 7일

 

CSS

개발자도구의 CSS 부분에서의 순서는 엘리먼트 요소의 스타일이 먼저오고 그 다음 부모 요소의 스타일이 나온다. user agent stylesheet이란 브라우저가 자동으로 정한 스타일을 의미하고 :hov를 클릭하면 강제로 hover한 것처럼 effect를 볼 수 있다. +를 클릭하면 새로운 스타일을 생성할 수 있으며 filter에서 웬만한것들을 다 찾아 볼 수 있다.

 

JS/ console

자바스크립트 파일을 브라우저에 띄워서 3초에 한번씩 리로드되게 하는 방법은 setTimeout과 location.reload가 있다. 콘솔 세팅에서 preserve log를 체크하면 리로드해도 콘솔이 지워지지 않는다.
콘솔에서 현재 시간을 보는 방법은 today = new Date()이다. today.toLocaleTimeString();
console.log는 콘솔에서 그대로 보여지게, console.err는 에러처럼 빨간색으로 보이게, console.warn은 경고처럼 노란색으로, console.dir는 해당 객체의 모든 값들을 전부 보여준다.

다른 Browser에서의 개발자 도구

브라우저마다 개발자 도구의 양상이 조금씩, 혹은 많이 다른데 크롬 이외에 가장 많이 쓰는 Internet explorer와 사파리를 기준으로 설명해보겠다.
IE에서 브라우저의 버전을 낮춰서 보는 법은 개발자 도구의 emulation 탭에서 문서모드를 변경하면 된다.
맥과 아이폰을 연결하여 맥의 사파리에서 아이폰 사파리의 개발자도구를 탐색하는 법은 아이폰을 맥에 연결한 후 맥에서 아이폰의 설정에서 사파리 설정을 웹 사용으로 체크하면 데스크톱의 사파리에서 페어링 되어있음을 볼 수 있다.
크롬의 application tab에서는 웹스토리지와 쿠키를 볼 수 있는데 IE에서는 쿠키는 네트워크 탭에서 찾아 볼 수 있지만 웹스토리지는 콘솔에서 직접 불러와야하며 사파리는 리소스 탭에서 찾아볼 수 있다.
사파리에서 반응형 웹을 보는 방법은 개발자탭에서 응답형을 클릭하면 모바일과 태블릿의 viewport로 웹을 볼 수 있다.