증상별 개발자 도구 선택
`console.log()`를 늘리기 전에 오류 형태, 멈출 위치, 요청 흐름, 성능 징후를 나누면 확인해야 할 값이 좁아집니다.
재현같은 입력, 같은 화면, 같은 네트워크 조건
중단브레이크포인트와 Watch로 값 변화 고정
증상별 개발자 도구 선택수정 후 임시 로그와 조건부 중단점 제거
Console
오류 메시지와 자료형이 수상할 때
`error`, `trace`, `table`로 실패 위치와 데이터 모양을 빠르게 확인합니다.
스택, 반복 횟수, 객체 구조
Sources
특정 분기에서만 값이 깨질 때
조건부 브레이크포인트와 스텝 실행으로 한 줄씩 상태 변화를 좁힙니다.
Scope, Watch, Call Stack
Network
요청은 갔는데 결과가 이상할 때
상태 코드, 페이로드, 응답 본문, 타이밍을 한 요청 단위로 비교합니다.
Status, Payload, Timing
Performance
화면이 버벅이거나 메모리가 늘 때
긴 작업, 렌더링 이벤트, 힙 스냅샷으로 병목과 누수 후보를 찾습니다.
Long Task, Paint, Heap
로그만 늘리지 않기
멈출 지점을 지정해야 원인과 결과가 섞이지 않습니다.
요청과 화면을 연결
API 응답이 맞아도 렌더링 단계에서 깨질 수 있습니다.
수정 후 재측정
성능 문제는 기록 전후의 숫자로 확인해야 합니다.