TIL : Chrome 개발자 도구(DevTools)

오늘은 프론트엔드 개발자라면 필연적으로 친해져야 한다는 개발자 도구(DevTools)에 대해 공부했다.그전까지 이름은 몰랐지만, html과 css를 공부할 때 이미 몇 번 확인해본 적 있는 툴이었다. 개발자 도구는 맥북 기준으로 크롬에서 command + option + i 를 누르면 나타난다.

먼저, 개발자 도구를 왜 사용하는 걸까?

답은 간단하다. 유용하니까. 개발자 도구는 웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와준다. 개발자 도구로 할 수 있는 일이 정말 많다. 멋진 웹사이트를 발견했을 때 그 웹사이트가 어떤 코드로 작성되었는지 구경해볼 수도 있고, 이미지를 얻을 수도 있으며 디버깅을 할 때 최고의 효율을 보여준다.

개발자 도구는 여러 탭으로 구성되어 있는데, 그 중에서 자주 쓰는 4가지의 패널만 살펴보도록 하겠다.

1. Elements panel

Elements panel은 말 그대로 구성요소를 보여준다. 이 웹페이지가 어떤 구성으로 되어 있는지 보여준다. CSS를 어떤 식으로 이용해 꾸몄는지도 알 수 있다.

Elements panel에서 할 수 있는 일은 다음과 같다.

-페이지 검사 및 조정
-스타일 수정
-DOM 수정
-애니메이션 검사

그중에 CSS 스타일을 수정하는 방법은 Styles 창을 사용하는 것이다. Styles창에는 선택한 요소에 적용된 CSS 규칙이 우선순위가 가장 높은 것부터 가장 낮은 순서로 표시된다.

• cf) CSS Specificity - inline style > id > class > tag

Elements panel에서 봐야 할 또 하나 중요한 개념은 'user agent styleshhet'이다.

user agent stylesheet 란?

• 브라우저의 기본 스타일 값을 의미한다. 브라우저 마다 스타일 기본값이 다르다.
• Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서 reset.css 혹은 normalize.css 파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작하는 것이 좋다 >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능하다.

구글링 해보면 다양한 css reset 양식을 볼 수 있다.

2. Console panel

자바 스크립트를 쓸 때 항상 쓰는 console.log의 개념을 생각하면 된다. console panel에서는 자바 스크립트 코드를 즉시 실행할 수 있어서 디버깅을 하는 데에 무척 유용하다.뿐만 아니라 백엔드에서 보내주는 response(ex. 에러 메세지, status 코드)도 console.log를 활용해 확인이 가능하다.

페이지를 새로고침해도 콘솔 내용이 사라지지 않게 하려면 어떻게 해야할까?

개발자 도구 창에서 톱니바퀴 모양(설정)을 누르고 preserve log upon navigation를 체크하면 console 내용이 보존된다. 참고로 이 박스가 체크된 상태로는 clear(); 코드가 작동하지 않는다.

콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?

방금 전에 말했던 clear(); 를 사용하면 된다. 그리고 단축키 command + k를 눌러도 된다. (윈도우와 리눅스의 경우 control + L )

참고로 preserve log인 상태에서 clear();를 주니 작동하지 않았는데 command +k 를 누르니 정상적으로 작동했다. 둘이 뭐가 달라서 이러는 지는 솔직히 아직 모르겠다.

콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?

Default levels를 눌러보면 선택할 수 있습니다 짜잔~

ESC로 서랍 열기

개발자 도구에 커서를 가져다댄 채로 ESC 버튼을 누르면 다른 패널에서 console panel을 같이 볼 수 있다. (그러나 콘솔패널을 누르면 서랍은 자동으로 닫힘)

3. Network panel

Network panel의 기능은 말하자면 프론트엔드 개발자와 백엔드 개발자의 소통을 돕는 것이다.http 네트워크 통신을 확인할 수 있고, API 크롤링, 페이지 로딩 성능 테스트를 할 수 있다. 또한 웹사이트에 있는 이미지, 영상 등의 소스도 얻을 수 있다. (mock data 활용)

처음에 네트워크 패널을 열면, 아래 사진처럼 아무 것도 보이지 않을 것이다.

그러나 새로고침만 한 번 누르면

이렇게 많은 것들이 등장한다. 나중에 클론코딩을 해볼 때 이 네트워크 패널의 기능을 이용해 이미지나 영상들의 소스를 얻을 수 있으니 꼭 기억해둘 것.

4. Application panel

Application panel의 기능은 한 마디로 '저장소'다. Local Storage, Session Storage, Cookie 세 가지로 나누어져있다.

• Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.

• Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.(주의:페이지를 새로고침하는 것은 탭을 닫는 것으로 간주하지 않아서 정보가 날아가지 않는다.) Key-Value 페어의 객체 형태로 데이터를 저장한다. 탭을 닫을 경우 정보가 제거되기 때문에 민감한 정보는 보통 세션 스토리지에 저장된다. 일정 시간 이상 이용하지 않으면 로그아웃되는 은행 사이트나, 비회원의 장바구니 등이 세션 스토리지로 저장되는 데이터의 대표적인 예다.

• Cookie : 만료 기한이 있는 저장소. 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 쿠키는 보안이 취약하고 데이터가 낭비되는 등의 이유가 있어서 오늘날 그렇게 많이 사용하지는 않는다. 일정 시간 동안만 나오는 이벤트 팝업창 등이 바로 쿠키다.

마지막으로,

Local Storage 에 특정 데이터를 저장하고 가져오는 방법

• 데이터 저장
  • localStorage.setItem("key", "value")
  • sessionStorage.setItem("key", "value")
  • setcookie("key", "value", "지속시간 (초단위)")
• 데이터 호출
  • localStorage.getItem("key")
  • sessionStorage.getItem("key")
  • document.cookie
• 기타 메소드
  • 외에도 removeItem, clear 등등의 공통 메소드 존재