在VS代码调试器中调试一个Node js Express API

386 阅读4分钟

为什么

当我们创建软件时,我们很少不出错。API的创建也不能免俗,所以我们迟早会需要调试它。在JavaScript中,调试任务的第一站往往是记录到控制台,但使用调试器可以给我们带来更综合的体验。

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

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

什么

Express是一个*"Nodejs的极简网络框架"。*它允许我们将函数直接链接到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中间件;它允许我们访问存储在POST HTTP请求正文中的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
<!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 APIs非常简单。

我们检查我们要调试的端点,并该端点触发的函数中设置一个断点。这可以通过左键点击左边的行号来完成。让我们把它放在第15行,这应该是我们的POST /users 端点函数的第一行。

然后,我们通过点击顶部菜单的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类别,其中有各种子类别,如BlockLocal。让我们打开Local,看看里面有什么。

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

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

一切似乎都按预期进行。

让我们再次跳到下一行。

砰!"。

不知为什么,我们在代码库的一个完全不同的地方结束了?

似乎我们在设置user 对象的id 时产生了一个错误,这怎么会发生呢?

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

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

当我们查看VARIABLES/Block类别中的侧边栏时,我们可以看到我们的user 对象实际上是undefined!如果我们打开VARIABLES/Local类别,我们也可以看到原因。

我们的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是一项简单的任务。我们只需要设置一个中断点,不涉及额外的代码。

它为我们提供了许多开箱即用的运行时洞察力,包括。

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

用Moesif获得以用户为中心的API日志

了解更多