크롬 F12 개발자도구 사용법 / 크롬 디버깅 및 소스 분석 방법

2022-06-22

크롬 개발자 도구 사용법

크롬 개발자 도구 실행 방법

F12 (단축키)
크롬 우측 상단 점 3개 > 도구 더보기 > 개발자 도구
크롬 브라우저 우클릭 > 검사

개발자 도구 위치 변경

F12 > 우측 상단 점 3개 > Dock side: 팝업창/좌측/하단/우측 중 선택

개발자 도구 언어 변경

F12 > 우측 상단 설정 아이콘 > Preferences 메뉴 > Language: English (US) - English (US) 또는 Korean - 한국어 선택 > 우측 상단 X 버튼으로 닫기 > 상단 Reload DevTools 버튼 클릭
또는
F12 > 우측 상단 점 3개 > Run Command > english (US) 또는 korean 입력 및 선택 > 상단 Reload DevTools 버튼 클릭

브라우저 캐시 삭제 방법

F12 > 좌측 상단 새로고침 아이콘 우클릭 > 캐시 비우기 및 강력 새로고침
소스가 수정되었는데 바로 반영이 안 되는 경우, 브라우저 캐시를 지우면 적용이 됩니다.

F12 눈금자 활성화 방법

F12 > 우측 상단 점 3개 > Run Command > Show rulers on hover 입력 및 선택 > HTML 요소에 마우스를 올리면 화면 가로, 세로 라인에 눈금자가 표시됩니다.
눈금자 비활성화 시에는 Do not show rulers on hover 입력 및 선택하면 됩니다.

Javascript 비활성화

F12 > 우측 상단 점 3개 > Run command > javascript 검색 > Disable JavaScript 선택
또는
F12 > 우측 상단 설정 아이콘 > Preferences 메뉴 > 우측 하단 Debugger : Disable JavScript 체크
Javascript 비활성화가 적용되면 Sources 탭 경고표시를 확인할 수 있습니다.
슬라이드 배너 등 움직이는 HTML 요소 분석 시, 잠시 화면을 멈출 수 있는 방법입니다.

Elements 탭 사용법

HTML 요소 검사 방법

F12 > Elements 탭 > HTML DOM 요소 마우스 호버 시 요소의 범위와 적용된 ID, CSS 등을 확인할 수 있습니다.
좌측 상단 화살표 아이콘 클릭 (Ctrl + Shift + C) > 화면 요소 마우스 호버 시에도 동일한 기능을 합니다.
화면 요소에서 마우스 우클릭 후 검사를 클릭하면 Elements 탭에서 해당 요소가 자동 포커스 됩니다.

HTML 요소 CSS 분석 방법

우측 Styles 탭 기능

Elements 탭 좌측에서 선택된 요소에 적용된 모든 CSS가 나타납니다.
CSS 우측 파일명을 클릭하면 해당 CSS가 작성된 위치로 이동하여 전체 코드를 확인할 수 있습니다.
파일명 부분에 user agent stylesheet라고 나오면, 브라우저에서 기본적으로 제공되는 스타일입니다.

Styles 탭 우측 상단 Show Computed Styles sidebar 아이콘을 클릭하면,
Styles 탭 우측에 Computed 패널이 함께 표시되어, 최종 적용된 CSS를 확인하기 편합니다.

우측 Computed 탭 기능
상단 Box Model 섹션에서 요소에 적용된 margin, border, padding, 요소 크기를 시각적으로 확인할 수 있습니다.
각 수치 더블클릭 시 원하는 값으로 변경할 수 있어 편리합니다.

하단에는 우선순위에 의해 최종적으로 해당 요소에 적용된 CSS 목록을 노출합니다.
우측 Group 체크박스 체크 시, CSS 속성들이 카테고리별로 정리되어 보기가 편해집니다.
각 CSS 속성 좌측 ▶ 화살표 선택 시 CSS 속성 값, 해당 CSS가 적용된 요소, CSS가 작성된 파일명을 확인할 수 있습니다.
각 CSS 속성 하위 목록은 우선순위 높은 순으로 정렬되기 때문에 1번째 값이 요소에 실제 적용된 CSS 값입니다.
CSS 속성 값 좌측 화살표를 클릭하면 Styles 탭에서 해당 CSS 규칙 위치로 자동 포커스 됩니다.

HTML 요소 위치로 화면 이동

