Node.js 调试 Node 应用程序

Node.js 代码中的错误很难发现和修复。通常，您可以通过简单研究代码来发现并修复错误。这样做可以快速提升代码质量。您还可以使用 log 语句进行事后调查，运行一些代码，并研究控制台输出（或日志文件），以查看它的实际执行方式。但是对于一些类型的错误（最糟糕的错误），您就需要从源代码中查找问题。

在本单元中，我将向您介绍源代码级调试，您可以在运行的程序中暂停执行，查明代码究竟发生了什么。

代码中的错误全部消除后，您会希望对其进行优化以提升性能和可扩展性。作为一名专业的 Node 开发者，一定要知道如何使用概要分析器来优化代码，这一点很重要。

本单元将向您介绍四个用于调试 Node 应用程序并进行概要分析的工具：

• Node   调试客户端

• Chrome   DevTools

• VSCode 调试器

• clinic

源代码级调试

作为练习，我们将对"购物清单"应用程序的 rest-controller 模块中的 create() 方法进行调试。我们将对每个工具使用相同的调试流程：

1. 启动调试器。

2. 设置断点，它会告诉程序在哪里冻结执行。

3. 使用内部命令导航代码。

4. 检查冻结程序中的变量值。

5. 创建监视表达式 来监视断点上的变量。

6. 更改所选变量的值，以改进程序的运行方式。

须注意，我们将在此练习中对第 12 单元的"购物清单"应用程序进行调试。

获取代码

您在此学习路径中跟随其中示例一起进行操作所需的代码可在我的 GitHub 存储库中找到。

调试器 #1：Node 调试客户端

Node 调试客户端是 Node.js 附带的基于文本的调试器，因此无需额外安装。这个工具还超级好用。

运行 Node 调试客户端

运行 Node 调试客户端的命令为：node inspect node_module。

要开始调试"购物清单"应用程序，可打开终端窗口并导航至 Unit-12 目录，确保 mongod 正在运行（在单独的终端窗口中运行 npm run   start-mongod），然后运行 node inspect ./www/bin。

输出类似如下：

在上面的输出中，调试客户端在程序的第一行代码处停止，并发出 debug> 提示符。

输入 c（或 cont 表示继续）让程序完成初始化。完整输出类似如下：

为 Node 调试客户端设置断点

接下来，我们将设置一个断点，这样我们就可以看到 rest-controller 模块中的 create() 方法发生了什么。

可通过两种方式设置断点。第一种是我推荐使用的方法，即通过 debug> 提示符使用 setBreakpoint   函数：setBreakpoint(module_file_name, line_number)。下面显示了如何在示例应用程序的   rest-controller 模块中的第 57 行上设置断点：

须注意，调试客户端在断点两侧展示了 5 行代码供参考。

当执行到 rest-controller.js 中的第 57 行时，程序将冻结。

另一种设置断点的方法（我不建议这样做）是在您想让调试器冻结之前在代码行上使用 debugger; 语句：

如果使用 debugger 语句，就需要在设置断点之后重新启动 Node，这就是我不建议使用这一方法的原因。通过使用   setBreakpoint 函数，您可以在运行的程序中设置断点，而无需重新启动。我推荐使用 setBreakpoint 函数（或 sb）来设置断点。

调试启动代码

使用 debug> 提示符，您可以在任何时候在程序中设置断点，包括当 Node 调试客户端首次启动并在第一行代码上停止时：

因为程序已在第一行代码上冻结，所以尚未加载 rest-controller 模块。这就是为什么会看到警告信息的原因：Warning:   script 'rest-controller.js' was not loaded yet.

不过，不要担心：调试器只是告诉您可能永远不会使用断点。（它不能确定，因为还没有加载 rest-controller 模块。）

在此处设置断点可以调试启动代码，该代码在程序加载模块和执行其他初始化时运行。这对调试数据库连接问题很有用。此外，还可以让程序加载，并在程序达到稳定状态后在   debug> 提示符处设置断点。

查看和删除断点

