크롬 개발자 도구에는 수많은 기능들이 있습니다.

• HTML, CSS 확인 및 설정
• 콘솔 기능
• 웹페이지 디버깅
• 성능 분석
• 네트워크
• 로컬 스토리지

'명령어 실행'으로 원하는 기능 찾기

케밥 버튼 눌러 '명령어 실행' 기능을 사용하면 위 이미지와 같이 뜹니다.
여기서 원하는 기능을 찾을 수 있고, 카테고리별로 확인할 수 있어서 편리합니다.

눈금자 표시하기

위 이미지에서 좌측 상단에 맨 왼쪽 아이콘에 있는 기능 이름이 '눈금자 표시하기'였습니다.
마우스 커서를 올리면 요소에 대한 정보가 뜹니다.
(html 태그, css, 클래스명, 크기, name, role ... 등)

Tip : 개발자도구에서 Cmd + shift + P 를 누르고 눈금자 기능 사용

요소 탭

요소 탭 내 스타일 탭에서는 특정 html 태그를 해당 태그에 대한 CSS 전부가 뜹니다.
그리고 CSS Cascading 규칙에 의해 CSS 우선순위에 따라 위에서부터 아래로 CSS 코드들이 쭉 나옵니다.

CSS (Cascading Style Sheet)

이름 내에 있는 Cascading이란 폭포처럼 위에서 아래로 쏟아지는이라는 뜻을 가진 단어이고, Cascading은 CSS에서 가장 중요한 스타일 적용 규칙을 의미합니다.

Cascading은 다음과 같은 두 가지의 원칙을 통해 어떤 요소에 스타일을 적용할지 결정합니다.

• 스타일 우선순위 (중요도, 명시도, 코드 순서)
• 스타일 상속 (부모 요소, 자식 요소)

우선순위에서 알아야 하는 내용 => !important (중요도), 선택자 (인라인, id, class, 태그) (명시도)

요소 탭 내 계산됨 탭

'계산됨' 탭에서는 최종적으로 결정된 CSS들만 모아둔 탭이라고 생각하면 됩니다.

여기서 우측에 그룹 탭이 있는데, 이것을 누르면 CSS를 그룹별로 확인할 수 있다.
이게 훨씬 가독성이 좋아 강추!

• layout
• text
• appearence
• others

HTML 태그

키보드로 HTML 태그 선택하기

이 기능 짱 편해요
태그가 많고 정보가 너무 많아서 가끔 정신없는 사이트가 있습니다. 그럴 때 일일이 클릭하면서 요소를 찾지 말고, 키보드로 HTML 태그를 찾아보세요!
노드 펼침, 노드 닫힘이 개인적으로 진짜 편했어요.

HTML 태그 빠르게 찾기

Cmd + F를 누르면 아래와 같은 검색바가 생깁니다.

여기서 원하는 태그의 태그명, 내용, 속성명 등을 입력하면 됩니다.
li 태그만 모아서 보면 아래 이미지와 같습니다.
여기서 Enter 키를 누르며 자유롭게 찾아다니면 됩니다.

HTML 수정하기

• 요소 내용 수정
• 속성 추가 및 수정
• 요소 삭제
• 요소 숨기기
• 가상 클래스 실행 (hover, active, focus ... 등)
• 중단 위치 설정 (디버깅)
• 스크린샷 캡쳐
  

CSS 태그

스타일이 의도한대로 보여지지 않을 때 사용하면 됩니다.

스타일 설정하기

원하는 CSS 내용을 추가 및 수정할 수 있습니다.

텍스트 명도 대비 (+ 색상 선택 도구)

웹 접근성을 높이기 위해서 텍스트 명도 대비를 설정할 줄 알아야 한다.

텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 : 1 이상이어야 한다.

24px 혹은 굵은 글씨의 경우에는 3 : 1 이상이어야 한다.

이미지 내부 텍스트 콘텐츠와 배경 간의 명도 대비가 4.5 대 1 이상이면 접근성 점수를 높일 수 있습니다.

추천 색상 기능도 있어서 적용하면 접근성을 높일 수 있는데, 실제로 적용해보니 디자인적으로 구린 경우도 있어서 잘 사용할지는 모르겠습니다.

박스 모델

계산됨 탭에서 박스 모델을 확인할 수 있고, 여기서 바로 값을 수정할 수도 있습니다.

구체적으로 position (상하좌우), margin, padding, border, content 크기 등을 바꿀 수 있습니다.

자바스크립트 비활성화

환경설정에서 '자바스크립트 사용 중지'를 선택하면 됩니다.

중지되면 소스 탭에 경고 아이콘 뜨면 성공한 겁니다.

더 편하게는 명령어로 실행하기 기능 사용하면 됩니다.

화면 캡쳐하기

원본 크기 스크린샷 캡쳐를 누르면 웹사이트 전체를 캡쳐할 수도 있습니다.
그리고 필요에 따라 다른 스크린샷 기능을 사용하면 됩니다.

디바이스 모드

반응형 웹사이트를 확인할 때 사용합니다.
원하는 기기를 선택하거나 크기를 조절할 수 있습니다.

회전 모드

추가로 회전하기 아이콘을 누르면 가로모드, 세로모드를 확인할 수 있습니다.

