브라우저마다 개발자의 개발을 돕기 위한 다양한 도구들 포함한 개발자 도구를 제공하고 있다. 각 브라우저마다 다른 형태의 개발자 도구를 가지고 있는데 이번 포스팅에서는 많은 개발자들이 많이 사용하고 있는 구글 크롬 브라우저의 개발자 도구를 위주로 소개하겠다. 맥에서는 option + command + i 로 윈도우에서는 f12 단축키로 이동 가능하다.

Elements panel

Elements 패널은 해당 웹 사이트의 html, css 파일을 간단하게 보여준다. 맨 왼쪽의 html, 중간과 맨 오른쪽은 적용된 css 파일을 보여준다. 그리고 맨 왼쪽 상단의 커서 모양의 버튼을 누르면 웹사이트 창의 요소를 클릭하여 선택 가능하다.

요소를 클릭 한 경우, Elements 창에서 해당 요소의 스타일 시트를 보여준다.

해당 요소에 어떤 스타일이 적용되었는지 알 수 있으며 체크 박스를 없애면 해당 속성 값을 해제 했을 때 어떤 결과가 나오는지 바로 브라우저에서 확인 가능하다 . 뿐만 아니라 속성 값도 직접 바꿔 확인 가능하다.
스타일 시트의 구성 요소는 위에서 부터 우선적으로 적용해야 할 아이디, 클래스, 태그, 전체(*) 등등으로 나열되어 있으며 우선 적용된 속성이 있다면 아래 속성 값은 적용된 것이 줄로 지워져 있다.

user agent stylesheet

user agent stylesheet는 개발자가 직접 개발한 부분은 아니지만 각 브라우저에서 기본 값으로 가진 것을 의미한다. 그래서 reset 파일을 활용해 기본 적용된 값들을 모두 없애고 개발을 진행하기도 한다.

Console panel

console 패널은 다른 IDE를 사용하지 않고도 js코드를 작성해보고 테스트 해볼 수 있다.

콘솔창을 비우기 위해서는 console.clear를 치면 모두 깨끗이 사라진다.

다른 패널들(Elements, Network 등)의 창 아래에서도 콘솔창을 사용할 수 있다.

설정 아이콘을 누르면 보여주고 싶은 콘솔 메시지를 선택할 수 있고, Preserve log를 체크하면 새로 고침을 하더라도 콘솔창이 새로 고침 되어 모든 값들이 사라지지 않는다.

Network panel

웹 페이지에서 실시간으로 호출하고 있는 정보들을 볼 수 있다. 호출된 파일의 정보 응답은 제대로 오고 갔는지 무슨 파일인지 등을 알 수 있다.

현재는 All에 체크 되어 있지만 JS, CSS, Img 등 호출된 여러 파일 타입에 따라 분류되어 확인 가능하다.

XHR 탭

XHR (XML Http Reuqest)은 프론트에서 API 호출 url이 포함되어 있다. Network 패널은 프론트에서 호출한 api의 응답 유무, 에러 등을 확인할 수 있어 프론트, 백의 협업 툴로 많이 사용된다.

Application panel

• Application 패널의 기능은?
• Local Storage, Session Storage, Cookie 차이점은?
• Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?
• Local Storage 에 특정 데이터를 저장하고 가져오는 방법
  Application panel은 브라우저에서 저장할 많은 데이터들의 집합소라고 볼 수 있다. 그 중에서도 정보의 특성에 따라 다른 저장소로 연결되는데 저장소는 크게 Local Storage, Session Storage, Cookies들로 나뉘어 진다.

Local Storage & Session Storage

local storage와 session storage는 Key와 Value가 한 쌍으로 저장되어 있으며 각 도메인과 각 웹 브라우저에 따라 따로 존재하는 저장소이다. 이 두 저장소는 데이터들의 영속성 즉 저장 기간에 따라 나뉘어 진다. local 저장소는 사용자가 따로 지우지 않는 이상 데이터가 그대로 남아 있어 데이터 영구성이 보장되는 저장소로 볼 수 있다. 그렇기에 영구적으로 저장되어도 상관 없는 자동 로그인 정보와 같은 정보들이 저장된다. 반면 session 저장소는 한 세션에 부여되는 저장소로 웹 브라우저를 종료하는 순간 사라진다. 그렇기에 local 저장소에 비해 중요도가 높고, 보안이 철저해야 하는 은행 로그인 정보와 같은 정보들이 저장된다.

Cookies

이름, 값, 파기 날짜, 경로가 저장되어 있는 데이터 저장소이다. 단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다. 5Mb 정도를 저장할 수 있는 웹 스토리지와 달리 쿠키는 4Kb 정도를 저장할 수 있다. 사용자의 웹 브라우저에 저장이 되며 사용자에 의해 정보를 삭제 저장하기에 용이하다. 동시에 보안성이 취약하여 중요한 정보를 저장하기에는 한계가 존재한다.