vscode的node环境debug使用

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

任意单一文件的快速调试

如果对于任意一个可以使用node指令执行的文件,直接在vscode中打开:
vscode的node环境debug使用_第1张图片
使用vscode搭上断点或者代码中编写debugger;,然后在左侧目录中选中debug扩展:
vscode的node环境debug使用_第2张图片
点击“运行和调试”,即可debug当前打开文件:
vscode的node环境debug使用_第3张图片

快速调试多个文件

如果需要调试多个文件,可以打开一个支持调试的js中断:
vscode的node环境debug使用_第4张图片
在终端中执行代码:
vscode的node环境debug使用_第5张图片
执行后,也是调试效果:
vscode的node环境debug使用_第6张图片
该方式可以在终端持续调试,是一个常用的临时调试方式。

固定重复调试某个文件

如果需要对某个文件进行重复调试,这个时候可以配置debugger配置:
vscode的node环境debug使用_第7张图片
如果是打开了某个文件,然后点击创建lanuch.json文件,选择node环境:
vscode的node环境debug使用_第8张图片
它会创建一个用node执行该文件的配置:
vscode的node环境debug使用_第9张图片
执行右上角的“Lanch Program”(箭头所指),不管你当前vscode打开的是哪个文件,都会调试debug-test.js文件。
vscode的node环境debug使用_第10张图片

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

生成的文件在当前工作空间目录下的.vscode目录下:
vscode的node环境debug使用_第11张图片
如果需要多人共用,注意不要被.gitignore
同理删除该文件,之前创建的调试配置就会被清除。

如果当前没有打开文件,创建的配置为:
vscode的node环境debug使用_第12张图片
跟我们直接点击“运行和调试”是一样的。

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

支持配置多个调试配置。其中name建议维护成具有具体含义的文本,方便调试:
vscode的node环境debug使用_第13张图片
调试即可多个选项选择:
vscode的node环境debug使用_第14张图片

需要预处理的调试

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

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

{
  "type": "node",
  "request": "launch",
  "name": "后置指令",
  "skipFiles": [
    "/**"
  ],
  "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中的scriptsdebug指令,这种方式更加灵活和更广的适用范围,建议使用该方式。

你可能感兴趣的:(vscode的node环境debug使用)