vscode debug node

准备调试代码

index.ts

let sum: number = 0;

for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log('Sum is %s', sum);

编写相应的 tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true
  },
  "include": ["."]
}

必须要在 tsconfig 中配置 sourceMap: true ，ts 编译才会生成 index.ts 的 sourcemap。VSCode 调试时，会读取这个文件。

配置调试参数

VSCode 的调试参数都放在项目同级的 .vscode/launch.json 文件中。这次，我们修改一下 launch.json 文件，配置 ts 的调试参数。

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

有几个参数比较重要：
1.program：待调试程序的入口文件。${workspaceFolder} 指当前项目项目目录。
2.preLaunchTask：预执行的任务。这里的命令会在调试之前执行——调试开始前，先编译 ts。
3.outFiles: 编译后的 js 文件路径。我们给 program 指定的是 ts 文件路径，那 VSCode 怎么知道编译后的 js 去哪里了，要执行哪个 js 文件？答案就是，VSCode 会在 outFiles 中寻找匹配。

原理小结

启动调试时，VSCode 首先执行 preLaunchTask，将 ts 编译成 js 和 sourcemap，然后根据 program 和 outFiles 参数，找到编译后的待调试 js 文件执行。至于 ts 和 js 的断点信息，则是根据 sourcemap 相互定位的。