在 VSCode 调试器中调试 Node.js Express API
封面图片由 Harald Deischinger 在 Flickr 上提供。
为什么
在软件开发过程中，我们很少能做到完全没有错误。API 的创建也不例外，因此我们迟早都需要进行调试。在 JavaScript 中，调试的第一步通常是向控制台输出日志，但使用调试器可以提供更深入的体验。
在本教程中，我们将学习如何借助Visual Studio Code调试基于 Express 的 API。
什么
Express是一个“极简的 Node.js Web 框架”。它允许我们将函数直接链接到 API 端点，这是一种快速简便的构建 API 的方法。
Visual Studio Code是一款“精简的代码编辑器，支持调试、任务运行和版本控制等开发操作”。
我们还将使用cURL向我们的 API 发送请求。
如何
我们将使用 Express 框架创建一个简单的 API，然后尝试借助 VSCode 的调试功能而不是控制台来调试它。
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并使用该软件包的 JSON 中间件bodyParser；它允许我们访问存储在 HTTP 请求正文中的 JSON 字符串的值POST。
然后，我们创建三个 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
...
糟糕！ JSON 中有一个拼写错误，users应该是 `<json> user`。由于我们的端点没有处理这种情况POST /users，Express 直接返回了一个 HTML 格式的错误信息。
这是一个很容易解决的问题示例，但我们用它来启动 VSCode 调试器，以便直接在运行时调查出了什么问题。
使用 VSCode 调试器
使用 VSCode 调试 Node.js API 非常容易。
我们检查要调试的端点，并在该端点触发的函数内部设置断点。这可以通过单击行号左侧的代码块来完成。我们选择第 15 行，这应该是端点函数的第一行POST /users。
然后，我们点击顶部菜单中的“调试”->“开始调试”或按F5键来启动调试器。
VSCode 会自动启动我们的应用程序和调试器，并通过 Node.js 的调试协议将两者连接起来。
然后我们重新发送导致 cURL 出错的请求，并尝试找出原因。
$ curl -H "Content-Type:application/json" -d '{"users":{"name": "xing"}}' localhost:9999/users
此请求将运行链接到的函数POST /users，并在第一行的断点处停止。
如果我们查看代码左侧的侧边栏，可以看到一个“变量”类别，其中包含“代码块”和“本地变量”等各种子类别。让我们打开“本地变量”看看里面有什么。
我们可以看到，我们有两个局部变量，body一个是类型Object，response另一个是类型ServerResponse。
让我们按F10切换到下一行，看看会发生什么。
一切似乎都按预期运行。
我们再往下一行走。
繁荣！
不知怎么的，我们最终来到了代码库中完全不同的位置？
我们似乎在设置对象的属性时造成了错误id，user这是怎么回事？
让我们index.js再次打开程序，将断点移到第 16 行，然后按F5让调试器运行到事件循环的末尾。
然后使用 cURL 重新发送请求，看看在我们尝试设置之前发生了什么user.id。
当我们查看“变量/块”类别下的侧边栏时，可以看到我们的user对象实际上是undefined！如果我们打开“变量/局部变量”类别，也能看到原因。
我们的对象body有一个属性，但我们在第 15 行users尝试从中解构一个变量，这导致我们在第 16 行尝试写入时出现错误。useruser.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格式的错误信息。
结论
借助 VSCode 集成的调试器调试基于 Node.js 的 API 非常简单。我们只需要设置一个断点，无需编写任何额外的代码。
它为我们提供了许多开箱即用的运行时洞察，包括：
- 当前变量的值
- 能够观察单个变量
- 当前调用堆栈
- 当前已加载的脚本
Moesif 是最先进的 API 分析平台，支持 REST、GraphQL、Web3 JSON-RPC 等多种协议。超过两千家公司通过 Moesif 处理数十亿次 API 调用，从而深入了解其平台。 了解更多
原文发表于www.moesif.com
文章来源：https://dev.to/moesif/debugging-a-node-js-express-api-in-vscode-debugger-2261