Chrome DevTools 숨겨진 기능 — 디버깅 시간 줄이는 팁 모음

게시일: 2025년 12월 2일 · 14분 읽기

10년 넘게 Chrome DevTools를 썼는데도 최근에야 안 기능이 있었다. 대부분의 개발자는 Elements와 Console 탭만 사용한다. 하지만 숨겨진 기능들을 알면 디버깅 시간을 대폭 줄일 수 있다.

Performance Panel - 성능 분석

Flamechart 읽기

Performance 탭에서 녹음 버튼을 누르고 동작을 수행한 후 멈추면, 성능 데이터를 얻을 수 있다.

차트를 읽는 방법:

• Y축: 스택 높이 (깊이)를li>
• X축: 시간
• 색상: 다른 카테고리 (JavaScript, Rendering, Painting 등)

노란색은 JavaScript, 보라색은 Rendering, 녹색은 Painting이다. 가장 오래 걸린 작업을 찾으려면, 가장 넓은 블록을 찾으면 된다.

// 성능 이슈의 전형적인 예: 긴 Task
function slowFunction() {
  let sum = 0;
  // CPU를 많이 사용하는 작업
  for (let i = 0; i < 100000000; i++) {
    sum += Math.sqrt(i);
  }
  return sum;
}

// 이를 개선하려면 작은 청크로 나눔
function improvedFunction() {
  return new Promise((resolve) => {
    let sum = 0;
    let i = 0;

    function chunk() {
      for (let end = i + 1000000; i < end && i < 100000000; i++) {
        sum += Math.sqrt(i);
      }

      if (i < 100000000) {
        setTimeout(chunk, 0);
      } else {
        resolve(sum);
      }
    }

    chunk();
  });
}

메인 스레드 블로킹 감지

Performance 탭의 차트에서 빨간 삼각형은 성능 문제를 나타낸다. 이를 클릭하면 원인을 알 수 있다.

일반적인 문제:

• 렌더링 블로킹 JavaScript
• 무거운 CSS 선택자
• 과도한 레이아웃 스래싱

Memory - 메모리 누수 추적

Heap Snapshot 비교

메모리 누수를 찾으려면 두 개의 스냅샷을 비교한다.

1. 메모리 탭 열기
2. Heap Snapshot 찍기 (초기 상태)
3. 어떤 작업 수행 (예: 100개 요소 추가)
4. 다시 Heap Snapshot 찍기
5. 두 스냅샷 비교

정상적으로 작동하면 작업이 끝난 후 메모리가 다시 내려와야 한다. 메모리가 증가하지 않으면 정상이다.

// ❌ 메모리 누수
const cache = [];

function addToCache(data) {
  cache.push(data);
  // cache를 비우지 않으므로 메모리가 계속 증가
}

// ✅ 개선
const cache = [];
const MAX_CACHE_SIZE = 100;

function addToCache(data) {
  cache.push(data);
  if (cache.length > MAX_CACHE_SIZE) {
    cache.shift();  // 가장 오래된 항목 제거
  }
}

메모리 프로필링

// Chrome DevTools Console에서
performance.memory
// {
//   jsHeapSizeLimit: 2262260224,
//   totalJSHeapSize: 123456789,
//   usedJSHeapSize: 98765432
// }

Network - 네트워크 최적화

느린 네트워크 에뮬레이션

1. Network 탭
2. 좌상단의 "No throttling" 클릭
3. "Slow 3G" 또는 커스텀 선택

이를 통해 저속 네트워크에서 앱이 어떻게 동작하는지 확인할 수 있다.

하단의 Summary 정보

• 총 요청 수
• 전송된 데이터 크기
• 시간 (DOMContentLoaded, Load)

이 정보를 통해 어느 리소스가 가장 큰지 확인할 수 있다.

Local Overrides - 프로덕션 코드 수정

이 기능은 진짜 마법이다. 프로덕션 JavaScript를 로컬에서 수정해서 테스트할 수 있다.

설정 방법

