TypeScript
디버깅
수색…
소개
TypeScript를 실행하고 디버깅하는 두 가지 방법이 있습니다.
JavaScript로 변환 , 노드에서 실행 및 매핑을 사용하여 TypeScript 소스 파일로 다시 링크
또는
ts-node를 사용하여 직접 TypeScript 실행
이 기사에서는 Visual Studio Code 와 WebStorm을 사용하는 두 가지 방법에 대해 설명합니다. 모든 예에서는 주 파일이 index.ts 라고 가정합니다.
Visual Studio 코드의 SourceMaps가있는 JavaScript
tsconfig.json
세트에서
"sourceMap": true,
tsc
명령을 사용하여 TypeScript 소스의 js 파일과 함께 매핑을 생성합니다.
launch.json 파일 :
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}\\index.js",
"cwd": "${workspaceRoot}",
"outFiles": [],
"sourceMaps": true
}
]
}
이것은 생성 된 index.js (주 파일이 index.ts 인 경우) 파일과 Visual Studio Code의 중단 점에서 중단되고 TypeScript 코드 내의 변수 값을 해결하는 디버거로 노드를 시작합니다.
WebStorm의 SourceMaps가있는 JavaScript
Node.js 디버그 구성을 만들고 index.js
를 Node 매개 변수로 사용하십시오 .
Visual Studio 코드에 ts-node가있는 TypeScript
Type-Script 프로젝트에 ts-node를 추가하십시오.
npm i ts-node
package.json
스크립트를 추가하십시오.
"start:debug": "ts-node --inspect=5858 --debug-brk --ignore false index.ts"
launch.json
은 node2 유형을 사용하고 시작을 실행하는 npm을 시작하도록 구성되어야합니다 start:debug
스크립트 :
{
"version": "0.2.0",
"configurations": [
{
"type": "node2",
"request": "launch",
"name": "Launch Program",
"runtimeExecutable": "npm",
"windows": {
"runtimeExecutable": "npm.cmd"
},
"runtimeArgs": [
"run-script",
"start:debug"
],
"cwd": "${workspaceRoot}/server",
"outFiles": [],
"port": 5858,
"sourceMaps": true
}
]
}
WebStorm에 ts-node가있는 TypeScript
이 스크립트를 package.json
추가하십시오.
"start:idea": "ts-node %NODE_DEBUG_OPTION% --ignore false index.ts",
스크립트를 마우스 오른쪽 버튼으로 클릭하고 'test : idea'만들기 ...를 선택한 다음 'OK'를 선택하여 디버그 구성을 만듭니다.
다음 구성을 사용하여 디버거를 시작하십시오.