크롬 개발자 도구 ( Chrome DevTools ) 알아보기

이미지 최적화를 공부하기로 마음 먹었을 때, 처음에는 막막했다.

단순히 이미지의 용량을 줄이거나 포맷을 바꾸는 것 과 같은 테크닉이 먼저 떠올랐지만

막상 무엇이 느린지, 어디서 병목이 생기는지를 알아야 개선이 가능하다는 걸 깨달았다.

그래서 제일 먼저 이 현상을 관찰할 도구를 찾았다..!

 

그건 바로 개발자 도구였다.

그중에서 Performance 탭을 열면 브라우저가 실제로 어떻게 렌더링하는지, 어떤 리소스가 오래 걸리는지,

이미지가 언제 로드되는지를 눈으로 볼 수 있다.

 

결국 이미지 최적화의 첫 단계는 '이미지를 줄이는 기술' 이 아니라 현재 상태를 정확히 진단하는 능력인것 같다.

 

우선 개발자 도구란 무엇일까? 

크롬 공식 홈페이지에서 서술하고 있는 정의는 다음과 같다.

Chrome DevTools는 Chrome 브라우저에 직접 내장된 웹 개발자 도구 모음

 

공식홈페이지에서도 나와있듯 DevTools를 사용하면 페이지를 즉시 수정하고 문제를 빠르게 진단할 수 있어 궁극적으로 더 나은 웹사이트를 더 빠르게 빌드할수있다고 나와있다. 바로 내가 해결하려고 하는 문제점이 나와있다..!

 

DevTools 는 아래와 같이 구성되어 있다.

1. 요소 패널

HTML & CSS 구조 확인

 

해당 패널에서 우리는 DOM 을 찾아보고 CSS를 확인하며 수정할 수 있다.

 

화면 왼쪽에선 DOM 트리 (좌측 큰 영역) 를 확인할수 있다.

실제로 브라우저가 파싱한 HTML 구조를 트리 형태로 보여주며 렌더링된 결과물도 이 안에 들어 있다.

마우스로 특정 영역을 클릭하면 이 DOM 트리에서 해당 노드가 자동으로 하이라이트된다. 

 

오른쪽은 Styles 영역이다.

선택한 요소에 적용된 CSS 속성들이 나열된다.

 

• Filter 

위 사진에서 확인할 수 있듯 Filter를 통해 CSS 속성의 이름을 검색할 수 있다.

Filter에 padding 을 입력하면 여러 CSS 속성 중에 padding 값만 찾아볼 수 있다.

 

• :hov

Filter 옆에 :hov 라고 되어 있는건 Toggle Element State 이다.

내가 선택한 요소의 상태를 임의로 지정할수 있다.

이를 통해 hover, active, focus 와 같은 상태를 강제로 켜는 버튼이다.

예를 들어 버튼 hover 색상이 안바뀌어서 원인을 찾고 있다면 해당 버튼을 통해 원인을 파악할 수 있다.

 

 

• .cls

그 옆에 있는 .cls는 클래스 추가/ 제거 테스트를 할 수있는 버튼이다.

특정 클래스가 추가될 경우 스타일이 어떻게 바뀌는지 실시간으로 확인할 때 사용된다.

 

• +

" + " 버튼은 새로운 스타일 규칙을 추가할때 사용된다.

선택한 요소에 새로운 css 규칙을 직접 추가할 때 쓰인다.

지금 보고 있는 HTML 요소에 대해 직접 스타일을 추가해볼수 있다. 

 

• Computed ( 계산된 스타일 )
  • 선택된 요소에 적용된 최종 스타일을 확인할 수 있다. 필터와 마찬가지로 원하는 스타일만 추려서 확인가능하다.

2. 콘솔 패널

콘솔에서 메시지를 보고 JavaScript를 실행

콘솔을 통해 크게 3가지를 확인할 수 있다.

1. 입력 영역 

여기서 JS 코드를 직접 실행할 수 있으며 예를 들어 document.querySelector('h1') 입력하면,
현재 페이지의 첫 번째 <h1> 요소를 바로 가져와 보여준다. 

React 앱에서도 window 범위 내 변수나 함수라면 실시간으로 호출 가능하다. 

2. 출력 영역

console.log(), console.error(), console.warn() 같은 로그들이 여기로 표시된다.

실행 결과뿐 아니라, 코드 실행 시 발생한 오류 스택도 그대로 보여준다.

3. 필터링 영역

