Chrome DevTools 실무 활용 팁

크롬 개발자 도구를 활용한 실무 디버깅 및 성능 최적화 기법을 다룹니다. 콘솔 활용법부터 네트워크 분석, 메모리 프로파일링까지 중급 개발자가 알아야 할 필수 기능들을 소개합니다.

---

---

들어가며

이 글에서는 Chrome DevTools 실무 활용 팁에 대해 상세히 알아보겠습니다. 총 8가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Console_Table로_데이터_시각화
2. 조건부_브레이크포인트_활용
3. Network_Throttling으로_성능_테스트
4. Performance_프로파일링으로_병목_찾기
5. Memory_Snapshot으로_메모리_누수_탐지
6. Copy와_Store_함수_활용
7. Coverage_탭으로_미사용_코드_찾기
8. Lighthouse로_자동_성능_감사

---

1. Console Table로 데이터 시각화

개요

console.log 대신 console.table을 사용하면 배열이나 객체 데이터를 표 형태로 깔끔하게 확인할 수 있습니다.

코드 예제

const users = [
  { id: 1, name: '김철수', role: 'developer' },
  { id: 2, name: '이영희', role: 'designer' },
  { id: 3, name: '박민수', role: 'manager' }
];
console.table(users);
console.table(users, ['name', 'role']); // 특정 컬럼만 표시

설명

console.table()은 데이터를 테이블 형식으로 출력하여 가독성을 높입니다. 두 번째 인자로 표시할 컬럼을 지정할 수 있습니다.

---

2. 조건부 브레이크포인트 활용

개요

특정 조건일 때만 실행을 멈추는 조건부 브레이크포인트로 효율적인 디버깅이 가능합니다.

코드 예제

function processOrders(orders) {
  orders.forEach(order => {
    // 브레이크포인트 우클릭 -> Edit breakpoint
    // 조건: order.amount > 10000
    const result = calculateTotal(order);
    console.log(result);
  });
}

설명

브레이크포인트를 우클릭하여 조건을 설정하면 해당 조건이 true일 때만 실행이 중단됩니다. 반복문에서 특정 케이스만 디버깅할 때 유용합니다.

---

3. Network Throttling으로 성능 테스트

개요

네트워크 속도를 제한하여 실제 사용자 환경에서의 성능을 테스트할 수 있습니다.

코드 예제

// Network 탭에서 throttling 설정
// Slow 3G, Fast 3G, Offline 등 선택 가능

// 느린 네트워크에서의 로딩 확인
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log('로딩 완료:', data));

설명

Network 탭의 throttling 기능으로 다양한 네트워크 환경을 시뮬레이션하여 실제 사용자가 경험할 성능을 미리 확인할 수 있습니다.

---

4. Performance 프로파일링으로 병목 찾기

개요

Performance 탭을 사용하여 코드 실행 시간을 측정하고 성능 병목 지점을 파악할 수 있습니다.

코드 예제

// Performance 탭에서 Record 버튼 클릭 후 실행
function heavyCalculation() {
  performance.mark('calc-start');

  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += Math.sqrt(i);
  }

  performance.mark('calc-end');
  performance.measure('calculation', 'calc-start', 'calc-end');
}

설명

performance API로 코드 구간별 실행 시간을 측정하고, Performance 탭의 Flame Chart에서 시각적으로 병목 구간을 찾아낼 수 있습니다.

---

5. Memory Snapshot으로 메모리 누수 탐지

개요

Heap Snapshot을 활용하여 메모리 누수를 찾고 메모리 사용량을 분석할 수 있습니다.

코드 예제

// Memory 탭 -> Heap snapshot 선택
let leakyArray = [];

function createMemoryLeak() {
  const largeData = new Array(1000000).fill('data');
  leakyArray.push(largeData); // 메모리 누수 발생
  console.log('Current size:', leakyArray.length);
}

setInterval(createMemoryLeak, 1000);

설명

Heap Snapshot을 주기적으로 찍어 비교하면 메모리 사용량 증가 추이를 파악할 수 있습니다. Retained Size가 큰 객체를 찾아 메모리 누수를 해결합니다.

---

6. Copy와 Store 함수 활용

개요

콘솔에서 $0, copy() 등의 유틸리티 함수로 빠르게 데이터를 추출하고 복사할 수 있습니다.

코드 예제

// Elements 탭에서 요소 선택 후 콘솔에서
$0 // 현재 선택된 DOM 요소
$0.innerText // 텍스트 내용 확인

const data = { name: 'test', value: 123 };
copy(data); // 클립보드에 JSON 복사

temp1 = { sample: 'data' }; // 전역 임시 변수로 저장

설명

$0는 Elements 탭에서 선택한 요소를 참조하고, copy() 함수로 데이터를 클립보드에 복사할 수 있습니다. 임시 변수로 데이터를 보관하여 테스트할 수도 있습니다.

---

7. Coverage 탭으로 미사용 코드 찾기

개요

Coverage 도구로 실제 사용되지 않는 CSS와 JavaScript 코드를 찾아 번들 크기를 최적화할 수 있습니다.

코드 예제

// Coverage 탭 (Ctrl+Shift+P -> Show Coverage)
// Record 버튼 클릭 후 페이지 사용

function usedFunction() {
  return 'This is used';
}

function unusedFunction() {
  // 이 함수는 빨간색으로 표시됨
  return 'This is never called';
}

usedFunction();

설명

Coverage 탭에서 녹화를 시작하면 실제 실행된 코드는 녹색, 실행되지 않은 코드는 빨간색으로 표시됩니다. 이를 통해 불필요한 코드를 제거하여 번들 크기를 줄일 수 있습니다.

---

8. Lighthouse로 자동 성능 감사

개요

Lighthouse를 실행하여 성능, 접근성, SEO 등을 자동으로 분석하고 개선 방안을 제시받을 수 있습니다.

코드 예제

// Lighthouse 탭 선택 -> Generate report
// Performance, Accessibility, Best Practices, SEO 점수 확인

// 개선 제안 예시:
// - 이미지 최적화: <img loading="lazy" />
// - 텍스트 압축 활성화
// - 사용하지 않는 JavaScript 제거

const img = document.querySelector('img');
img.loading = 'lazy'; // Lazy loading 적용

설명

Lighthouse는 웹 페이지를 다양한 관점에서 분석하고 점수와 함께 구체적인 개선 방안을 제시합니다. 정기적으로 실행하여 웹사이트 품질을 관리할 수 있습니다.

---

마치며

이번 글에서는 Chrome DevTools 실무 활용 팁에 대해 알아보았습니다. 총 8가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #DevTools #Debugging #Performance #Console