使用VSCode打断点debug javascript / typescript

我们经常在浏览器的devtools中使用debug工具去调试代码，那么如果我运行的是Nodejs，也就是运行环境是nodejs, 那么应该如何debug打断点呢？

其实VSCode已经内部集成了调试工具，专门针对nodejs运行环境的，如果你需要debug其他的运行环境，你还需要安装对应的插件。

以上是一些插件，可以根据选择自行下载，本次只是针对于Nodejs。VSCode已经内部集成了。

使用起来也很简单，点击最左侧的bug的图标，会显示如下三个按钮。此处我新建了一个debug.js的文件，并打了一个断点，然后点击第一个按钮Run and Debug

如下图，断点就已经生效了，是不是很easy?

值得注意的是，上面的方式只能debug当前窗口文件，如果需要复杂的配置，比如像下面这样：

• 指定某个文件作为入口文件
• 指定当前的debug环境是Node
• 为程序运行时指定参数

以上等等特殊配置，就需要单独创建配置文件，在上面的截图中也看到，create a lanuch.json file点击后就会在你的项目目录中创建一个.vscode/lanuch.json的配置文件。

以上，其实内置的调试工具不仅可以调试JS，也可以调试TS，不妨直接来试试。

Uncaught /Users/yananliu/temp/learn-debugger/debugTs.ts:1
const helloTs: string = "hello typescript";
      ^^^^^^^

SyntaxError: Missing initializer in const declaration

可惜很不幸，报错了，原因是需要将ts转换为js，才能执行。实际上只要生成了sourceMap，VSCode会自动映射到ts源文件中。具体做法如下：

需要添加tsconfig.json文件来配置生成sourceMap，然后再次配置launch.json文件指明先编译后运行以及sourceMap和生成的js文件对应的目录。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true
  }
}

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/helloworld.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/out/**/*.js"]
    }
  ]
}

之后重新点击运行，看是不是可以了:)