通过调试提高你的节点生产力

介绍

本教程将向您展示如何使用 Visual Studio Code 调试 NodeJS Express 应用。您无需成为 Node 专家即可进行调试，只需具备初级水平即可。

为什么你应该使用真正的调试器而不是console.log()

当我还是一名中级工程师时，学习如何使用调试器极大地提高了我的工作效率。我可以在几个小时内完成原本需要一天才能完成的工作。修复错误和开发功能也变得容易得多。

我发现，在探索那些我不熟悉的代码库时，调试尤其有用。即使是用怪异的方式编写的最复杂的逻辑，也能轻松查看其结果。如果能逐行运行并观察结果如何变化，那么推理复杂、费解的逻辑就会容易得多。

如果你曾经习惯console.log()将值打印到控制台，那么你可能知道在调试复杂程序时这有多么繁琐。它一次只能打印一个值，你需要console.log()为每个想要查看的值编写一条新的语句。如果你正在查看的值发生变化，你就需要console.log()重新执行一遍。这有点像蒙着眼罩或在黑暗中摸索。

使用真正的调试器，这些都不是必需的。在代码中设置断点，然后运行应用。当应用到达设置断点的那一行时，您将能够在“调试”选项卡中看到范围内的所有变量。只需一个操作，您就可以看到所有内容，而不是一次只看到一个值。

一开始我只是调试自己的应用程序代码，但随着时间的推移，我的经验也越来越丰富，我发现通过调试框架代码（比如框架自身的代码express）可以获得很多洞见。我甚至能够找到文档中没有列出的问题的答案。

先决条件

本指南需要安装Visual Studio Code和NodeJS。如果您想使用公共 URL 而非 来运行和调试应用localhost，则还需要publish.sh。

Express 应用程序示例

我建议使用我的快速示例应用程序，完整代码如下所示

// app.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    const foo = "bar";
    const bar = "baz";
    const one = 1;
    const two = 2;
    const three = 2;
    const five = two + three;

    res.send('2 + 3 = ' + five);
});

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
});

在您的设备上的某个位置创建一个新文件夹，然后将此代码复制并粘贴到名为的文件中app.js。

使用 设置您的项目npm init，然后按照提示进行操作。

然后运行npm install --save express安装express依赖项。

您可以使用 运行代码node app.js。点击在浏览器中访问http://localhost:3000，您会立即看到此代码存在错误，因为输出不正确。

但先别急着修复。你可以看看这些数字，在脑子里琢磨一下问题所在。不过，我们会用调试的方式，让你轻松发现问题，省去你的脑力劳动。

首先，您需要安装 Visual Studio Code (vscode)，这是微软推出的一款开源 IDE。如果您还没有安装，可以从code.visualstudio.com获取免费版本。它提供 Linux、Mac 和 Windows 版本。

设置 vscode

VSCode 是目前最容易设置调试的 IDE 之一，因为它由一个简单的配置文件控制。这意味着您可以直接从类似本指南的配置中复制粘贴，而无需像使用其他 IDE 那样手动设置或点击大量设置。

创建一个名为的文件夹.vscode

然后创建文件.vscode/launch.json并粘贴以下内容：

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Express App",
            "program": "${workspaceFolder}/app.js",
            "request": "launch",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        }
    ]
}

设置断点

断点是您在代码中设置的应用程序暂停位置，以便检查局部变量和应用程序的常规状态。在 VSCode 中，断点由您希望应用程序暂停的行号左侧的红点表示。只需点击行号左侧的区域即可设置断点。

我们可以看到有些数字加错了，因此，res.send('2 + 3 = ' + five)点击行号左侧的区域，在该行上设置一个断点。点击的位置应该会出现一个红点，就像下面第 14 行那样：

我们想弄清楚为什么 的值five是4而不是5，就像它应该的那样。

启动你的应用并进行调试

点击 vscode 窗口左侧的调试图标，打开“运行并调试”窗格。它看起来像这样：

您会在左侧窗格的顶部看到此内容：

单击“启动快捷应用程序”左侧的小绿色箭头图标。

你的 Express 应用现在将在 vscode 中启动，并具备完整的调试支持。在 vscode 窗口底部的“调试控制台”窗格中，你将看到它启动了：

该应用程序现在在 vscode 中运行，并具有调试支持。

