웹 개발자도구 활용하기

본 포스트는 크롬 브라우저를 기반으로 작성되었습니다!

개발자 도구

개발자 도구는 브라우저에서 제공하는 기본적인 도구입니다.

크롬을 열고 원하는 웹 페이지에 접속하신 후 우클릭 - 검사를 누르면 개발자 도구를 열 수 있습니다.

(맥 cmd + opt + i 윈도우 ctrl + shift + i)

개발자도구에는 여러개의 panel들이 있는데요, 이 중 가장 자주 사용되는 panel들에 대해서 알아보도록 합시다!

Element panel

Element panel에서는 웹 페이지를 구성하는 DOM, CSS 들을 알 수 있고 직접 그 값을 수정해볼 수도 있습니다.

element 패널의 모습

<img src=”https://i.ibb.co/2PqmfNX/2020-10-27-4-50-09.png style=“zoom: 33%;“zoom” />

패널 좌측 상단의 셀렉터를 클릭하여 원하는 element의 속성을 골라서 확인할 수도 있습니다.

마우스 호버만 해도 해당 element에 대한 간략한 정보가 나타납니다.

우측에서는 우선순위에 따르게 적용된 스타일 속성들이 보여집니다. 우선순위는 위에서 아래 순입니다!

그중 user agent stylesheet는 브라우저에서 해당 태그마다 지정해둔 디폴트 스타일입니다.

이게 싫은 분들은 이런 디폴트 스타일들을 싹 무효화하는 css를 만들어 사용하신다고 합니다~

Computed 탭에서 해당 element에 대한 자세한 크기(?)값이나 스타일 속성들을 알 수 있습니다.

Event listeners탭에서는 현재 적용된 이벤트리스너들을 볼 수 있습니다.

Console panel

콘솔 패널에서는 자바스크립트 코드를 직접 실행해 볼 수 있습니다.

콘솔 패널은 console.log를 활용한 디버깅에 주로 사용됩니다.

Network panel

네트워크 패널에서는 현재 페이지에서 일어나는 모든 http네트워크들의 목록을 확인할 수 있습니다.

필터 기능을 활용해서 api호출, 페이지에 사용된 이미지, 영상 등을 확인해 볼 수도 있습니다.

Application panel

application panel은 해당 웹에 대한 저장소입니다.

Local storage, session storage, cookie에 대한 정보를 확인할 수 있습니다.

• Local storage

local storage의 데이터는 key-value 쌍의 형태로 저장되며 사용자가 지우지 않는 이상 계속 브라우저에 남아있습니다.

해당 도메인에 영구적으로 저장하고 싶은 것들은 localStorage에 저장하면 좋겠네요!

• session storage

session storage의 데이터도 key-value 쌍의 형태로 저장되지만 이 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거됩니다.

보안적인 문제로 인해 해당 도메인의 한 세션에서만 저장하고 싶을때는 session storage를 사용해 주는 것이 좋겠습니다~

• cookie

Cookie 쿠키 제거의 그 쿠키입니다! 만료 기한이 있는 key-value 쌍의 데이터입니다. 해당 도메인에 날짜를 설정하고 그 날짜ㄷ까지만 저장하고 싶다면 cookie를 이용해주는 것이 좋겠네요!