HTML 요소 좌측 점 3개 > Scroll into view

HTML 요소 수정

Elements 탭에서 HTML 요소 수정 시 저장되지 않으며, 새로고침하면 날아갑니다.

HTML 요소 값 변경 HTML 요소에서 수정하고 싶은 부분 더블클릭 > 수정 > 엔터
또는
HTML 요소 우클릭 > Edit as HTML > 편집 후 포커스를 벗어나면 반영됩니다.
Ctrl + Z 단축키로 수정된 것을 취소할 수 있습니다.

HTML 요소 속성 추가
HTML 요소 우클릭 > add attribute > 속성명=”값” 입력 > 엔터

HTML 요소 위치 변경
HTML 요소 클릭 및 드래그 > 원하는 HTML 요소 위치로 이동

HTML 요소 숨기기
HTML 요소 클릭 > H visibility: hidden !important; CSS가 적용되어 화면에서 숨겨집니다.
다시 H를 누르면, 요소가 다시 보여집니다.

HTML 요소 CSS 수정

Elements 탭에서 HTML 요소 CSS 수정 시 저장되지 않으며, 새로고침하면 날아갑니다.

CSS 활성화/비활성화
HTML 요소 클릭 > 우측 Styles 탭 > 적용된 CSS 좌측 체크박스로 ON/OFF 가능

CSS 속성 값 수정
HTML 요소 클릭 > 우측 Styles 탭 > 적용된 CSS 속성 값 클릭 > 수정 > 엔터

CSS 규칙 추가
HTML 요소 클릭 > 우측 Styles 탭 상단 + 버튼 클릭 > 추가된 CSS 규칙 선택자명 수정 > CSS 속성 입력

CSS 속성 추가
HTML 요소 클릭 > 우측 Styles 탭 > 상단 element.style 규칙 클릭 > 인라인 CSS 작성
또는
HTML 요소 클릭 > 우측 Styles 탭 > 적용된 CSS 속성 우측 여백 클릭 > 속성명: 속성값 작성 > 엔터

CSS 복사
복사하고 싶은 CSS Selector 우클릭 후 Copy declaration, 붙여넣고 싶은 곳에 Ctrl + V하면 됩니다.
Selector, declaration 모두 복사하고 싶다면 Copy rule 하면 됩니다.

CSS 색상 선택 도구 열기

HTML 요소 클릭 > 우측 Styles 탭 > color 등 색상 관련 CSS 속성 값 왼쪽 네모 클릭 > 색상 선택 도구 활성화
색상 선택 도구에서 HTML 요소 CSS 색상 변경 가능합니다.
해당 요소가 Contrast ratio (명도 대비율) 4.5:1 이상으로 접근성 기준을 충족하는지도 확인 가능합니다.

화면 CSS 색상 추출
색상 선택 도구에서 좌측 스포이드 클릭 > HTML 요소 또는 컴퓨터 화면 내 요소 클릭 > #f7bc21 등 색상 헥스코드 추출 가능
헥스코드 우측 화살표 클릭하면, rgb 등 다른 색상 표기법으로도 변경할 수 있습니다.

가상 클래스 확인 및 적용

요소 상태 클래스 적용
HTML 요소 클릭 > 우측 Styles 탭 > 상단 Filter 우측 :hov 클릭 > 체크박스로 :active, :hover, :focus, :focus-within, :focus-visible, :target 등 요소 상태 클래스 적용 및 해제 가능

요소 클래스 추가
HTML 요소 클릭 > 우측 Styles 탭 > 상단 Filter 우측 :cls 클릭 > 요소에 적용할 클래스명 입력 > 엔터 > 체크박스로 클래스 적용 및 해제 가능

HTML 소스 검색

Ctrl + F > 검색어 입력

스크롤 화면 캡쳐

F12 > Elements 탭 > 우측 상단 점 3개 > Run command (Ctrl + Chift + P) > screenshot 검색 > Capture full size screenshot 선택 > 다운로드 폴더에 저장된 웹 페이지 전체화면 캡처 이미지 확인
크롬 F12 개발자 도구가 새 창 모드로 열려있어야 합니다.

Console 탭 사용법

콘솔에서 메시지를 출력하거나, javascript 코드를 실행할 수 있습니다.

콘솔 메시지 종류