当您需要查看所设置断点的列表时，只需在 debug> 提示符处输入 breakpoints 即可：

要删除断点，可使用 clearBreakpoint() 函数（或简写为 cb）：

debug> cb('rest-controller.js', 57)z

导航代码

您已经看到了命令 c，它告诉调试器继续（或恢复）执行。 表 1 总结了用于在调试器中执行应用程序代码的其他命令。

如果您以前使用过源代码级调试器，那么应该很熟悉这些命令：

• 使用 step 单步进入函数调用。

• 使用 out 单步退出函数调用。

• 使用 next 执行当前代码行（如果是函数调用，则单步执行），并在当前函数中的下一行代码处停止。

pause 命令可让 Node 在能够处理命令后立即暂停：

获取更多上下文 (lists(n))

默认情况下，调试客户端会围绕断点提供两行上下文（共五行）。如果您需要更多上下文，可以使用 lists(n) 命令要求调试客户端提供   n 行上下文（共 2n+1 行）。例如，在 debug> 提示符处输入   list(5) 要求调试客户端给出 5 行上下文：

检查 Node 调试客户端中的变量值

当 Node 调试客户端在断点处停止时，您可以检查代码中的变量值。为此，您需要输入第 3 单元中介绍的 Read-Eval-Print-Loop (REPL)，然后让 REPL 计算您想要查看的变量的值。

首先，确保应用程序已经启动，并在 rest-controller.js 中的第 57 行上设置断点。现在，打开浏览器并转至"购物清单"应用程序 UI http://localhost:3000。单击 New Shopping   List 链接，输入 Test Shopping List 的描述，然后单击 Create 按钮。

执行将在 rest-controller.js 中的第 57 行处中断，您已经在此处设置了断点。

要查看 requestBody 变量的值，可输入 REPL 并键入   requestBody，然后按回车键：

您可以使用 REPL 来计算此范围内的任何变量的值。

要退出 REPL，可按 Ctrl+c 组合键。

输入 c 指示正在运行的程序继续运行，并创建新的购物清单。

为 Node 调试客户端创建监视表达式

正如您所看到的，检查变量值需要几个步骤：

1. 输入 REPL。

2. 计算变量的值。

3. 退出 REPL。

4. 继续运行程序。

5. 在每次程序中断时重复以上步骤。

如果您知道自己将在同一行代码处反复中断，那么就没有必要每次都重复这些步骤。相反，您可以设置监视表达式。

例如，假设您希望当调试器在 rest-controller.js 的第 57 行中断时查看   requestBody、req.body、req.params 和   req.path HTTP 请求属性。在此示例中，您会在 debug> 提示符处逐个输入这些属性。

继续并退出调试器，然后使用 node inspect ./bin/www 命令重新启动。当调试器在第一行处停止时，输入：

现在转至应用程序的主屏幕并单击 New Shopping List 链接。创建一个名为 Sponge Bob（或者其他您喜欢的名字）的购物清单，然后单击 Create。程序将在 create() 函数中调用 DAO 的行上中断。输出看起来应类似如下：

每次程序中断时，您所有的监视表达式（称为监视者）都会在代码之前显示出来。 （其他任何超出范围的监视表达式都将导致 ReferenceError。）

更改 Node 调试器客户端中的变量值

由于调试器在 rest-controller.js 的第 57 行处停止，因此您的下一个任务是将在 UI 中输入的值从 Sponge   Bob 改为 Patrick（或者任何您喜欢的名字）。为此，您将输入 REPL 并进行分配。输出类似如下（这是截取的部分输出，让您能够大致有所了解）：

在您更改 REPL 中的描述之后且在调用 listsDao（实际创建购物清单）之前，将会重置购物清单的名称，在本例中重置为   Patrick：

图 1. "购物清单"应用程序显示了调试器中修改的描述变量

以上就是对 Node 调试客户端的简要介绍。可查看文档以了解关于此工具的更多信息。

调试器 #2：Chrome DevTools

