60. 자바스크립트 디버깅 도구 활용 (Using Debugging Tools)

디버깅 도구 활용 (Using Debugging Tools)

자바스크립트 개발에서 버그는 피할 수 없다. 디버깅 도구 활용을 잘하면 문제를 빠르게 찾아내고 해결할 수 있다. 브라우저의 개발자 도구나 IDE의 기능을 활용하면 코드의 흐름을 추적하고, 에러를 분석하기 쉬워진다. 이번에는 디버깅 방법을 기본부터 심화까지 코드와 함께 자세히 풀어보려고 한다.

디버깅을 잘 다루면 개발 속도가 빨라지고, 코드 품질도 높아진다. 하나씩 단계별로 살펴보자.

console.log로 시작하기

가장 기본적인 디버깅 방법은 console.log를 사용하는 것이다:

function calculate(a, b) {
    console.log("입력값: ", a, b);
    const result = a + b;
    console.log("결과: ", result);
    return result;
}

calculate(5, "3");
// "입력값: " 5 "3"
// "결과: " "53"

console.log로 변수 값을 출력해서 타입 오류를 발견했다. 간단하지만 강력한 첫걸음이다.

1. 브라우저 개발자 도구 열기

브라우저(Chrome, Firefox 등)의 개발자 도구는 디버깅의 핵심이다. F12나 우클릭 후 "검사"로 열 수 있다:

function buggyFunction() {
    let x = 10;
    x = x.toUpperCase(); // 에러 발생
    console.log(x);
}

buggyFunction();

위 코드를 실행하면 콘솔에 "x.toUpperCase is not a function" 에러가 뜬다. 개발자 도구의 콘솔 탭에서 에러 메시지와 스택 트레이스를 확인할 수 있다.

2. 브레이크포인트 설정

개발자 도구의 Sources 탭에서 브레이크포인트를 설정하면 코드 실행을 멈추고 변수 값을 볼 수 있다:

function processData(data) {
    let result = 0;
    for (let i = 0; i < data.length; i++) {
        result += data[i]; // 여기서 브레이크포인트 설정
    }
    return result;
}

processData([1, 2, "3"]);

Sources 탭에서 해당 줄을 클릭해 브레이크포인트를 설정하고, 실행하면 멈춘 상태에서 result와 i 값을 확인할 수 있다.

3. 디버거 문 사용

debugger 키워드로 코드 내에서 실행을 멈출 수 있다:

function calculateTotal(items) {
    let total = 0;
    for (let item of items) {
        debugger; // 여기서 멈춤
        total += item;
    }
    return total;
}

calculateTotal([1, 2, 3]);

브라우저에서 실행하면 debugger가 있는 줄에서 멈추고, 개발자 도구가 열려 변수 값을 볼 수 있다.

4. 네트워크 디버깅

Network 탭으로 비동기 요청의 문제를 추적할 수 있다:

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log("에러: " + error));

Network 탭에서 요청 상태(404, 500 등), 응답 시간, 헤더를 확인해서 문제를 파악할 수 있다.

5. 성능 분석

Performance 탭으로 코드 실행 시간을 분석한다:

function heavyTask() {
    let sum = 0;
    for (let i = 0; i < 1e7; i++) {
        sum += i;
    }
    return sum;
}

console.time("heavyTask");
heavyTask();
console.timeEnd("heavyTask");

console.time으로 간단히 측정하거나, Performance 탭에서 전체 실행 흐름을 녹화해서 병목 지점을 찾을 수 있다.

6. 조건부 브레이크포인트

특정 조건에서만 멈추게 설정할 수 있다:

function findBug(list) {
    for (let i = 0; i < list.length; i++) {
        if (list[i] < 0) { // i === 2일 때 브레이크포인트
            console.log("음수 발견: " + list[i]);
        }
    }
}

findBug([1, 2, -3, 4]);

Sources 탭에서 해당 줄에 우클릭 후 "조건부 브레이크포인트 추가"를 선택하고 i === 2를 입력하면 특정 조건에서만 멈춘다.

7. 비동기 디버깅

비동기 코드의 흐름을 추적해보자:

async function fetchData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await response.json(); // 여기서 브레이크포인트
    console.log(data);
}

fetchData();

브레이크포인트를 설정하고 "Step Over"나 "Step Into"를 사용해서 비동기 호출의 각 단계를 확인할 수 있다.

8. 성능과 가독성에 미치는 영향

디버깅 방법이 개발 과정에 어떤 영향을 주는지 보자:

- 성능: 브레이크포인트와 로깅은 실행 속도를 약간 늦출 수 있지만, 문제를 빨리 해결해서 전체 효율을 높인다.

- 가독성: 디버깅 코드를 적절히 정리하면 유지보수가 쉬워진다.

브레이크포인트로 흐름을 추적하고, 네트워크 탭으로 외부 요청을 분석하는 점이 디버깅의 핵심이다.

마무리

디버깅은 단순히 console.log에서 시작해서 브라우저 개발자 도구의 강력한 기능을 활용하는 방향으로 나아간다. 브레이크포인트, 네트워크 분석, 성능 추적 등을 통해 코드의 문제를 빠르고 정확하게 파악할 수 있다.