VS Code에서 타입스크립트 디버깅하는 법

"1930's disney cartoon of A tortoise with a frog on its back riding through a log in the jungle." from DALL-E 2

[개발환경]

• Node.js 버전: 12.14.0
• VS Code 버전: 1.47.2
• 타입스크립트 버전: 3.9.5

 

[사전조건]

• 타입스크립트가 글로벌 모드로 설치되어 있어야 한다.

 

npm install -g typescript

 

 

[작업순서]

타입스크립트 프로젝트를 위한 폴더를 생성한다. (예시: tsc_deb_001)

 

npm init -y

tsc -init

 

tsconfig.json에서 다음 항목을 수정한다. (sourceRoot는 주석처리)

 

{

    "compilerOptions":{

        "target": "ES2019",

        "sourceMap": true,

        "rootDir": "./"

    }

}

 

 

루트 폴더에 app.ts 파일을 생성한다. 그리고 다음과 같이 작성한다.

 

function add(a: number, b: number): number {

    return a + b;

}

async function main(){

    console.log(add(3, 5));

}

main();

 

VS Code에서 <Ctrl+Shift+D>를 눌러 디버그 창으로 이동한다. 그리고 <launch.json 파일 만들기>을 클릭한다. 그리고 선택지 중 <Node.js>를 선택한다. 

 

 

그러면 .vscode 폴더에 launch.json 파일이 생성된다. launch.json 내용 중 다음 항목을 수정한다.

 

{

    "configurations": {

        "program": "${workspaceFolder}\\app.ts"

        "preLuanchTask": "tsc: build - tsconfig.json"

    }

}

 

VS Code에서 <Ctrl+Shift+B>를 누른 후 <tsc: 빌드 - tsconfig.json> 항목의 우측에 보이는 톱니바퀴 아이콘 (작업구성)을 클릭한다. 그러면 .vscode 폴더에 tasks.json이 생성된다.

 

.vscode의 tasks.json에서 다음 항목을 수정한다.

 

{

    "tasks": [

        "label": "tsc: build - tsconfig.json"

    ]

}

 

app.ts에서 라인 2에 커서를 두고 F9를 클릭하여 중단점을 설정한다.

 

 

다시 <Ctrl+Shift+D>를 눌러 디버그 화면으로 이동한 후, <프로그램 시작> 버튼을 클릭하여 디버깅을 시작한다.

 

 

그러면 app.ts에서 지정한 중단점에서 코드가 멈추게 된다.

 

 

이로써 VS Code에서 디버깅 환경 구축이 완료된다.