Node.js 使用 Chrome V8 引擎来运行 JavaScript 代码，因此 Chrome DevTools/ 也被融入 Node 完全在意料之中。

我们将使用 Chrome DevTools，执行使用 Node 调试客户端时所执行的相同过程。须注意，您的计算机上必须已经安装了 Chrome 浏览器才能使用 Chrome DevTools。

运行 Chrome DevTools

要设置 Node 应用程序来使用 Chrome DevTools，只需在启动应用程序时将 --inspect 标志传递给 Node：node   --inspect node_module。

现在导航至 Unit-12 目录，然后确保 mongod 正在运行 (npm run   start-mongod)。在单独的终端窗口中运行 node --inspect ./www/bin。输出将类似如下：

出于安全原因，调试器默认监听 IP 地址 127.0.0.1 和端口   9229。

要访问 DevTools UI，可打开 Chrome 并在地址栏中输入 about:inspect。您将看到如图 2 所示的屏幕。

图 2. 访问 Chrome DevTools UI

要打开 DevTools UI，单击 Open dedicated DevTools for Node 或者     inspect 链接。您将看到如图 3 所示的屏幕。

图 3. Chrome DevTools UI

在 Chrome DevTools 中设置断点

在 DevTools 控制台的左下角，单击 Sources 选项卡，然后单击 Node 选项卡。在该选项卡下，展开树的 file:// 节点来查看源代码。

继续展开源代码树，直到看到 controllers 目录。打开 rest-controller.js，它将出现在 UI 中间的编辑器窗口中。

要设置断点，向下滚动到第 57 行并单击行号槽。在编辑器窗口中，断点会显示为一个小箭头。它还显示在 UI 右下角的 Breakpoints 面板中，如图 4 所示。

图 4. 在 DevTools UI 中设置断点

要取消设置断点，可再次单击行号槽，这就起到切换的作用。

在 Chrome DevTools 中导航应用程序代码

Chrome DevTools 提供了与 Node 调试器客户端相同的基本导航，但它在调试器上以一组按钮的方式呈现。它们位于 UI 的右上角，如图 5 所示。

图 5. DevTools 调试器导航按钮

这些按钮从左到右依次为：

• Pause/Resume (F8)：暂停或恢复程序执行。

• Step over (F10)：执行当前代码行，并在同一代码块中的下一行处停止。

• Step into (F11)：单步进入当前代码行，并在该行内的下一行代码处停止。

• Step out (Shift + F11)：单步退出当前函数，转至调用堆栈中的前一行代码。

• Stop (F9)：执行当前代码行，并在下一行处停止。

在 Chrome DevTools 中检查变量值

当 DevTools 在断点处停止时，您可以检查变量值。为此，可以查看调试器的 Scope 面板。

打开浏览器，前往"购物清单"应用程序 http://localhost:3000，然后单击   New Shopping List 链接。输入描述 Another Test List，并单击   Create。

执行会在 rest-controller.js 的第 57 行处中断。现在，假设您想查看 req.body 对象的值。为此，展开后跟 req 变量的 Scope 选项卡。

图 6. 在 DevTools UI 中检查 req.body.description 变量

检查完 req 变量后，单击 resume 按钮（或 F8），让程序创建新购物清单。

在 Chrome DevTools 中创建监视表达式

在 Scope 窗格中定位变量可能会非常耗费，特别是因为您所需的变量并不总是位于列表的顶端。如果您知道自己将反复在同一个断点处停止，那么就有必要在要检查的变量上放置一个监视表达式。

要添加监视表达式，可展开 Watch 窗格并单击右上角的加号 （+） 按钮。

对于此示例，输入 requestBody 并按回车键。 继续添加 req.params 和   req.path。

当程序运行时，新监视表达式显示为 <not available>，因为变量不在作用域中。但当程序在 rest-controller.js 中的第 57 行处中断时，变量将在作用域内，它们的值将显示出来。

要测试这一点，可创建一个新购物清单并将其命名为 Yet Another List，然后单击 Create 按钮。当程序在您设置的断点处停止时，您应该会在 DevTools UI 中看到自己的监视表达式。（注意，您将需要展开监视表达式才能看到全部内容。）