상단에 “Errors / Warnings / Info / Logs / Verbose” 필터가 있어 필요할 때 경고만, 혹은 에러만 골라서 확인 가능하다.

 

 

또한 동일한 JavaScript 표현식을 반복해서 확인해야 할 때는,
‘Expression’ 기능을 활용하면 실시간으로 값 변화를 추적할 수 있다.

아래 사진처럼 눈 모양 아이콘 을 클릭한 뒤, 하단의 Expression 영역에 원하는 표현식을 입력하면

해당 값이 코드 실행과 함께 자동으로 갱신된다.

3. 소스 패널

실행 중인 자바스크립트 파일들을 관리하고 디버깅하는 탭

개발 중인 파일뿐 아니라, 번들링된 JS, 외부 라이브러리, 소스맵까지 전부 이 안에서 접근 가능

 

소스 패널은 내 코드가 브라우저 안에서 실제로 어떻게 실행되는지 그 실행 흐름을 확인할 수 있는 패널이다.

콘솔은 '결과' 를 보여주지만 소스패널은 '과정' 을 보여준다.

소스패널은 크게 세 구역으로 나뉜다.

 

1. 파일 탐색 영역

현재 페이지에서 로드된 모든 스크립트, 라이브러리, 이미지 파일 목록을 보여줌. 도메인별로 정리돼 있어서, 어떤 경로에서 어떤 리소스를 가져왔는지 한눈에 확인 가능.

 

2. 코드 편집 영역

선택한 파일의 실제 코드를 보여줌. 여기서 직접 코드를 읽거나, 브레이크포인트를 설정할 수 있음.

 

3. 디버깅 패널

브레이크포인트 목록, 호출 스택(Call Stack), 변수 상태(Scope), Watch Expressions, 이벤트 리스너 등 디버깅 중인 상태를 실시간으로 보여주는 곳

• 값 추적 (Watch)
  
  • 중단점에서 지정된 변수의 값을 출력
• 호출 스택 (Call Stack)
  
  • 현재 함수가 실행되기까지의 “호출 경로”를 보여줌 
  • 이전 스택을 선택하여 해당 호출 상황으로 돌아가 디버깅이 가능
• 범위 (Scope)
  • 지정된 범위에 포함된 변수를 확인할 수 있다.
  • 지역 변수, 전역 변수, 클로저 변수까지 모두 표시되며 실시간으로 값이 업데이트 됨.
• 중단점 (Breakpoint)
  • 설정된 중단점의 목록을 표시한다.

4. 네트워크 패널

네트워크 활동을 보고 디버그

브라우저와 서버 사이의 모든 통신 기록을 보여주는 CCTV 같은 패널

페이지가 로드될 때 어떤 요청이 오가고, 그 요청일 얼마나 걸렸는지, 어떤 데이터를 받았는지 전부 확인할 수 있는 패널이다.

 

1. 필터(Filter) / 검색(Search)

상단 필터 버튼 (All, Doc, JS, XHR, Img, Media, Font, WS, Other)

특정 필터만 켜두고 디버깅한다면 편리하다. 또는 특정 엔드포인트만 검색해 관련 요청만 확인할 때도 사용될 수 있다. 

2. Preserve Log

기본적으로 페이지 새로고침하면 기록이 사라지게되는데 버튼을 활성화하면 새로고침 이후에도 로그가 유지된다.

로그인 과정이나 redirect 시점 디버깅할 때 매우 유용하다.

3. Disable cache

이 옵션을 켜두면 캐시를 완전히 무시하고 매번 새 요청을 보낸다. 이미지 최적화 테스트나 캐시 관련 버그 잡을 때 유용하다.

4. Throttling

네트워크 속도를 인위적으로 제한할때 사용된다. (e.g. 3G, Slow 4G 등)

 

또는 특정 요청을 선택하면 어떤 항목이 어떻게 요청되었고 어떤 응답을 받았는지 상세하게 확인할 수 있다.

서버에 어떤 헤더를 지정해 요청했는지 확인하며 네트워크 최적화를 진행할때 유용하다.

 

 

5. Recorder

패널사용자 플로우를 녹화, 재생, 측정

 

6. 성능 패널

부하 및 런타임 성능을 개선할 방법 찾음

브라우저가 HTML → 렌더링 → 페인트(Paint) → 컴포지팅(Compositing) 하는 모든 과정의 시간 흐름을 ‘타임라인’으로 시각화 

 

우선 성능 탭은 크게 5개 영역으로 구성되어 있다.

 

1. Controls (상단 컨트롤바)

