使用 VSCode 调试 Koa 或者 Express 项目


前言

平常调试 node 打 log 打习惯了,突然发现一个问题就是打印对象的时候,尤其这个对象里面有很多属性的时候,在终端上得一直往上拉才能看到,因此打算使用 vscode 来打断点调试程序。

安装

这里的例子是使用 koa ,express 类似。我是使用阿里巴巴的飞冰快速搭建一个后台和前台的项目。

  1. 下载飞冰
  2. 打开飞冰,使用ICE Design Pro模板并点击 添加koa2,如下
  3. 自动安装完成后,使用 vscode 打开项目:
  4. 打开终端,运行npm run client 这个时候前端项目就运行起来了。
  5. 稍微修改一下前端的代码,因为这个模板默认是使用前端直接返回数据,而不去请求接口,打开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 内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
// 使用 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
// 使用 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

1
2
3
// 任选其一
npm i nodemon -g
npm i node-dev -g

修改lanuch.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
// 使用 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 打了个断点:
启动调试,如下:

vscode 集成终端打印如下:

在前端页面点击登录,会跳到这里:

我们就能看到变量的信息啦😄(注意:如果此时终止了调试,nodemon 还是会运行,得在集成终端终止)

-------------本文结束感谢您的阅读-------------

本文标题:使用 VSCode 调试 Koa 或者 Express 项目

文章作者:shenzekun

发布时间:2018年12月31日 - 20:22

最后更新:2019年01月01日 - 15:20

原始链接:http://www.shenzekun.cn/使用-VSCode-调试-Koa-或者-Express.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

您的支持将鼓励我继续创作!