DEBUG MAP

고급 디버깅은 로그를 늘리는 일이 아니라 원인을 좁히는 도구 선택이다

문제가 코드 흐름, 통신, 렌더링, 메모리 중 어디에서 생기는지에 따라 개발자 도구 탭을 바꿔 본다.

Console API

warn, error, table, time, trace로 메시지 목적을 나눠 기록한다.

Sources

브레이크포인트, 조건부 중단, 워치로 실행 흐름과 변수 값을 추적한다.

Network

상태코드, payload, header, timing으로 서버 통신 문제를 확인한다.

Performance

긴 작업, 렌더링 비용, 메모리 누수 의심 지점을 타임라인으로 본다.

판단 기준: 현상을 재현한 뒤 멈출 위치를 먼저 정하면, console.log를 무작정 늘리지 않아도 원인 후보가 줄어든다.