녹화 시작/중지, 스크린샷 포함 여부, CPU throttling 설정 등

2. Summary Overview (요약 그래프)

FPS(초당 프레임 수), CPU 점유율, Network Activity 시각화

3. Main Thread (메인 스레드 타임라인)

자바스크립트 실행, 스타일 계산, 레이아웃, 페인트 등 브라우저의 작업 흐름

4. Bottom-up / Call Tree / Event Log (분석 탭)

함수별 실행 시간, 호출 관계, 상세 이벤트 로그

5. Screenshot (상단 썸네일)

각 시점에서 화면이 어떻게 보였는지 캡처

 

우선 상단의 Record 버튼을 클릭해 내가 성능을 측정하고 싶은 동작을 실행한다.

충분히 로드 된후 stop 버튼을 클릭하면 브라우저가 자동으로 분석해 타임라인이 표시된다.

 

1. CPU 차트, 네트워크 차트, 스크린샷 

Performance 탭의 상단에는 CPU 차트, 네트워크 차트, 그리고 스크린샷 영역이 순서대로 표시된다.
이 구역은 브라우저의 전체 성능 흐름을 한눈에 파악할 수 있는 핵심 영역이다. 

 

CPU 차트

최상단의 CPU 차트는 시간의 흐름에 따라
브라우저가 어떤 작업에 CPU 리소스를 사용하고 있는지를 색상 비율로 보여준다.

 

(1) 노란색

자바스크립트 실행(Scripting)

(2) 보라색

렌더링(Rendering, 스타일 계산 및 레이아웃)

(3) 초록색

페인팅(Painting, 실제 픽셀을 그리는 과정)

(4) 회색 

기타(Idle 또는 브라우저 내부 처리)

 

이 차트를 통해 어느 시점에 어떤 작업이 집중적으로 실행되는지,
그리고 CPU 사용량이 급격히 치솟는 병목 구간이 언제 발생했는지를 시각적으로 파악할 수 있다.
상단의 빨간색 세로선은 병목 현상(프레임 드롭이나 긴 태스크)을 의미한다.

 

네트워크 차트

CPU 차트 아래의 네트워크(Network) 차트는
페이지 로딩 과정에서 이루어진 네트워크 요청들의 타이밍과 우선순위를 보여준다.

 

• 진한 막대: 우선순위가 높은 리소스 (예: HTML, JS, CSS 등)
• 옅은 막대: 우선순위가 낮은 리소스 (예: 이미지, 폰트 등)
• 이 차트를 보면, 어떤 리소스가 먼저 로드되고 어떤 요청이 병렬로 처리되는지 대략적인 네트워크 흐름을 이해할 수 있다.

 

스크린샷

마지막으로 하단의 스크린샷 영역은 페이지가 실제로 로딩되는 과정을 시간순으로 보여준다.

각 썸네일은 해당 시점의 렌더링 결과 화면을 캡처한 것으로,
FCP(First Contentful Paint)나 LCP(Largest Contentful Paint) 시점을 눈으로 직관적으로 확인할 수 있다.

이를 통해 “사용자 입장에서 실제로 언제 화면이 보이기 시작했는가”를 명확히 파악할 수 있다. 

 

2. Network 영역

Performance 탭의 네트워크(Network) 영역은 서비스 로드 과정에서 발생하는 모든 네트워크 요청을 시간 순서대로 시각화한 그래프이다.

각 요청은 하나의 막대로 표시되며, 이 막대의 색상과 구간은 요청이 시작되고 응답이 완료되기까지의 과정을 단계별로 나타낸다.

 

각 구간이 의미하는 바는 아래와 같다.

1. 왼쪽 회색 선

브라우저가 서버와 최초로 연결하는 데 걸린 시간

 

2. 막대의 옅은 색 영역

요청을 보낸 뒤 서버의 첫 응답 바이트를 받을 때까지의 대기 시간

→ 이를 TTFB(Time To First Byte) 라고 부름.

 

3. 막대의 짙은 색 영역

서버로부터 실제 콘텐츠(데이터)를 다운로드하는 데 걸린 시간

 

4. 오른쪽 회색 선

해당 요청과 관련된 메인 스레드의 후속 처리 시간 (파싱, 실행 등)

 

위 그래프를 통해 어떤 리소스가 병목을 일으키는지 알수 있다. 

예를 들어 응답은 빠른데 다운로드가 오래 걸리는 건지 TTFB 자체가 긴 서버 응답 문제인건지 직관적으로 파악할 수 있다.

 