console.log()	일반 메시지 출력
console.info()	정보 메시지 출력
console.debug()	디버그 메시지 출력 Console 탭 상단 우측 Default levels 클릭 > Verbose 선택 시 확인 가능
console.warn()	노란색 경고 메시지 출력
console.error()	빨간색 오류 메시지 출력
console.table(배열 또는 객체) console.table(배열 또는 객체, 컬럼명)	배열 또는 객체를 테이블 형태로 출력
console.time("레이블") Javascript 코드 실행 console.timeEnd("레이블")	타이머 실행 후 중지 시 소요시간 출력 레이블로 여러 타이머 구분 가능

Console 탭에 출력 가능한 메시지 종류입니다.

form에 저장된 값 출력

var formElement = document.querySelector('#FormID명');
var formData = new FormData(formElement);

for (var pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
}

특정 id Form 안에 저장된 모든 entries를 콘솔에 출력하는 스크립트입니다.
디버깅 모드로 브레이크 포인트에 멈추면, 해당 시점의 form 값들을 볼 수 있습니다.

실시간 표현식 생성

Console 탭 상단 좌측 눈 모양 아이콘 클릭 > Javascript 표현식 입력 > 엔터
입력한 표현식의 현재 값이 자동 갱신되어, Javascript 변수 값 등 확인이 가능합니다.

Sources 탭 사용법

정적 리소스 분석 및 수정

좌측 Page 목록에서 파일 선택 > 우측 코드 편집기에서 소스 확인 > 코드 수정 > Ctrl + S (저장)
해당 페이지에 적용된 HTML, CSS, Javascript, 이미지, 폰트 등 정적 리소스들을 볼 수 있습니다.

정적 리소스 전체 검색

Ctrl + Shift + F > 검색어 입력
검색된 소스 줄 선택 시 Sources 탭으로 이동하여 파일 전체 소스 확인 및 변경이 가능합니다.

검색된 파일 위치 찾기
상단 파일명 우클릭 > Reveal in sidebar

크롬 디버깅 방법

F12 > Sources 탭 > HTML 또는 Javascript 파일 선택 > 브레이크 포인트 생성 > 이벤트 발생
디버그포인트에서 멈추면, 변수에 마우스 올리거나 Console에서 변수명을 입력하여 현재 들어있는 값 확인이 가능합니다.

브레이크 포인트 생성 방법

코드 편집기에서 실행되지 않고 멈추길 원하는 코드 좌측 클릭
코드 편집기에서 실행되지 않고 멈추길 원하는 코드 위 debugger; 작성 > Ctrl + S (저장)
우측 Event Listener Breakpoints > Mouse > click 체크 (모든 마우스 클릭 이벤트 발생 시 일시중지)

크롬 디버깅 단축키

F8	코드 계속 실행, 다음 브레이크 포인트에서 멈춤
F10	함수 내부로 진입 없이, 다음 줄로 이동
F11	함수 내부로 진입
Shift + F11	현재 함수 실행을 마치고, 호출부 (상위 함수) 로 이동
Ctrl + F8	지정한 모든 브레이크 포인트 활성화/비활성화

Network 탭 사용법

네트워크 탭에서 웹 페이지 리소스가 예상대로 다운로드, 업로드 되는지 확인할 수 있습니다.
리소스 목록의 최상위 리소스는 일반적으로 HTML 문서이고 네트워크 활동이 시간순으로 기록됩니다.
리소스명, 응답코드 상태, 리소스 유형, 요청을 발생시킨 코드, 자원의 크기 및 시간을 확인할 수 있습니다.

폭포 열 활성화 방법
리소스 목록 우클릭 > Waterfall 선택
리소스 대기열 시간, 연결에 걸린 시간, 요청 전송 시간, 서버 응답 대기 시간, 콘텐츠 다운로드 시간 등을 볼 수 있습니다.

네트워크 요청 종류 필터링

