为什么
当我们创建软件时,我们很少不出错。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类别,其中有各种子类别,如Block和Local。让我们打开Local,看看里面有什么。
我们可以看到,我们有两个局部变量,body ,它的类型是Object ,response ,它的类型是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是一项简单的任务。我们只需要设置一个中断点,不涉及额外的代码。
它为我们提供了许多开箱即用的运行时洞察力,包括。
- 当前变量的值
- 观察单个变量的能力
- 当前的调用堆栈
- 当前加载的脚本