图 7. DevTools UI 中的监视表达式

在 Chrome DevTools 中更改变量值

要修改变量的值，可在 Scope 面板或 Watch 面板中双击该值，为其指定新值，然后按回车键。

修改 requestBody.description 属性，给它一个新的值 NOT Yet Another   List，然后按回车键。接着单击 resume 按钮或 F8。

此列表将

显示 Yet Another List（最初在购物清单 UI 中设置的值），而显示刚刚分配的值，如图 8 所示。

图 8. 显示修改后描述变量的“购物清单”应用程序

要了解有关 Chrome DevTools 的更多信息，可查看文档。

调试器 #3：VSCode

我在第   6 单元中简要介绍过 VSCode，所以您应该对这个调试工具有一些了解。对于 VSCode，我们将采用其他两个工具所使用的相同源代码级调试过程。这一次，我还将向您展示如何设置多个启动配置。

设置具有多个配置的启动程序，可以帮助更轻松地调试同一项目中的多个程序。这对于"购物清单"应用程序项目非常方便，该项目由三个程序组成：

• 数据加载器（./utils/load-mongodb.js）

• 功能测试（./test/test-rest-services.js）

• "购物清单"应用程序 （./bin/www）

设置启动程序

要设置具有多个配置的启动程序，可单击 VSCode IDE 左侧的 Debug 选项卡。

启动配置存储在（相对于工作空间的）.vscode/launch.json 文件中。我们将为"购物清单"应用程序项目中为每个程序创建一个启动配置，先从功能测试程序开始。

展开 run 按钮旁边的下拉列表，如图 9 中所示的三角形。

图 9. 添加新启动配置

从下拉列表中选择 Add Configuration... 选项。VSCode 会创建 launch.json 文件，并在编辑器中打开该文件。

将 launch.json 中的样板代码替换为：

保存更改。您现在应该可以看到已经选择了 Run Mocha Tests 选项。（列表中的第一个条目始终是默认选项。）

• Node.js 程序的配置 type 始终是 node。

• name 应该是您可以在下拉列表中认出来的描述性名称。

• program 是要运行的 Node 程序的工作空间相对路径。

在本例中，路径没有直接指向功能测试 （./test/test-rest-services），而是指向 Mocha.js 主模块。在这个模块上，您会在此处提供一些文档化的参数，包括要运行的 Mocha 测试。

要运行 Mocha 测试，只需选择 Functional Tests 并单击三角形图标来运行此程序。测试的输出会显示在 VSCode 的调试控制台中，如图 10 所示。

图 10. 在 VSCode 调试器中运行功能测试启动程序产生的输出

运行 Mocha 测试

如果您尝试直接使用 Node 运行 Mocha 测试（而不是运行 npm test 脚本），那么可能看到过这样的错误：

之所以出错，是因为 Mocha 应该使用 mocha 模块运行，而不是直接从 Node 运行。VSCode 知道这一点。

完成启动程序

功能测试启动配置将有助于调试"购物清单"应用程序的功能测试。接下来，我们将为数据加载器程序和"购物清单"应用程序本身添加配置。

首先，单击启动下拉列表并选择 Add Configuration，然后从悬浮的下拉菜单中选择 {} Node.js: Launch   Program。将整个代码块替换为：

按照相同的过程为"购物清单"应用程序添加一个启动程序：选择 Add Configuration，然后选择 {} Node.js:   Launch Program。将代码替换为：

已完成的 launch.json 文件应该如清单 1 所示。

清单 1. 完整的 VSCode 启动配置 (launch.json)

我们已经设置了一个带有三个程序配置的启动程序。接下来，我们将执行常见的源代码级调试过程。

在 VSCode 中设置断点

打开 rest-controller.js，然后单击源代码左侧的行号槽来设置断点，断点将显示为一个小点。

图 11. 在 VSCode 中设置断点

要移除断点，可单击行号槽，这就起到切换的作用。

