console.log를 넘어서: 더 빠르게 디버깅하는 7가지 방법

버그를 만나면 반사적으로 console.log를 찍게 됩니다. 나쁘진 않지만, 더 빠른 도구들이 있습니다. 원인을 좁히는 디버깅 습관을 정리합니다.

1) console.log도 잘 찍는 법

변수 이름과 함께 묶어 찍으면 어떤 값인지 한눈에 보입니다.

console.log({ userId, cart, total }); // {userId: 3, cart: [...], total: 0}

객체를 통째로 넘기면 키 이름이 라벨이 됩니다.

2) 표 데이터는 console.table

배열/객체 목록은 표로 보면 훨씬 읽기 쉽습니다.

console.table(users); // 행·열로 정렬된 표 출력

3) 중첩 객체는 console.dir

DOM 요소나 깊은 객체의 속성 트리를 펼쳐 봅니다.

console.dir(document.querySelector(".btn"));

4) 호출 빈도·시간 측정

console.count("render");        // 이 줄이 몇 번 실행됐는지
console.time("fetch"); /* ... */ console.timeEnd("fetch"); // 소요 시간

"왜 이게 30번 호출되지?" 같은 의문을 console.count가 바로 풀어줍니다.

5) 중단점이 로그보다 빠를 때

특정 줄에 **중단점(breakpoint)**을 걸면 그 순간의 모든 지역 변수, 호출 스택, 스코프를 한 번에 볼 수 있습니다. 로그를 여러 줄 찍을 바엔 한 번 멈춰서 보는 게 빠릅니다.

• 조건부 중단점: 중단점 우클릭 → 조건 입력(i === 42). 반복문에서 특정 케이스만 멈춤
• logpoint: 코드를 안 고치고도 그 위치에서 값을 출력

6) 네트워크 탭으로 "프론트냐 백이냐" 가르기

API 버그는 절반이 오해입니다. 네트워크 탭에서 실제 보낸 요청과 받은 응답을 보면, 프론트가 잘못 보냈는지 서버가 잘못 줬는지 즉시 갈립니다. 상태 코드와 응답 본문부터 확인하세요.

7) 이진 탐색으로 범위 좁히기

원인이 어딘지 모를 때, 코드의 절반 지점에 로그/중단점을 두고 "여기까진 정상인가?"를 묻습니다. 정상이면 뒤쪽 절반, 아니면 앞쪽 절반. 몇 번이면 범위가 한 줄로 좁혀집니다.

마무리 체크리스트

• 로그는 {변수}로 묶어 라벨링
• 목록은 console.table, 빈도는 console.count
• 여러 변수는 로그보다 중단점 한 방
• API는 네트워크 탭부터, 원인은 이진 탐색으로 좁히기

디버깅의 본질은 "추측을 검증 가능한 질문으로 바꾸는 것"입니다. 도구는 그 질문에 빨리 답하기 위한 수단입니다.