JavaScript 디버깅: 개발자 도구 활용법

JavaScript 디버깅의 기초를 다졌다면, 이제 브라우저 개발자 도구(DevTools)를 활용한 실제 디버깅 방법을 알아보자. DevTools는 단순히 콘솔 로그를 보는 것을 넘어 코드 흐름 분석, DOM 탐색, 성능 최적화까지 유용한 기능을 제공하기 때문에 사용법을 숙지하는 것이 좋다.

---

1. Source 탭 활용하기

Source 탭은 디버깅의 핵심이다. 중단점(Breakpoint) 설정, 코드 흐름 분석, 변수 상태 확인 등을 수행할 수 있다.

중단점(Breakpoint) 설정

중단점은 특정 코드 실행을 중지시키고 그 시점의 상태를 점검하는 데 사용된다.

설정 방법:

1. Source 탭 열기
   • Chrome DevTools에서 F12 또는 Ctrl + Shift + I → Source 탭 선택
2. 중단점 설정
   • 왼쪽 패널에서 JavaScript 파일 클릭
   • 디버깅하려는 코드 줄 번호를 클릭해 중단점 추가

예제:

function calculateTotal(price, tax) {
    let total = price + tax; // 여기에 중단점 설정
    console.log("Total:", total);
    return total;
}

calculateTotal(100, 20);

중단점 도달 시 확인할 수 있는 정보:

• Scope: 현재 함수의 지역 변수 값
• Call Stack: 함수 호출 흐름

조건부 중단점

특정 조건이 만족될 때만 멈추도록 설정하는 중단점이다.

설정 방법:

• 중단점 우클릭 → Add condition → 조건 입력
  예: item.quantity > 10

예제:

function processItem(item) {
    if (item.quantity > 10) {
        console.log("Large order:", item);
    }
    // 여기에 조건부 중단점 설정 (item.quantity > 10)
    return item.price * item.quantity;
}

processItem({ price: 20, quantity: 5 });  // 멈추지 않음
processItem({ price: 20, quantity: 15 }); // 중단점 작동

Watch Expression 사용

특정 변수나 표현식을 추적하는 기능이다.

설정 방법:

• Watch 영역에 price * tax, total > 100 등의 표현식을 추가

활용 상황:

• 변수 값 변화 추적
• 특정 조건이 만족되는 시점 확인

---

2. Console 탭 활용

$0, $1 등을 활용한 DOM 접근

Elements 탭에서 선택한 DOM 요소를 $0으로 콘솔에서 즉시 접근할 수 있다.

예제:

$0.style.color = "red"; // 선택한 요소의 텍스트 색상 변경

console.table()로 데이터 시각화

객체나 배열 데이터를 표 형태로 출력한다.

예제:

const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 35 }
];

console.table(users);

• 표 형태로 출력되어 데이터 비교가 쉬워진다.

debug() 함수 활용

debug(fn)을 호출하면 해당 함수가 실행될 때마다 자동으로 중단점에 도달한다.

예제:

function greet(name) {
    console.log("Hello, " + name);
}

debug(greet); // greet 함수 호출 시 중단점 활성화
greet("Alice");

일부 브라우저 또는 환경에서는 제한이 있을 수 있으며, 콘솔에서만 사용 가능하다.

---

3. Network 탭 활용

Network 탭은 API 요청 상태, 실패 원인, 응답 속도 등을 분석할 때 유용하다.

API 요청 분석

1. XHR 필터 선택으로 AJAX 요청만 보기
2. 요청 클릭 → 세부 정보 확인
   • Headers: 요청 URL, 메서드, 헤더
   • Response: 서버에서 받은 데이터
   • Timing: 요청 처리 시간

예제:

fetch("/api/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

요청 실패 시 응답 코드(예: 404, 500), 오류 메시지를 확인.

---

4. Performance 탭 활용

성능 저하가 발생했을 때 원인을 분석할 수 있다.

성능 기록

1. Performance 탭 → Record 버튼 클릭
2. 앱을 사용하며 기록
3. 기록 종료 후 분석

분석 포인트:

• Frame Rate: 60fps 미만 → 렌더링 성능 문제
• CPU Usage: 특정 스크립트가 과도한 CPU 사용

개선 팁:

• 긴 실행 시간의 JavaScript는 최적화 또는 비동기 처리
• CSS 애니메이션 대신 GPU 가속 (transform, opacity) 사용

---

5. Lighthouse 탭 활용

Lighthouse는 웹 성능, 접근성, SEO를 평가하고 개선안을 제공한다.

분석 방법

1. Lighthouse 탭 → Generate Report 클릭
2. 결과 보고서 확인

항목 예시:

• Performance: 로딩 시간, 렌더링 최적화 제안
• Accessibility: 키보드 접근성, 대비 등
• SEO: 메타 태그, 콘텐츠 구조 진단

---

마무리

작성하다 보니 심화보다는 기초적인 활용법 위주로 정리된 글이 되어버렸다.
하지만 LLM의 발전 덕분에 얕고 넓게 개념을 익혀두면, 이후에는 필요한 내용을 즉시 도움받아 확장할 수 있다.
따라서 브라우저 DevTools의 기본적인 활용법만 숙지해두는 것도 효율적인 접근 방식이라 생각한다.

브라우저 DevTools는 단순한 콘솔 로그 출력을 넘어, 디버깅, 성능 분석, DOM 탐색 등 다양한 기능을 제공한다.
Source, Console, Network, Performance, Lighthouse 탭을 상황에 맞게 적절히 활용하면, 디버깅은 물론 성능 최적화와 사용자 경험 개선에도 큰 도움이 된다.

---