Hoppscotch 与 Postman：开源 API 测试指南

**由 Chigozie Oduah 撰写✏️**

想要开发和测试您的 API？Hoppscotch 是一款出色的开源工具，我将解释如何设置它。然后，我将介绍您可以使用 Hoppscotch 测试的 API 以及如何测试它们。之后，我将把它与它的两个替代方案进行比较：OpenAPI DevTools 和 Postman。

如何设置 Hoppscotch

有多种方法可以设置 Hoppscotch，但在本节中，我将介绍桌面应用程序和 Web 客户端，因为它们最有可能是您与之交互的。桌面应用程序是迄今为止最容易设置的。您需要做的就是：

下载文件后，按照您的操作系统的安装过程进行，然后您应该会在应用程序库中看到桌面应用程序。

设置 Hoppscotch Web 客户端

在 Hoppscotch 客户端下载页面上，您可能注意到操作系统选项旁边列出了“Web App”选项。单击“Web App”选项，出现的“打开 Web App”按钮将在新选项卡中打开 Web 客户端。

在默认设置下，Web 客户端仅允许您向互联网上公开的 API 发送请求。这意味着尝试向本地托管的 API（如“localhost”和“127.0.0.1”）发送请求将显示以下错误消息：

发生这种情况的原因是，默认情况下，Web 应用程序的拦截器设置为 Hoppscotch 的代理服务，该服务托管在 `https://proxy.hoppscotch.io/` 上，并且无法访问互联网上无法访问的 API。

要允许访问本地托管的 API，您需要下载 Hoppscotch 浏览器扩展并将其设置为拦截器。您只能在基于 Chrome 和基于 Firefox 的浏览器上安装该扩展，因此需要记住这一点。要安装浏览器扩展，请按照以下步骤操作：

刷新 Web 客户端后，您应该会看到 **浏览器扩展** 选项旁边的文本从 **未报告** 更改为扩展的版本号。

安装扩展程序后，您现在可以向本地可用的 API 和公开可用的 API 发送请求。在下一节中，我将介绍可以使用 Hoppscotch 测试的 API 类型以及如何测试它们。

使用 Hoppscotch 测试 API

在本节中，我将介绍如何使用 Hoppscotch 测试 REST、GraphQL 和 WebSocket API。为了方便起见，我创建了一个包含 API 代码的 GitHub 存储库。

测试 REST API

REST API 旨在允许 Web 应用程序在后端创建、读取、更新和删除数据。

例如，让我们想象一个具有以下功能的基本 RESTful API：

在 REST API 中，创建、读取、更新和删除数据的操作分别使用 POST、GET、PUT 和 DELETE 请求方法表示。

在我们的 API 中，对 `/message` 端点的 POST 和 PUT 请求分别更改和添加文本到对 `/message` 的 GET 请求响应的消息中，而 DELETE 请求允许清除文本。

要向 `/message` 发送 GET 请求，首先需要确保您位于左侧导航窗格中的 **REST** 选项卡中：

然后将端点的URL改为文本框，点击**发送**：

如果我们的 API 托管在“http://127.0.0.1:5000”，则端点的 URL 将是“http://127.0.0.1:5000/message”。

发送 DELETE 请求与发送 GET 请求类似。要发送 DELETE 请求，请将请求方法选项从 **GET** 更改为 **DELETE**，然后单击 **发送**：

向端点发送 POST 请求：

发送 PUT 请求与 POST 请求类似。您需要做的就是将请求方法选项设置为 PUT：

这四种请求方法涵盖了通常使用 REST API 执行的大多数操作，现在您知道如何在 Hoppscotch 中向它们发送请求。现在，让我们介绍一下您可以使用 Hoppscotch 测试的下一种 API：GraphQL API。

测试 GraphQL API

为了使操作与我在上一节中描述的基本 RESTful API 类似，我将制作以下 GraphQL API 模式：

type Query {
    message: String   # get the message
}

type Mutation {
    changeMessage(message: String): String     # change the content of the message
    addText(text: String): String   # append a text to the message
    deleteText: String   # clear the message
}

# 1.
query {
  message
}

# 2.
mutation {
  changeMessage(message: "Hi, world")     # change text to "Hi, world"
}

# 3.
mutation {
  deleteText
}

