개발자 도구란?

개발자 도구는 크롬이나 익스플로러 등에서 제공해주는 것으로 개발자와 뗄래야 뗄 수 없는 존재이다. 개발자 도구를 통해 디버깅, html/css 구조 파악 등 많은 것들을 할 수 있다.

Elements

웹페이지의 html/css 구조가 보이는 곳이다.
구조가 보이기 때문에 웹페이지의 전체적인 틀과 레이아웃을 파악하기에 정말 용이하다.

위 사진에 표시된 버튼을 클릭하고 원하는 요소를 클릭하면 그 요소가 html의 어디에 위치하고 있는지, 어떻게 이루어진 것인지 간편하게 알 수 있다.

html 구조 뿐만 아니라 구성 요소의 스타일 속성, 즉 css를 확인할 수도 있다.
style 부분에 표시되는 순서는 위로 갈수록 우선 순위가 높다는 뜻이다. 취소선이 그어져 있는 것은 우선 순위의 스타일이 적용되어 이 스타일은 적용이 되지 않았다는 것을 의미한다.
이 곳에서 css를 수정하면 바로 반영이 되기 때문에 여기에서 수정을 해보고 괜찮다면 코드 파일에 옮겨넣는 것도 방법이다.

user agent stylesheet

브라우저가 기본적으로 가지고 있는 스타일의 기본값을 의미한다. 브라우저마다 각각 다른 스타일 기본값이 있기 때문에 css에서 초기화를 해주지 않으면 개발자의 의도와는 다른 결과물이 나올 수가 있다.

Console

콘솔 패널은 자바스크립트 코드를 입력하면 아래 콘솔에서 실행 결과를 브라우저에서 바로 알 수 있게 해주는 부분이다. 디버깅 시에도 유용하다.
프론트엔드의 경우 console.log(); 메소드를 사용해 디버깅을 하는 경우가 많다.
console.clear(); 메소드를 사용하면 콘솔의 내용을 지울 수 있고, 설정에서 preserved log를 체크해주면 새로고침을 해도 콘솔 내용이 남아있다.

Application

이 패널은 여러 정보가 저장되는 저장소 같은 공간이다.

local storage

local storage에 한 번 입력된 정보는 일부러 지우지 않는 이상 계속 남아있다.
key와 value 값의 객체 형태로 저장된다.

• 자동 로그인 등 계속 데이터가 남아있어야 하는 경우
• 검색 기록 등 ui 정보들

session storage

이곳에 입력된 정보는 창을 닫을 경우 바로 없어진다. 따라서 유출되면 안되는 중요한 정보들을 이곳에 담아두는 것이 적절하다. local storage와 마찬가지로 key/value의 객체 형태로 저장된다.

• 은행 사이트 등 보안이 중요한 정보
• 일시적으로만 필요한 정보

이때, session storage의 정보는 바로 사라지니까 비밀번호와 같은 정보를 여기에 저장하면 되겠다고 생각할 수 있는데, local storage와 session storage는 클라이언트 사이드이기 때문에 해킹당할 위험이 높기 때문에 비밀번호와 같은 정보들은 이곳에 저장해서는 안된다.

cookie

cookie는 정보가 언제 지워질지 기간을 설정할 수 있다. 쿠키는 프론트와 백의 통신과 관련이 있기 때문에 용량이 작다. 위의 두 저장소와 다르게 string 형태이다.

• 일시적인 이벤트 팝업

network

네트워크 패널에서는 현재 페이지와 서버와의 http 요청, api 송수신, 응답 리스트, 타임 라인 등을 확인할 수 있다.
이 페이지의 어디서 로딩되는데 많은 시간이 소요되는지 확인할 수 있다.

Xhr : 내 홈페이지에서 api를 서버에 송수신할때 어떤 api, 데이터가 주고받아지는지 확인 가능하다. 네트워크 탭에서 가장 많이 사용하는 탭 중 하나이다.

Status 상태가 200일때는 성공했다는 의미, 이미지 엑박일 때 뜨는 404나 인터넷 연결 엄청 느리거나 안돼서 페이지 로딩 안될때 뜨는 500 뜨는게 여기 상태
이 숫자를 보고 어떤 이유에서 실패했는지 알 수 있다. (실패 이유에 따라 뜨는 숫자가 다르다.)

백엔드랑 프론트랑 서로 서버에 정보를 전달할 때 성공 여부를 쉽게 볼 수 있어서 매우 중요한 패널이라고 할 수 있다.