在 VSCode 中导航代码

VSCode 提供常见的导航选项，您现在应该对此非常熟悉：

图 12. VSCode 调试器导航按钮

从左至右依次为：

• Pause/Resume (F5)

• Step over (F10)

• Step into (F11)

• Step out (Shift+F11)

• Restart (Shift+Cmd+F5)

• Stop (Shift+F5)

在 VSCode 中检查变量值

如果您仍然在上一节的终端窗口中运行"购物清单"应用程序，应立即将其关闭 (Ctrl+c) 以避免端口冲突。

接下来，选择 Run Shopping List 启动配置来启动调试器。

在 UI 中创建一个新的购物清单，并将其命名为 Foo。

当调试器在断点处停止时，您可以在 IDE 左上角附近的 VARIABLES 窗格中看到变量值。

图 13. VSCode 调试器选项卡中的 VARIABLES 和 WATCH 窗格

在 VSCode 中创建监视表达式

要创建监视表达式，单击 WATCH 窗格中的加号按钮 (+)，输入您想要监视的表达式并按 Enter。

现在，每当调试器在断点处停止时，作用域内所有表达式的值都将显示在 WATCH 窗格中。（参见图 13。）

在 VSCode 中更改变量值

在 VSCode 中，您必须在 VARIABLES 窗格中更改活跃变量的值。

找到 requestBody 属性，将其展开，双击它的 description 属性。将此属性更改为 bar 并按   回车键。按 F5 指示调试器继续执行。

要了解有关使用 VSCode 进行调试的更多信息，务必查看其文档。

性能概要分析

即使您的代码没有错误并且运行正常，性能可能仍然是个问题。作为专业的 Node 开发者，您需要知道如何对代码进行概要分析以发现"热点"，这样就可以对其进行调优以获得最佳性能。

在第 4 单元中，您已经学习了如何运行 V8 概要分析程序。虽然 V8 并不是用户友好型工具，但是它是 Node 的现成工具之一，所以我们要熟悉它，这一点很重要。幸运的是，Node 生态系统还包括许多其他概要分析程序。 在选择概要分析程序时，注意这些重要特性：

• 易于设置： 应该能够通过一些快速 npm install 来完成设置。您还应该能够使用简单的命令或传递给 Node   运行时的标志来启动概要分析程序。

• 与您选择的负载测试工具集成：   负载测试是决定应用程序性能的最为重要的方面，因此应确保您的概要分析程序与这些工具中的一个或多个很好地集成。我个人比较喜欢 Apache Bench 和 loadtest。

• 图形输出：您已经见过了 V8   概要分析程序，这种输出不适合心理承受力弱的人。良好的概要分析程序应该提供可视化工具（如图表和图形）来帮助您发现性能瓶颈。

Node 生态系统包含很多概要分析实用程序，我鼓励您探索适合自己的选项。在本单元，我将向您介绍 clinic。

设置

我建议全局安装 clinic。打开终端窗口并输入以下命令：

npm install -g clinic

要验证安装，可运行 clinic 和 -v 选项，您应该可以看到类似如下的输出：

Ix:~/src/projects/IBM-Developer/Node.js/Course/Unit-12 sperry$ clinic -v

v1.0.3

接下来运行 clinic，并使用它对"购物清单"应用程序进行概要分析。

对应用程序进行概要分析和负载测试   (clinic doctor)

作为概要分析实用程序，clinic "打包"了一个 Node 进程，用于收集有关其运行方式的信息。这个实用程序包含许多概要分析工具，我将向您展示其中的两个：

• clinic doctor 用于诊断 Node 应用程序性能问题并提出建议。

• clinic bubbleprof 用于分析 Node   应用程序中的异步延迟，并生成可视化的延迟气泡图。

首先，从 Unit-12 目录运行 clinic doctor -- node ./bin/www（确保 mongod 正在运行，否则 Node 将崩溃）：

接下来，使用 Apache Bench 对应用程序进行压力测试。在本例中，我们对购物清单的商品搜索 REST 服务进行压力测试：