VSCode 调试 Node.js 指南

VSCode 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 diff、git 命令等特性，支持插件扩展，并针对 web 应用开发做了优化。

如果你作为前端工程师却还没有尝试过 VSCode，那是时候阅读 VSCode 安装 了。

---

通常情况下，我们用 Chrome 开发者工具调试 js 代码。

但是，当我们开发运行在服务端的 Node.js 程序时，Chrome 开发者工具暂时派不上用场了。

虽然也有办法实现 Chrome 调试 Node.js，不过这不是此文章的讨论的范围。

这里就以 Express 这个开源的轻量 Node.js Web 服务框架为例，介绍如何用 VSCode 断点调试服务端 Node.js 代码。

创建 Express 应用

使用 express-generator 脚手架创建一个 Express 演示应用。

打开终端，执行如下指令安装 express-generator 脚手架工具。

$ npm install express-generator -g 

等待执行完成后，在终端执行 express --version 查看脚手架版本号。如果看到下图所示的信息，说明已经安装成功了。

express --version

然后在终端执行 express demo 指令，生成名为 demo 的演示项目。这个指令会在当前目录下生成 demo 文件夹，里面的就是演示项目代码。

接下来进入 demo 文件夹，执行如下指令安装第三方依赖，并启动 demo 项目。

$ cd demo
$ npm install
$ npm run start

项目的默认端口号是 3000，我们打开 http://localhost:3000 就可以看到页面了，如图所示

http://localhost:3000

接下来，我们就以这个 Express demo 项目为例，介绍如何用 VSCode 断点调试。

配置调试参数

点击界面左边的第四个 DEBUG 按钮，进入调试界面，然后点击界面上方“No Configuration”下拉菜单，选择“Add Configuration”。

image.png image.png

选择 Node.js 环境

选择 Node.js 环境

选择完成之后，在项目的根目录中会生成一个 .vscode 的目录，这个目录中存放了各种各样的 VSCode 的配置。现在这个目录中就包含了一个文件名为 lanuch.json 的配置文件，配置文件的内容基本如下：

lanuch.json

其中 program 字段是关键，开启调试器的时候会从这个入口启动应用。

自动生成的 lanuch.json 配置文件的 program 已经默认有值了，那是因为VSCode 在初始化这个配置文件的时候，会解析项目的 package.json 文件里的 script.start 脚本，并把解析内容填充到 lanuch.json 的 program 字段。

至此，最基本的调试参数就配置好了。下一节介绍如何开始断点调试。

开始断点调试

首先我们要确定程序断点的位置。比如，我们访问 http://localhost:3000 的时候，想让程序停住，那就要找到相应的代码位置，并打上断点标记，如图所示：

VSCode 行号左侧的小红点就是断点标记，表示程序执行到这一行就会停下来

打断点

断点标记好后，就可以开始执行程序了。由于我们要程序在断点处停下来，所以要以 Debug 模式启动程序。

现在我们回到 VSCode 调试面板，点击顶部绿色的“执行”按钮，VSCode 就以调试模式启动程序了。可以看到，下方弹出了调试日志面板，而且最下方的状态栏也变成了黄色，表示正在调试中。

执行

因为我们刚才把断点打在了函数内部，所以调试模式启动后，程序还没执行到断点处。

这个时候，只需要参照第一小节的步骤，在浏览器访问 http://localhost:3000，VSCode 就能在断点处停下来了，如图所示：

断点

把 VSCode 左侧的面板全部展开后，可以看到非常丰富的断点信息。主要可以关注 VARIABLES（变量）、CALL STACK（调用栈）两个面板。

VARIABLES 面板展示了断点处的所有可访问变量。这里有两棵变量树：Local 和 Global。Local 指的是当前作用域内的变量，比如断点所处函数体的 req、res 等；而 Global 指的是全局作用域内的变量，比如 Array、Buffer等。

VARIABLES 面板

如果你还不清楚作用域的概念，可以参考这篇文章： JavaScript 作用域

CALL STACK 面板展示了当前断点的函数调用栈。点击进入每个调用栈后，还能查看栈内的所有信息，比如变量值等。

CALL STACK 面板

VSCode 调试 Node.js 就介绍到这里了。看似简单，但实际上 VSCode 的调试功能非常强大，更高级的内容就交由后续逐一介绍了。