# 4.
mutation {
  addText(message: ", and all") # Changes "Hi, world" to "Hi, world, and all"
}

编写查询或变异后，单击 **运行** 以将其发送到 API。以下是步骤的直观演示：

现在您已经了解了如何使用 Hoppscotch 测试 GraphQL API。在下一节中，我将介绍如何使用 Hoppscotch 测试实时 WebSocket API。

测试 WebSocket

使用 Hoppscotch 测试 WebSocket API 非常简单。您需要做的就是：

如果成功建立连接，您应该会在**日志**部分看到“已连接到”消息。服务器发送的任何消息也将显示在**日志**部分。您还可以通过在**消息**框中编写要发送到服务器的文本并单击**发送**按钮来向服务器发送消息。

以下动画展示了这些过程：

在 API 的 GitHub 存储库中，WebSocket API 将托管在 `http://127.0.0.1:8080`。它每秒发送当前日期和时间，并在您向其发送消息“end”时停止。

有哪些可以替代 Hoppscotch 的东西？

更好地了解 Hoppscotch 的最佳方法是查看它与同类别的其他工具的比较。因此，在本节中，我将概述两种流行的替代方案：Postman 和 OpenAPI DevTools。

邮差

Postman 是一个用于构建和测试类似 Hoppscotch 的 API 的平台。然而，与 Hoppscotch 不同，Postman 不是开源的，但它提供了 Hoppscotch 所没有的额外功能。但是，有些功能需要遵循他们的订阅计划之一。Postman 提供的一些 Hoppscotch 所没有的功能包括：

但是 Hoppscotch 具有 Postman 所没有的功能，或者免费计划中不可用或受限的功能，包括：

Hoppscotch 和 Postman 之间的选择取决于您是否需要 Postman 独有的功能。如果您不需要任何额外功能，Hoppscotch 是开源的，并且为您提供了更大的灵活性，因此它是一个很好的选择。

OpenAPI 开发者工具

OpenAPI DevTools 是一款 Chrome 扩展程序，可让您记录和监控 Web 应用程序与其 API 的交互方式。OpenAPI DevTools 和 Hoppscotch 的功能类似，但方式不同。

您应该使用这两种工具中的哪一种取决于您需要做什么。例如，如果您正在构建或测试 API，您可能更喜欢使用 Hoppscotch，因为与 OpenAPI DevTools 不同，您可以编写请求将它们发送到 API 以查看它们的作用。Hoppscotch 和 Postman 还允许您运行自动化测试，而 OpenAPI DevTools 则不具备此功能。

但是使用 OpenAPI DevTools，您只能查看 Web 应用程序如何与 API 交互，这有助于了解网站的流程，进而有助于调试和文档编写。

OpenAPI DevTools 还具有生成 OpenAPI 规范的优势，这是一种描述和记录 REST API 的标准化格式。

然而，Hoppscotch 和 OpenAPI DevTools 的工作方式不同，这意味着它们可以一起使用。因此，它们更像是互补工具，而不是完全的替代品。

下一步是什么？

Hoppscotch 使开发和测试 API 变得简单。您可以通过查看其导入器文档页面来了解如何导入数据。

如果您想了解有关 OpenAPI DevTool 的更多信息以及它与 Hoppscotch 或 Postman 的不同之处，您可以继续阅读我之前关于使用 OpenAPI DevTools 探索和测试 API 行为的指南。

监控生产中失败和缓慢的 GraphQL 请求

虽然 GraphQL 具有一些用于调试请求和响应的功能，但确保 GraphQL 可靠地为你的生产应用程序提供资源却变得更加困难。

如果您有兴趣确保对后端或第三方服务的网络请求成功，请尝试 LogRocket。

LogRocket 就像是网页和移动应用的 DVR，可以记录您网站上发生的所有事情。您无需猜测问题发生的原因，而是可以汇总和报告有问题的 GraphQL 请求，以快速了解根本原因。此外，您还可以跟踪 Apollo 客户端状态并检查 GraphQL 查询的键值对。

LogRocket 会对您的应用进行工具化，以记录基准性能时间，例如页面加载时间、第一个字节的时间、慢速网络请求，还会记录 Redux、NgRx 和 Vuex 操作/状态。开始免费监控。