듀얼 모드

Surface Duo 기기에서 듀얼모드 아이콘을 눌러 확인할 수 있습니다.

미디어 쿼리 기능

이 기능을 사용하면 해당 웹사이트의 미디어 쿼리를 확인할 수 있고, 각 구간마다 반응형 디자인을 확인할 수 있습니다.

콘솔 기능

콘솔을 REPL (read-eval-print-loop) 라고 불리기도 한다. 이는 저장 없이 단순한 상호작용 컴퓨터 환경을 말합니다.

다양한 메서드들

실시간 표현식

눈 아이콘을 누르면 실시간 표현식 기능을 사용할 수 있습니다.
여기서 자바스크립트 코드를 바로 적용할 수 있습니다.

테이블로 보여주기 - console.table()

객체를 뜯어볼 때 가독성이 편한 테이블 형태로 바꿔주니 좋은 메서드인 것 같습니다.

시간 재기 - console.time(), console.timeEnd()

시간 재기 시작할 때 console.time()를 사용하고, 시간 재는 구간을 마칠 때 console.timeEnd()를 사용합니다.

형식지정자 %c 사용하여 콘솔 꾸미기

콘솔 주의사항

• let, const를 재선언하여도 오류가 발생하지 않습니다.
• 같은 블록에서 재선언은 오류가 발생합니다.
• const로 선언한 변수를 let으로 선언하면 구문 에러가 뜹니다. (반대도 에러)

영상 속도 조절하기

해당 비디오 태그를 찾아 배속을 늘릴 수 있습니다.

// 즉시 실행 함수
document.querySelector('video').playbackRate = {재생속도};

// example
document.querySelector('video').playbackRate = 1.5;

유튜브에서 제공하지 않은 배속을 설정할 수 있습니다!! (10배속?!)

웹 스토리지

서버가 아닌 클라이언트 내에서 데이터를 저장할 수 있도록 지원하는 저장소를 의미합니다. 브라우저에 사용자 개인화가 가능합니다.

로컬 스토리지 🆚 세션 스토리지

로컬 스토리지

만료기간이 존재하지 않으며 페이지를 변경하거나 브라우저를 닫아도 반 영구적으로 유지되는 저장소를 의미합니다.

• 직접 로컬 스토리지를 초기화(clear)하거나 제거(removeItem)하지 않는다면 만료기간이 존재하지 않습니다.
• 페이지를 변경하거나 브라우저를 닫더라도 값은 유지됩니다
• 도메인이 다른 경우에는 로컬 스토리지 공유가 불가능합니다.

세션 스토리지

브라우저의 탭 안에 유효한 저장소이며, 브라우저를 닫는 경우 소멸이 되는 저장소이다.

• 브라우저 탭 안에서만 유효한 저장소입니다.
• 브라우저가 다른 경우 해당 저장소 값은 유효하지 않습니다.
• 같은 도메인이라도 세션이 다르면 접근이 불가능합니다.

사용 예시

• 쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때
  다시 보지 않음 쿠키 팝업창 , 로그인 자동 완성

• 로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때
  자동 로그인, 다크 모드

• 세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
  일회성 로그인, 입력 폼 저장, 장바구니

쿠키 자세히 알아보기
웹 스토리지 자세히 알아보기

네트워크 탭

네트워크에서 받아오는 리소스를 확인할 수 있습니다.
리소스를 카테고리 버튼을 통해 분류할 수 있습니다.

네트워크 속도 설정을 통해 느린 환경에서의 네트워크을 만들 수 있습니다.
'추가'를 통해 특정한 환경을 내가 만들 수도 있습니다.

Lighthouse

라이트하우스는 웹사이트의 품질을 높일 수 있도록 웹사이트를 분석해주는 도구입니다. (FCP, LCP, CLS, TBT에 대해 알아보기)

개선 가이드를 통해 더 나은 웹사이트를 만들 수 있습니다.

성능

해당 페이지를 들어가 새로고침 버튼을 누르면 아래와 같이 결과가 뜹니다.
요약을 통해서 다양한 수치를 확인할 수 있습니다.
이를 기록하고 성능 개선을 한 후에 기록하여 비교할 수 있습니다.

요약 차트

• 로드 중: HTML, CSS를 파싱한 시간
• 스크립트: JS 코드를 처리하는 시간
• 렌더링: 레이아웃이나 CSS 스타일을 개선하는 시간
• 페인팅: 이미지 파일 등의 미디어 파일을 처리하는 시간

상향식을 통해 일어난 순서대로 작업을 살펴볼 수 있습니다.
그리고 이벤트 로그를 통해 일어난 이벤트들을 살펴볼 수 있습니다.

위 이미지의 그래프를 살펴보면 위에서부터 CPU 차트, 네트워크 차트, 스크린샷 차트 등이 있습니다.

디버깅

소스 탭에서 자바스크립트 파일을 확인할 수 있습니다.

각 코드 실행문에서 일어나는 단계에서 세부 사항(호출스택, 값, 중단점 등)을 확인할 수 있습니다.
아래와 같이 단계를 조절하는 버튼들이 있습니다.

출처

아는 만큼 보이는 크롬 개발자 도구 - 제주코딩베이스캠프