3. Main 영역 

Performance 탭의 Main 섹션은 브라우저의 메인 스레드에서 실제로 실행된 모든 작업을
시간 흐름에 따라 플레임 차트 형태로 시각화해 보여준다.

이 영역은 렌더링 성능의 실체를 확인하는 핵심 구간으로, 자바스크립트 실행, 레이아웃 계산, 페인팅 등 브라우저가 수행하는 거의 모든 작업이 여기에 기록된다. 한마디로 어떤 작업이 오래 걸리는지 확인가능하다. 

 

X축과 Y축의 의미는 아래와 같다.

X축 ( 시간 )

왼쪽에서 오른쪽으로 갈수록 시간이 지나며,
각 작업이 언제 시작되고 언제 끝났는지를 시각적으로 보여줌.

 

Y축 (Call Stack)

호출 스택(함수 호출 계층)을 의미함

아래쪽에 있는 작업이 상위 함수를 호출하고,
위쪽에 쌓일수록 “그 함수 안에서 실행된 세부 작업”을 뜻함. 

 

그럼 어떤 작업들을 확인할 수 있는지 찾아보려면 summary 탭을 확인하면 된다.

노란색 (Scripting)	자바스크립트 실행 단계	이벤트 핸들러 실행, 함수 호출, setTimeout, Promise 처리, 상태 변경 등 브라우저가 JS 코드를 실제로 해석·실행하는 단계
회색 (System)	브라우저 내부 시스템 작업	가비지 컬렉션(GC), 내부 스케줄링, Idle 상태 등 개발자가 직접 제어하지 않는 브라우저 수준의 작업
보라색 (Rendering)	스타일 계산 및 레이아웃 단계	CSS 스타일 재계산(Recalculate Style), 요소 크기 및 위치(Layout) 재배치 등 화면 배치를 결정하는 과정
초록색 (Painting)	화면 픽셀을 실제로 그리는 단계	텍스트, 이미지, 배경색, 그림자 등을 화면에 렌더링하는 과정
파란색 (Loading)	리소스 로딩 및 파싱 단계	HTML 파싱, 리소스 로드, 스크립트/이미지 다운로드, 네트워크 응답 처리 등
민트색 (Messaging)	메시징 및 커뮤니케이션 작업	WebSocket, postMessage, 이벤트 큐(message loop) 등 브라우저·스레드 간 메시지 전달 처리

 

4. Summary, Bottom-up, Call tree, Event Log

Performance 탭의 하단 영역에서는 발생한 세부 작업들의 분석 정보를 확인할 수 있다.

 

(1) Summary

선택 영역에서 발생한 작업들의 총 실행 시간과 비율을 요약해 보여주는 탭이다.

전체 시간 중에서 Scripting, Rendering, Painting, System 등 각 작업이 차지하는 비중을 비율로 확인할 수 있다. 

 

(2) Bottom-up

가장 하위 레벨의 작업부터 상위 호출 관계를 역순으로 보여주는 탭

시간 소모가 큰 함수나 태스크를 하위 기준으로 정렬해 보여준다.
즉, “어떤 함수가 실제로 CPU를 오래 점유했는가?”를 바로 볼 수 있다. 

 

(3) Call Tree

가장 상위 함수부터 하위 호출 순서대로 트리 구조로 보여주는 탭

애플리케이션 코드가 어떤 순서로 호출되어 실행되었는가를 시각적으로 확인할 수 있다.

상위 → 하위 구조로 내려가며, 함수 간의 호출 관계와 실행 시간을 한눈에 볼 수 있다.

 

(4) Event Log

시간순으로 발생한 모든 브라우저 이벤트의 리스트를 보여주는 탭

클릭, 스크롤, 마우스 이동, 리플로우, 리페인트 같은 이벤트들이 시간 순서대로 자세히 나열된다.

특정 동작(예: 스크롤이나 애니메이션)이 발생했을 때 어떤 작업들이 뒤따라 실행되었는지를 추적할 때 유용하다.

 

7. 메모리 패널

페이지 성능에 영향을 미치는 메모리 문제(예: 메모리 누수)를 찾아 해결

 

8. 애플리케이션 패널

IndexedDB 또는 Web SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시, 이미지, 글꼴, 스타일시트를 포함하여 로드된 모든 리소스를 검사

 

 

 

 

 

[출처]

https://developer.chrome.com/docs/devtools/overview?hl=ko#open

개요  |  Chrome DevTools  |  Chrome for Developers