触发断点

当应用程序在 vscode 中运行时，转到在您的浏览器中访问 http://localhost:3000（或只需单击该链接）。

然后断点就会被触发。它看起来如下：

这里发生了一些事情，下面让我们来解释一下。

在左下方，RUN AND DEBUG您将看到局部变量列表。req是 expressrequest对象，res是 expressresponse对象。如果您想查看发布到应用的查询参数和数据，这些内容很有用。

您可以在断点所在行查看所有局部变量及其作用域内的值。要查看所有这些信息，console.log()您必须逐个记录每个变量。使用调试器和断点，您可以立即查看所有内容。

上面res.send我做了一些基本的算术运算。你会在局部变量列表中看到结果。例如，的值two是2。

现在查看 的值three。显然，它应该3不是，所以存在错误。将2的值更新为，然后停止并重新启动应用程序，输出就正确了。three3

使用公共 URL 进行调试

您已经学会了使用localhost只能从您的计算机访问的 URL 进行调试。使用expose，只需一个终端命令，您就可以为本地运行的 Express 应用提供一个可与他人共享的公共 HTTPS URL。所有到此公共 URL 的流量都将自动localhost通过安全隧道路由。

你为什么要这样做？假设你正在为某个应用构建 API，并且正在与一位前端（例如 React）开发人员合作，该开发人员将与你的 API 集成。这是一个非常常见的用例express。

您可以设置一个断点，然后让 React 开发者触发他的应用来调用您的 API。之后，您可以检查请求并更新 API 来处理它。

其他用途包括 Webhook。如果您需要进行 Webhook 集成，可以使用 Webhook 提供程序配置您的公共 URL，并触发它们向您在 vscode 中调试的本地运行的应用发出请求。

现在，您可以准确地看到 Webhook 提供商发送的内容，甚至无需阅读（甚至无需理解）他们的文档。现在，您确切地知道该编写哪些代码来处理该请求。无论他们的文档好坏，您现在都知道该怎么做了。

要安装expose，请前往安装页面并按照所示说明操作。Linux 和 Mac 系统只需复制粘贴即可安装。Windowsexe系统可下载。

运行expose 3000后你会看到如下输出：

$ expose 3000
http://mofgjp.expose.sh is forwarding to localhost:3000
https://mofgjp.expose.sh is forwarding to localhost:3000

现在，断点仍然设置并且您的应用程序在 vscode 中运行，转到浏览器中显示的 HTTPS URL。

断点将会被触发，就像你刚刚向 发出了请求一样localhost。如果你想更进一步，可以尝试从另一台电脑或手机访问此 URL，断点仍然会被触发。

您现在可以与您正在集成的其他开发人员、webhook 提供商以及您想要与之共享的其他人共享此 URL。

使用调试控制台

vscode 调试器的一个很棒的小功能是调试控制台。当你开始调试时，它会在窗口底部打开一个标题为 的窗格DEBUG CONSOLE。如果你曾经在你最喜欢的 Web 浏览器的 devtools 中使用过控制台，那么这和它的功能基本相同，只不过是针对后端 NodeJS 代码的。

有时你可能想在不修改代码的情况下尝试某个表达式。在调试控制台中，尝试输入one + three。结果4将显示在控制台中：

您可以在调试控制台中运行任何 JavaScript 代码。您还可以运行函数。假设您调用的某个函数没有按照预期执行，您可以尝试在调试控制台中使用不同的参数运行它，直到它按照您的预期运行，然后相应地更新您的代码。

跳至下一行

在 行设置一个新断点const foo = "bar"。在 vscode 中启动你的 express 应用，然后在浏览器中点击 URL。

断点将会被触发。调试器的一个实用功能是能够运行到下一行，这样您就可以有效地逐行运行应用程序。

要跳到下一行，请单击“Step Over”图标，它看起来像这样：

如果您继续单击它，您的应用程序将继续运行到下一行，直到当前方法不再有行可运行。

结论

调试可以大幅提升 NodeJS 开发者的生产力。您将能够更快地修复错误，并减少花在理解不熟悉代码上的时间。无需逐个记录值console.log，通过调试，您可以一次性查看所有内容。

一旦您学会了调试，您就不再需要使用它console.log来进行调试。

祝您编码愉快！