VSCode TS 디버깅 하는법

패스포트 authenticate()의 콜백을 커스텀하다가 문제가 생겨서 디버깅을 해야할 일이 생겼다.

 

그래서 VSCode로 TS 디버깅 하는 법을 찾아봤다.

 

VSCode를 열자.

디버깅 탭을 클릭하면 다음과 같은 화면이 나타난다.

1. 디버깅 탭을 클릭한다.
2. 설정을 클릭한다.

 

 

 

선택한 프로젝트

그럼 선택한 프로젝트의 하위에 .vscode 숨김 폴더와 launch.json 파일이 생성된다.

 

 

 

program은 수정, preLaunchTask로 tsconfig.json을 읽어들여 tsc로 빌드한다.

launch.json을 열면 기본으로 작성되어 있는 폼이 있다.

program을 최상위 실행 파일을 지정해준다.

그리고 preLaunchTask 속성을 추가 작성한다.

 

 

 

tsconfig.json에서 sourceMap을 활성화해주자.

디버깅을 하기 위해선 sourceMap을 활성화해야한다.

tsconfig.json에서 sourceMap 주석을 해제해주자.

* source map은 원본 소스와 변환된 소스를 매핑해주는 것이다.

ts파일을 컴파일해서 생성된 js파일을 서로 매핑시켜 디버깅이 가능하게 해준다.

 

 

 

디버깅하고 싶은 위치를 찍어주자.

소스에서 디버깅을 하고 싶은 곳에 포인트를 찍어주자.

 

 

 

디버깅 탭에서 실행!

다시 디버깅 탭으로 이동해서 프로젝트를 선택하고 디버깅 실행 버튼을 클릭해주자.

 

 

 

node로 inspect 옵션이 붙어서 디버깅으로 실행된다!

디버깅이 실행되는 것을 알 수 있다.

 

 

 

참고: https://nodejs.org/ko/docs/guides/debugging-getting-started/

디버깅 - 시작하기 | Node.js

참고: https://code.visualstudio.com/docs/typescript/typescript-debugging

TypeScript debugging with Visual Studio Code