타입스크립트 D-2

본 게시글은 정확한 정보를 담고있지 않을 수 있으므로 다른 자료도 참고하시길 바랍니다.
만약, 본 게시글이 잘못된 정보를 가지고 있다면 피드백 부탁드립니다. 감사합니다.

디버깅

tsconfig.json

{
  "compilerOptions": {
   	"sourceMap": true,
    // ...
  }
}

tsconfig.json 파일 내부에는 sourceMap 속성이 있다. 이 속성을 활성화시키면 컴파일된 js 코드와 ts 코드를 매핑하여 컴파일된 자바스크립트 코드를 디버깅할 때 typescript 코드로 확인할 수 있게 해준다.

sourceMap을 활성화 후 컴파일을 시도하면 filename.js.map 형식의 파일이 생성된다.

// index.js.map
{
  "version":3,
  "file":"index.js",
  "sourceRoot":"",
  "sources":["../src/index.ts"],
  "names":[],
  "mappings":";AAAA,IAAI,GAAG,GAAW,EAAE,CAAC"
}

mappings 속성은 자바스크립트 코드가 어떻게 타입스크립트 코드와 매핑되는지 나타내고 있으며 디버거가 이를 이용하여 매핑 작업을 한다고 한다.

Visual Studio Code 에디터의 디버거 아이콘을 누르면 create a launch.json 을 누를 수 있게 되어있다. 그런 다음, node.js를 눌러주면 자바스크립트 디버거가 활성화 된다.
이제 앞서 언급된 바와 같이, 디버거가 map 파일의 mappings를 사용하기 때문에 자바스크립트 코드가 아닌 매핑된 타입스크립트 코드를 통해 디버깅을 진행할 수 있다.