DEBUG TRIAGE

증상을 먼저 분류하면 개발자 도구 탭이 정해집니다.

`console.log()`를 늘리기 전에 오류 형태, 멈출 위치, 요청 흐름, 성능 징후를 나누면 확인해야 할 값이 좁아집니다.

재현같은 입력, 같은 화면, 같은 네트워크 조건

중단브레이크포인트와 Watch로 값 변화 고정

정리수정 후 임시 로그와 조건부 중단점 제거

Console 오류 메시지와 자료형이 수상할 때

`error`, `trace`, `table`로 실패 위치와 데이터 모양을 빠르게 확인합니다.

스택, 반복 횟수, 객체 구조

Sources 특정 분기에서만 값이 깨질 때

조건부 브레이크포인트와 스텝 실행으로 한 줄씩 상태 변화를 좁힙니다.

Scope, Watch, Call Stack

Network 요청은 갔는데 결과가 이상할 때

상태 코드, 페이로드, 응답 본문, 타이밍을 한 요청 단위로 비교합니다.

Status, Payload, Timing

Performance 화면이 버벅이거나 메모리가 늘 때

긴 작업, 렌더링 이벤트, 힙 스냅샷으로 병목과 누수 후보를 찾습니다.

Long Task, Paint, Heap

로그만 늘리지 않기

멈출 지점을 지정해야 원인과 결과가 섞이지 않습니다.

요청과 화면을 연결

API 응답이 맞아도 렌더링 단계에서 깨질 수 있습니다.

수정 후 재측정

성능 문제는 기록 전후의 숫자로 확인해야 합니다.