所有文章 > API开发 > 在 VS Code 调试器中调试 Node js Express API

在 VS Code 调试器中调试 Node js Express API

在 VS Code 调试器中调试 Node js Express API

为什么

当我们创建软件时,很少会出现错误。API 创建也不例外,因此我们迟早需要对其进行调试。在 JavaScript 中,调试任务的第一站通常是登录到控制台,但使用调试器可以为我们带来更完整的体验。

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

有很多指南可以找到最好的 node js 训练营,但在本教程中,我们将学习如何调试基于 Express 的 API借助 Visual Studio Code(简称 VS Code)。

是什么

表达是一个“Nodejs 的极简 Web 框架”。它允许我们将函数直接链接到 API 端点,这是一种快速而简单的构建 API 的方法。 Visual Studio 代码是一个“精简的代码编辑器,支持调试、任务运行和版本控制等开发操作”。

我们还将使用卷曲向我们的 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并使用包的 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应该是user。由于我们没有在POST /users端点中处理这个问题,因此 Express 只是以 HTML 格式的错误进行响应。

这是一个简单的例子,可以毫不费力地修复问题,但让我们用它来启动 VS Code 的调试器,以便我们可以在运行时直接调查出了什么问题。

使用 VS Code 的调试器

使用 VS Code 调试 Node js API 非常容易。

我们检查要调试哪个端点,并在端点触发的函数内设置断点。这可以通过在行号左侧单击鼠标左键来完成。让我们在第 15 行POST /users找到它,这应该是我们的端点函数的第一行。

VSCode 断点截图

然后我们通过点击顶部菜单的“调试”->“开始调试”或按F5来启动调试器。

VSCode 菜单截图

VS Code 将为我们启动应用程序和调试器。它还将通过 Node.js 的调试协议将两者链接在一起。

然后,我们使用 cURL 重新发送导致错误的请求,并尝试找出发生了什么。

$ curl -H "Content-Type:application/json" -d '{"users":{"name": "xing"}}' localhost:9999/users

该请求将运行链接到的函数POST /users并在其第一行的断点处暂停。

如果我们查看代码左侧的侧边栏,我们可以看到一个VARIABLES类别,其中包含各种子类别,例如BlockLocal。让我们打开Local并查看里面有什么。

VSCode 侧边栏截图

我们可以看到,我们有两个局部变量,body分别是 类型Objectresponse类型ServerResponse

让我们使用F10进入下一行看看会发生什么。

一切似乎都按预期进行。

我们再一次进入下一行。

繁荣!

不知为何,我们最终却到达了代码库的一个完全不同的位置?

VSCode 文件路径截图

看起来我们在设置对象时创建了一个错误iduser这是怎么发生的?

让我们index.js再次打开,将断点移动到第 16 行,然后按F5让调试器运行到事件循环的末尾。

然后使用 cURL 重新发送请求,以查看在我们尝试设置之前发生了什么user.id

当我们查看侧边栏中的“变量/块”类别时,我们可以看到我们的user对象实际上是undefined!如果我们打开“变量/本地”类别,我们也可以看到原因。

VSCode 侧边栏截图

我们的body有一个users属​​性,但是我们尝试在第 15 行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 是一项简单的任务。我们只需要设置一个断点,无需任何额外的代码。

它为我们提供了许多开箱即用的运行时见解,包括:

  • 当前变量的值
  • 观察单个变量的能力
  • 当前调用堆栈
  • 当前加载的脚本

原文地址:https://www.moesif.com/blog/technical/debugging/Debugging-a-Node-JS-Express-API-in-VS-Code-Debugger/