1. DevTools > Sources 탭
2. 좌측 Overrides 탭
3. "Enable Local Overrides" 클릭
4. 폴더 선택 (로컬 폴더를 선택하면 그 폴더에 override 파일이 저장됨)

사용 방법

1. Sources 탭에서 수정하고 싶은 파일 찾기
2. 우클릭 > "Override content"
3. 파일 수정
4. 페이지 새로고침하면 수정된 내용 적용

// 예: 프로덕션의 API URL을 로컬로 변경
// 원본
const API_URL = 'https://api.example.com';

// Override
const API_URL = 'http://localhost:3000';

이 기능으로 프로덕션 버그를 빠르게 검증하거나, API를 개발 서버로 바꿔 테스트할 수 있다.

Command Palette - Ctrl+Shift+P

이 기능을 사용하면 DevTools의 모든 기능에 빠르게 접근할 수 있다.

유용한 명령어

• "Screenshot" - 전체 페이지 스크린샷 (스크롤 포함)
• "Show drawer" - 서든 창 열기
• "Disable JavaScript" - JavaScript 비활성화
• "Hide console drawer" - 콘솔 숨기기
• "Emulate CSS media feature prefers-color-scheme" - 다크모드 테스트

Snippets - 재사용 가능한 코드

자주 사용하는 코드를 스니펫으로 저장하면, 언제든 콘솔에서 실행할 수 있다.

설정 방법

1. Sources > Snippets
2. + New Snippet
3. 코드 작성
4. Ctrl+Enter로 실행

// 스니펫 예: 모든 이미지의 src 출력
document.querySelectorAll('img').forEach(img => {
  console.log(img.src);
});

// 스니펫 예: 콘솔의 모든 에러 확인
window.addEventListener('error', (event) => {
  console.error('Error:', event.error);
});

// 스니펫 예: 페이지의 성능 정보
const perfData = window.performance.getEntriesByType('navigation')[0];
console.log('Page Load Time:', perfData.loadEventEnd - perfData.fetchStart);

Console - 숨겨진 유틸리티

$0, $1, $2

Elements 탭에서 선택한 마지막 5개 요소에 접근한다.

// Elements에서  선택했다면
$0  // 그 버튼
$0.click()  // 클릭
$0.innerText = 'New Text'  // 텍스트 변경

copy() - 값 복사

// 객체를 클립보드에 복사
copy({ name: 'John', age: 30 })
// 클립보드에 {"name":"John","age":30} 저장됨

monitor() - 함수 호출 추적

// 함수가 호출될 때마다 매개변수를 로깅
monitor(fetch)

// 이 후 fetch가 호출되면 자동으로 로깅됨
fetch('https://api.example.com/data')
// console output: fetch('https://api.example.com/data')

table() - 테이블 형식으로 출력

// 배열을 테이블로 출력
const users = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];
table(users)

Coverage Tab - 사용하지 않는 코드 찾기

Performance 최적화의 첫 단계는 사용하지 않는 코드를 제거하는 것이다.

사용 방법

1. Command Palette (Ctrl+Shift+P) > "Coverage"
2. 녹음 버튼 클릭
3. 페이지 전체 사용 (모든 기능 클릭)
4. 멈추기

결과에서 "Bytes / Unused Bytes"를 보면 사용되지 않은 코드의 양을 알 수 있다. 이를 토대로 코드 스플리팅이나 불필요한 라이브러리 제거를 고려할 수 있다.

Accessibility - 접근성 검사

Elements 탭의 Accessibility 패널은 접근성 문제를 찾는 데 도움이 된다.

• alt 텍스트 누락
• 낮은 명도 대비
• 누락된 label
• 키보드 네비게이션 문제

정리

Chrome DevTools의 기능들:

• Performance: 성능 분석
• Memory: 메모리 누수 추적
• Network: 네트워크 최적화
• Local Overrides: 프로덕션 코드 수정 테스트
• Command Palette: 빠른 접근
• Snippets: 재사용 코드
• Console Utilities: 강력한 콘솔
• Coverage: 사용하지 않는 코드 찾기

이 기능들을 마스터하면, 디버깅과 성능 최적화가 훨씬 수월해진다.