All	모든 네트워크 요청 및 응답 확인
Fetch/XHR	비동기 API 서버 요청만 확인 예시 : XMLHttpRequest (XHR), Fetch API 요청 등
Doc	HTML 문서 요청만 확인 SPA는 페이지 초기 로드 시에만 확인 가능합니다. 페이지 이동 시에는 서버에서 HTML을 받지 않습니다. 예시 : index.html, about.html 등
CSS	CSS 파일 요청만 확인 예시 : main.css, style.css 등
JS	Javascript 파일 요청만 확인 예시 : app.js, jquery.js 등
Font	웹 폰트 요청만 확인 예시 : woff, ttf, eot 등
Img	이미지 파일 요청만 확인 예시 : jpg, png, gif, svg
Media	동영상, 오디오 파일 요청만 확인 예시 : mp4, mp3, wav 등
Manifest	웹 앱 매니패스트 요청만 확인 예시 : manifest.json 파일
Socket	웹소켓 통신만 확인
Wasm	WebAssembly 모듈 요청만 확인
Other	그 외 기타 파일만 확인 예시 : PDF 등

상단 우측 필터링 기능을 이용하면, 현재 확인하려는 파일 종류만 필터링해서 볼 수 있습니다.

네트워크 정적 리소스 정보 분석

Headers	해당 파일에 대한 HTTP 요청 정보, 요청 헤더, 응답 헤더 값을 확인할 수 있습니다.
Preview	이미지 등 리소스의 모습을 미리보기 할 수 있습니다.
Response	서버 응답 데이터 전체를 확인할 수 있습니다. HTML, Javascript 파일 내용을 볼 수 있어 유용합니다.
Initiator	해당 파일의 URL 요청 순서가 나옵니다.
Timing	서버 응답 대기 시간, 콘텐츠 다운로드 소요 시간 등을 확인할 수 있습니다.
Cookies	요청 쿠키, 응답 쿠키 키-값을 확인할 수 있습니다.

네트워크 요청 순서대로 정렬된 정적 리소스 파일 이름을 선택하면 볼 수 있는 정보입니다.

새로고침 시 브라우저 캐시 비활성화 설정

F12 > Network 탭 > 상단 Disable cache 체크 > 새로고침
캐시 비활성화 설정 후 새로고침 시, 신규 방문자 기준 네트워크 리소스 로딩 시간을 확인할 수 있습니다.
해당 설정은 F12 개발자도구가 열린 상태에서만 유효합니다.

느린 네트워크 환경 재현

F12 > Network 탭 > 상단 Disable cache 우측 No throtting 클릭 > 3G 등 네트워크 조절 프로필 선택 > 새로고침
모바일 사용자, 해외 사용자의 느린 네트워크 환경으로 조작하여 테스트 가능합니다.
Offline 네트워크 조절 프로필을 선택하면 네트워크가 끊긴 상황도 재현할 수 있습니다.

크롬 네트워크 조절 프로필 생성 방법
F12 > Network 탭 > 상단 Disable cache 우측 No throtting 클릭 > Add… 선택 > Add profile > 아래 항목들 참고하여 입력 > Add

Profile Name	커스텀 네트워크 조절 프로필 이름
Download (Mbps)	서버로부터 데이터 다운로드 받는 속도 제한
Upload (Mbps)	서버에 데이터 업로드 하는 속도 제한
Latency (ms)	요청-응답 간 지연 시간
Packet loss (%)	네트워크 전송 중 손실되는 패킷 비율 예) 10% : 패킷 10개 중 1개가 사라짐
Packet queue length (개수)	전송 지연 전 버퍼에 쌓을 수 있는 최대 패킷 수 너무 크면 응답 지연이 심해집니다.
Packet reordering (%)	패킷 순서가 뒤죽박죽 도착할 확률 스트리밍/실시간 통신에 영향이 큽니다. 예) 20% : 패킷 5개 중 1개가 순서가 바뀜

네트워크 요청 지연 시간, 패킷 손실율 등을 지정한 네트워크 조절 프로필을 생성할 수 있습니다.

새 창 팝업이 열릴 때 F12 열기 설정

F12 우측 상단 설정 아이콘 > Preferances 메뉴 > 우측 하단 Global > Auto-open DevTools for popups 체크
새 창으로 팝업이 열릴 때, F12 Network 탭이 열려서 어떤 URL 파라미터로 들어왔는지 분석할 수 있습니다.
부모 창에서 F12를 열고 있어야 팝업 창에도 F12가 자동으로 열립니다.

팝업 Request URL 확인 방법
Network 탭 > 첫 번째 네트워크 요청 클릭 > Headers 탭 > General > Request URL에서 현재 팝업이 열릴 때 들어온 URL 전체를 확인할 수 있습니다.
특히 Vue, React 팝업에서 URL을 라우팅 했을 경우, 초기 요청 URL 및 파라미터를 확인할 수 있어 디버깅 및 소스 분석에 유용합니다.

