vscode调试typescript项目

前端利器VS Code,不只是可以开发DIV/CSS还可以开发nodejs typescript,这次我们介绍下如何配置使用vscode调试 typescript代码

全局安装ts-node

1
2
# 在终端执行
sudo npm i -g ts-node typescript # 已经安装过可以忽略

开启vscode的 自动附加模式

在编辑器主界面,执行快捷键 ctrl+shift+p,输入 Toggle Auto Attach 回车

开始调试

方式一

在 package.json 中增加 debug 启动脚本 node –inspect-brk -r ts-node/register src/main.ts

注意,最后的参数 src/main.ts 是程序的入口,可自行修改适配到自己的项目中

方式二

直接修改 .vscode 下的 launch.json文件 需改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Koa Program",
"runtimeArgs": [
"--nolazy",
"-r",
"ts-node/register",
],
"args": [
"${workspaceFolder}/app/app.ts"
],
"env": {
"DEBUG": "yuedun:*,-not_this",
"NODE_ENV": "development"
},
"sourceMaps": true,
"cwd": "${workspaceFolder}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}