本文讲述对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": [
"/**"
],
"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
指令,这种方式更加灵活和更广的适用范围,建议使用该方式。