Performance 탭 사용법

웹 페이지 성능을 측정하고 병목 구간을 시각적으로 파악하여 최적화할 수 있습니다.
CPU 사용량, 네트워크 요청 및 리소스 로딩 타임라인, 메모리 사용량, Javascript 호출 스택 등을 제공합니다.
설치된 확장 프로그램들이 노이즈를 유발할 수 있으므로, 시크릿 모드에서 측정하는 것이 좋습니다.

CPU 및 네트워크 성능 지연 설정
F12 > Performance 탭 > 우측 설정 아이콘 > CPU: 4x slowdown, Network: 3G 등 선택
성능 측정 시, 실제 테스트하는 PC보다 느린 CPU 및 네트워크 환경을 시뮬레이션 할 수 있습니다.

웹 페이지 로딩 속도 성능 측정

F12 > Performance 탭 > 좌측 상단 새로고침 아이콘 클릭

상호작용 및 애니메이션 성능 측정

F12 > Performance 탭 > 좌측 상단 녹화 아이콘 클릭 > 사용자 동작 수행 > Stop
클릭, 스크롤, 애니메이션 등 인터랙션 구간의 프레임 드롭, 렌더링 병목을 파악할 수 있습니다.

Application 탭 사용법

브라우저에 저장된 데이터 확인 방법

F12 > Application 탭 > 좌측 Storage 메뉴 > 스토리지 선택 > 데이터가 저장된 도메인 선택 > 우측 영역에서 키-값 데이터 확인 및 수정 가능

브라우저 스토리지 종류

Local Storage	로컬스토리지는 같은 브라우저 전체에서 공용으로 사용할 수 있습니다. 브라우저를 종료해도 남아있고, 직접 삭제하기 전까지 유지됩니다. 주로 영구적인 데이터 저장에 사용됩니다.
Session Storage	다른 탭은 다른 세션으로 정의하여 세션스토리지 데이터가 공유되지 않습니다. 새로고침 해도 남아있고, 브라우저 탭을 종료하면 삭제됩니다. 임시 데이터를 저장하는 데 유용합니다.
Cookies	쿠키는 4KB 저장 가능하여, 최대 5MB 저장할 수 있는 로컬스토리지보다 용량이 적습니다. 브라우저가 종료되면 사라지는 session 쿠키, 만료일까지 저장되는 Persistent 쿠키가 있습니다. Console 탭에서 document.cookie 입력 시에도 쿠키에 저장된 키-값들 확인 가능합니다. 톰캣 컨테이너에서 세션을 유지하기 위해 발급하는 JSESSIONID도 요청 쿠키에 저장됩니다.

좌측 Storage 메뉴에서 각 스토리지를 선택하면 저장된 값 확인이 가능합니다.

웹 스토리지란?
쿠키보다 큰 문자열을 클라이언트에 저장할 수 있는 저장소이며, 서버가 아닌 Javascript에서만 값을 조작할 수 있습니다.
웹 스토리지에는 Local Storage, Session Storage가 있습니다.

Lighthouse 탭 사용법

웹 페이지 성능 검사

F12 > Lighthouse 탭 > Mode, Device, Categories 선택 > Analyze page load
현재 웹 페이지의 로딩 성능, 사용자 접근성, 최신 웹 표준 준수 여부, 검색엔진 최적화 등을 분석합니다.
분석에 참고한 문서, 문제가 발생한 항목에 대한 설명, 개선 방법 등을 제공받을 수 있습니다.

웹 성능 검사 결과 PDF 저장 방법
검사 결과 페이지 우측 점 3개 > Print Expanded > 대상 : PDF로 저장 > 저장

모바일 디바이스 모드

F12 > 좌측 상단 Toggle device toolbar 버튼 (Ctrl + Shift + M)

디바이스 모드 화면 사이즈 변경 방법

상단 가로x세로 사이즈 입력
우측 및 하단 사이즈 변경 바 드래그
상단 좌측 기기명 선택 > Edit > Custom devices 추가 또는 원하는 기기명 체크
상단 우측 회전 버튼 선택 (세로모드/가로모드 전환)
상단 가로x세로 사이즈 입력 바 하단 기준점 클릭 (모바일/태블릿/노트북 사이즈 전환)