前言
平常调试 node 打 log 打习惯了，突然发现一个问题就是打印对象的时候，尤其这个对象里面有很多属性的时候，在终端上得一直往上拉才能看到，因此打算使用 vscode 来打断点调试程序。
安装
这里的例子是使用 koa ，express 类似。我是使用阿里巴巴的飞冰快速搭建一个后台和前台的项目。
- 下载飞冰
-
打开飞冰，使用ICE Design Pro模板并点击 添加koa2，如下
image -
自动安装完成后，使用 vscode 打开项目：
image - 打开终端，运行
npm run client这个时候前端项目就运行起来了。 - 稍微修改一下前端的代码，因为这个模板默认是使用前端直接返回数据，而不去请求接口，打开
client/pages/UserLogin/actions.js,将import {login} from '../../api/user';改为import {login} from '../../api/index';就可以了。最后打开页面，地址终端里面有说明。
编写launch.json
VsCode左侧第四个按钮是调试按钮，默认是『没有配置』。点击右侧的齿轮状图标，选择Node.js 会在项目根目录下创建 .vscode 的文件夹及 launch.json 文件。launch.json 内容如下：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/server/index.js"
}
]
}
默认会访问server下的 index.js 文件，但是这个项目的入口文件是 app.js，因此需要将index.js改为app.js。
在launch.json中会使用到一些预定变量，这里说明一下：
-
${workspaceRoot}：VSCode中打开文件夹的路径 -
${workspaceRootFolderName}：VSCode中打开文件夹的路径, 但不包含"/" -
${file}：当前打开的文件 -
${fileBasename}： 当前打开文件的文件名, 不含扩展名 -
${fileDirname}： 当前打开文件的目录名 -
${fileExtname}当前打开文件的扩展名 -
${cwd}：当前执行目录
当我们在单步调试程序的时候，会进入node_modules里面，通常情况下我们并不需要去关心里面的逻辑实现，只关心项目本身的代码。在这个时候，我们就需要使用skipFiles：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/server/app.js",
"skipFiles": [
"${workspaceRoot}/node_modules/**/*.js",
"<node_internals>/**/*.js"
]
}]
}
我们还想要自动重启的功能，安装 nodemon 或者 node-dev：
// 任选其一
npm i nodemon -g
npm i node-dev -g
修改lanuch.json：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/server/app.js",
"runtimeExecutable": "nodemon", // 或者 node-dev
"restart": true,
"console": "integratedTerminal",
"skipFiles": [
"${workspaceRoot}/node_modules/**/*.js",
"<node_internals>/**/*.js"
]
}]
}
这里新增了三个字段，分别是：
- runtimeExecutable：用什么命令执行 app.js，这里设置为 nodemon，默认是 node
- restart：在终止 Node.js 后重启会话
- console：启动调试目标的位置，这里选择在 vscode 的集成终端输出信息
调试
这里在 server/controller/user.js 的 login 打了个断点：
image
image
vscode 集成终端打印如下：
image
在前端页面点击登录，会跳到这里：
image
我们就能看到变量的信息啦😄（注意：如果此时终止了调试，nodemon 还是会运行，得在集成终端终止）
