vscode的node环境debug使用

本文讲述对node环境中使用vscode的debug进行调试。详细内容请仔细阅读官网，本文只是用来引导如何快速调试，高级用法需要参考官网的细节配置。

任意单一文件的快速调试

如果对于任意一个可以使用node指令执行的文件，直接在vscode中打开：

使用vscode搭上断点或者代码中编写debugger;，然后在左侧目录中选中debug扩展：

点击“运行和调试”，即可debug当前打开文件：

快速调试多个文件

如果需要调试多个文件，可以打开一个支持调试的js中断：

在终端中执行代码：

执行后，也是调试效果：

该方式可以在终端持续调试，是一个常用的临时调试方式。

固定重复调试某个文件

如果需要对某个文件进行重复调试，这个时候可以配置debugger配置：

如果是打开了某个文件，然后点击创建lanuch.json文件，选择node环境：

它会创建一个用node执行该文件的配置：

执行右上角的“Lanch Program”(箭头所指)，不管你当前vscode打开的是哪个文件，都会调试debug-test.js文件。

执行后，vscode会自动打开调试文件。

生成的文件在当前工作空间目录下的.vscode目录下：

如果需要多人共用，注意不要被.gitignore。
同理删除该文件，之前创建的调试配置就会被清除。

如果当前没有打开文件，创建的配置为：

跟我们直接点击“运行和调试”是一样的。

该方式的好处是，在调试配置文件中，可以配置一些参数(如ts-register等)，环境变量等，可以固定一些测试场景，避免每次重复设置。

支持配置多个调试配置。其中name建议维护成具有具体含义的文本，方便调试：

调试即可多个选项选择：

需要预处理的调试

在调试高版本es6或者ts代码时，需要在调试之前需要固定进行一些处理。

第一种方式，就是按照上面的配置的方式，然后配置参数args,runtimeArgs的方式，利用一些预处理工具的register机制，如@babel/register,ts-node/register:

{
  "type": "node",
  "request": "launch",
  "name": "后置指令",
  "skipFiles": [
    "<node_internals>/**"
  ],
  "program": "${workspaceFolder}/debug-test.ts",
  "runtimeArgs": ["-r", "ts-node/register"],
  "outFiles": [
    "${workspaceFolder}/**/*.js"
  ]
},

另一种方式就是，写一个代理的入口文件，在这个入口文件中，对其他文件进行预处理然后执行。也就是你可以直接把program配置成你的脚手架，然后执行，此时整个脚手架都具有调试功能。

在vscode的debug中，还提供了一种preLaunchTask机制, 通过在配置中配置preLaunchTask使用：

{
  "type": "node",
  "request": "launch",
  "name": "具有前置任务",
  "program": "${workspaceFolder}/out/test.js",
  "preLaunchTask": "build-ts",
  "outFiles": ["${workspaceFolder}/out/test.js"]
}

上面的配置还需要创建对应的task

最常用的还是将调试指令配置为执行一个命令：

{
  "command": "npm run debug",
  "name": "通过指令",
  "request": "launch",
  "type": "node-terminal"
},

debug的每次执行，都会执行指令npm run debug，也就是package.json中的scripts下debug指令，这种方式更加灵活和更广的适用范围，建议使用该方式。