고급 디버깅과 실행 시점 추적

재현 조건 고정

사용자 동작, 데이터, 브라우저, 네트워크 상태를 기록해 같은 문제가 반복되는 기준을 만듭니다.

reproduce

의심 지점 앞뒤에 breakpoint를 두고 값이 처음 틀어지는 줄을 찾습니다.

break

call stack은 누가 이 코드를 불렀는지, scope는 현재 이름들이 어떤 값을 갖는지 드러냅니다.

context

네트워크 요청, storage, event listener, async stack을 함께 보면 코드 밖 원인을 놓치지 않습니다.

경계

조건부 중단점

특정 id나 횟수에서만 멈춤 반복문이 수천 번 돌 때 원하는 케이스만 확인할 수 있습니다.

filter

Logpoint

코드 수정 없이 값을 기록 운영에 가까운 흐름에서 로그를 임시로 넣는 효과를 냅니다.

trace

소스맵

빌드된 코드와 원본 파일을 연결 압축된 번들에서 디버깅할 때 원본 줄 번호를 복원합니다.

mapping

가설 작성 멈추기 전에 어떤 값이 얼마여야 하는지 예상하면 관찰이 빨라집니다.

비동기 흐름 Promise, timer, event handler는 호출 스택이 끊기므로 async stack 옵션을 확인합니다.

네트워크 UI 오류처럼 보여도 요청 payload나 응답 schema가 원인일 수 있습니다.

조건부 중단점 예시:
user.id === selectedId && response.status >= 400