vscode怎样调试ts？
vscode 调试 TypeScript
情况
typescript :两.5.两
vscode:1.16.0
vscode 间接调试 ts 文件
源码:github
（https://github.com/meteor199/my-demo/tree/master/typescript/vscode-debug）
安拆 typescript 依赖
npm install typescript --save-dev加添 tsconfig.json
重要是将 sourceMap 装备为true。
{
"compilerOptions": {
"module": "co妹妹onjs",
"target": "es5",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true
},
"include": [
"src/**/*"
]
}配备自觉编译
使用 vscode 的 tasks 主动将 ts 编译为 js。也能够利用另外体式格局编译，如:gulp,webpack 等。
加添文件: /.vscode/tasks.json
{
// See https://go.microsoft.com/fwlink/选修LinkId=733558
// for thedocumentation about the tasks.json format
"version": "0.1.0",
"co妹妹and": "tsc",
"isShellCo妹妹and": true,
//-p 指定目次；-w watch,检测文件旋转自发编译
"args": ["-p", ".","-w"],
"showOutput": "always",
"problemMatcher": "$tsc"
}利用快速键 Ctrl + Shift + B 封闭主动编译。
装置调试
调试时，需求配备 vscode 的 launch.json 文件。那个文件纪录封动选项。
加添或者编纂文件 /.vscode/launch.json。
{
"version": "0.两.0",
"configurations": [
{
"name": "launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/dist/main.js",
"args": [],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}注重 : program 需装置为您要调试的 ts 天生的对于应的 js。
假设需求调试 /src/main.ts,则此处为 ${workspaceRoot}/dist/main.js。
调试
掀开 main.ts，正在左边加添断点，入止调试。
利用 ts-node 调试 ts 文件
源码:github（https://github.com/meteor199/my-demo/tree/master/typescript/vscode-debug-without-compiling）
来自:Debugging TypeScript in VS Code without compiling, using ts-node
ts-node 调试 ts 文件时，没有会隐式天生 js。奈何您没有念编译为 js 后 再调试，否以思索这类体式格局。
安拆 npm 依赖包
npm install typescript --save-dev
npm install ts-node --save-dev配备 tsconfig.json
首要是将 sourceMap 部署为true。
{
"compilerOptions": {
"module": "co妹妹onjs",
"target": "es5",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true
},
"include": [
"src/**/*"
]
}摆设 launch.json
掀开 DEBUG 界里，加添 铺排
或者者编纂 /.vscode/launch.json。
{
"version": "0.二.0",
"configurations": [
{
"name": "Current TS File",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/ts-node/dist/_bin.js",
"args": [
"${relativeFile}"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}调试
掀开要调试的 ts 文件，加添debugger。
掀开 debug 界里。
正在DEBUG后 选择 launch.json 外对于应的摆设，此处为Current TS File。
点击运转按键或者者按 F5 运转。
相闭学程选举：vscode学程
以上即是vscode若何调试ts的具体形式，更多请存眷萤水红IT仄台此外相闭文章！
发表评论 取消回复