TypeScript 디버깅은 중단점, sourcemap, 런타임 값을 함께 본다

브레이크포인트는 실행을 멈추고 sourcemap은 컴파일된 JavaScript 위치를 원본 TypeScript 줄과 맞춘다.

01 breakpoint의심되는 TypeScript 줄에 중단점 설정

실행을 멈출 위치를 고른다.

02 runtimeNode.js 또는 브라우저 실행

컴파일 결과가 실제로 돈다.

03 sourcemap원본 줄 매핑

디버거 위치와 TS 파일을 연결한다.

04 inspect콜스택과 지역 변수 확인

타입 오류가 아니라 실행 순간의 값을 본다.

구분의미판단
줄 위치 불일치sourcemap 확인빌드 결과와 원본 파일 매핑 문제
상태 확인variables, call stack실제 값과 호출 경로 추적
재개step/continue다음 상태 변화 지점으로 이동

핵심 디버깅의 핵심은 타입이 아니라 실행 순간의 값이며, sourcemap이 맞아야 원본 줄 기준 추적이 가능하다.