在 VS Code Debugger 中调试 Node js Express API

使用我们的说明使用 Visual Studio Code 调试基于 Express 的 API，以创建一个简单的 API。参考本教程来调试基于 JavaScript 的 API。

当我们创建软件时，我们很少会在没有错误的情况下完成它。API 创建不能免除这一事实，因此迟早我们需要对其进行调试。在 JavaScript 中，调试任务的第一站通常是登录到控制台，但使用调试器可以为我们提供更集成的体验。

Node js 是一个跨平台的开源 JavaScript 运行环境，允许 JavaScript 在服务器端运行

。
有很多指南可以找到最好的 node js 训练营，但在本教程中，我们将学习如何在 Visual Studio Code 或简称 VS Code 的帮助下调试基于 Express 的 API。
Express是“用于 Nodejs 的极简 Web 框架”。它允许我们将函数直接链接到 API 端点，这是构建 API 的一种快速而简单的方法。
Visual Studio Code是一个“简化的代码编辑器，支持调试、任务运行和版本控制等开发操作。”
我们还将使用cURL向我们的 API 发送请求。
如何
我们将使用 Express 框架创建一个简单的 API，然后尝试借助 VS Code 的调试功能而不是控制台对其进行调试。然后，您可以继续轻松添加 API 端点并进行 API 调用。
API 设置
首先，我们创建一个新的 Node js 项目并安装我们的依赖项。
$ mkdir api
$ cd api
$ npm init
$ npm i express body-parser
接下来，我们创建一个index.js文件作为我们的主服务器脚本。
const express = require("express");
const bodyParser = require("body-parser");
const users = [{ id: 0, name: "admin" }];
const server = express();
server.use(bodyParser.json());
server.get("/users", (_, response) => response.send({ users }));
server.get("/users/:id", ({ params: { id } }, response) => {
const user = users[id];
response.send({ user });
});
server.post("/users", ({ body }, response) => {
const { user } = body;
user.id = users.length;
users.push(user);
response.send({ user });
});
server.listen(9999, () =>
console.log("API running on http://localhost:9999")
);
我们使用users数组作为我们的内存数据存储。它使用管理员用户进行初始化。
接下来，我们创建我们的 Expressserver并使用bodyParser包的 JSON 中间件；它允许我们访问存储在POSTHTTP 请求正文中的 JSON 字符串的值。
然后，我们创建三个 API 端点。两个GET端点，因此我们可以通过 ID 和一个端点请求所有用户和一个特定用户的列表POST来创建新用户。
让我们使用以下命令启动 API！
$ node .
API running on http://localhost:9999
使用 API
现在我们的 API 已经启动并运行了，我们可以尝试使用 cURL 查询它。为此，我们需要打开一个新的终端窗口并执行以下命令。
创建用户：
$ curl -H "Content-Type:application/json" -d '{"user":{"name": "kay"}}' localhost:9999/users
{"user":{"id":1,"name":"kay"}}
列出所有用户：
$ curl localhost:9999/users
{"users":[{"id":0,"name":"admin"},{"id":1,"name":"kay"}]}
列出一位用户：
$ curl localhost:9999/users/1
{"user":{"id":1,"name":"kay"}}
创建另一个用户：
$ curl -H "Content-Type:application/json" -d '{"users":{"name": "xing"}}' localhost:9999/users
Error
...
不好了！我们在 JSON 中有一个错字，users而不是user. 由于我们没有在POST /users端点中处理这个问题，Express 只是响应了一个 HTML 格式的错误。
这是一个简单的问题示例，可以毫不费力地修复，但是让我们用它来启动 VS Code 的调试器，这样我们就可以在运行时直接调查出了什么问题。
使用 VS Code 的调试器
使用 VS Code 调试 Node js API 非常简单。
我们检查要调试的端点，并在端点触发的函数内设置断点。这是通过左键单击行号左侧来完成的。让我们在第 15 行做，这应该是我们POST /users端点函数的第一行。
行号 15
然后我们通过单击顶部菜单中的Debug->Start Debugging或按F5来启动调试器。
开始调试
VS Code 将为我们启动我们的应用程序和调试器。它还将通过 Node.js 的调试协议将两者链接在一起。
然后我们重新发送导致 cURL 错误的请求并尝试找出发生了什么。
$ curl -H "Content-Type:application/json" -d '{"users":{"name": "xing"}}' localhost:9999/users
此请求将运行链接到的函数POST /users并在其第一行的断点处停止。
如果我们查看代码左侧的侧边栏，我们可以看到一个VARIABLES类别，其中包含各种子类别，例如Block和Local。让我们打开Local，看看里面有什么。
块和本地类别
正如我们所见，我们有两个局部变量，body一个是 type Object，response一个是 type ServerResponse。
让我们使用F10进入下一行，看看会发生什么。
一切似乎都按预期工作。
让我们再次进入下一行。
繁荣！
不知何故，我们最终进入了代码库的完全不同的地方？
错误
似乎我们通过设置id我们的user对象创建了一个错误，这是怎么发生的？
让我们index.js再次打开，将断点移动到第 16 行，按F5让调试器运行到事件循环的末尾。
然后用 cURL 重新发送请求，看看在我们尝试设置之前发生了什么user.id。
当我们查看VARIABLES/Block类别中的侧边栏时，我们可以看到我们的user对象实际上是undefined! 如果我们打开VARIABLES/Local类别，我们也可以看到原因。
变量/块和变量/本地
我们body有一个属性，但是我们在第 15 行users尝试从中解构一个user变量，这导致我们在第 16 行尝试写入时出错。user.id
现在我们知道了我们的问题，让我们停止调试器并修复它。
server.post("/users", ({ body }, response) => {
const { user } = body;
if (!(user instanceof Object))
return response.send({ error: '"user" object missing in JSON!' });
user.id = users.length;
users.push(user);
response.send({ user });
});
让我们重新启动我们的服务器，让它运行新代码：
$ node .
API running on http://localhost:9999
并重新发送我们有问题的请求：
$ curl -H "Content-Type:application/json" -d '{"users":{"name": "xing"}}' localhost:9999/users
{"error":"\"user\" object missing in JSON!"}
最后，我们得到一个有用的 JSON 格式的错误消息。
结论
在 VS Code 的集成调试器的帮助下调试基于 Node.js 的 API 是一项简单的任务。我们只需要设置一个断点，不涉及额外的代码。
它为我们提供了许多开箱即用的运行时洞察力，包括：
当前变量的值
观察单个变量的能力
当前调用堆栈
当前加载的脚本