Hoppscotch：基于浏览器的开源 API 工具

FreeGuideOnline 最新 2026-07-01

什么是 Hoppscotch？

Hoppscotch 是一款轻量级、基于浏览器的开源 API 开发工具。它运行在浏览器中，无需安装任何客户端，即可帮助你快速构建、测试和调试 HTTP 请求，同时支持 WebSocket、Socket.IO、GraphQL 等协议。因为它是完全开源的，你可以放心地使用、贡献代码，甚至自己部署。

与 Postman 等桌面工具相比，Hoppscotch 最大的特点是：

  • 开箱即用：打开浏览器就能工作，不占用本地资源。
  • 隐私优先：数据默认保存在浏览器本地，不会上传到云端（你也可以选择登录同步）。
  • 完全免费：没有付费墙，所有功能对所有人开放。

环境准备与访问方式

直接使用在线版

访问官方网站：https://hoppscotch.io
页面加载后，你会看到清爽的操作界面，左侧是请求历史和环境变量，中间是请求编辑区，右侧是响应查看区。

自行部署（可选）

如果你需要完全控制数据，可以克隆仓库并使用 Docker 部署：

docker run -d --name hoppscotch -p 3000:3000 hoppscotch/hoppscotch:latest

然后访问 http://localhost:3000 即可。对于绝大多数初学者，直接使用在线版就足够了。

界面快速导览

打开 Hoppscotch 后，你会看到几个核心区域：

  • 顶栏：域名输入框、HTTP 方法选择器（GET/POST/PUT 等）、发送按钮。
  • 请求编辑区：参数（Params）、请求体（Body）、Headers、认证（Authorization）等标签页。
  • 侧边栏：历史记录（History）、集合（Collections）、环境变量（Environments）。
  • 右面板：状态码、响应时间、响应体预览（支持代码高亮）。

熟悉这些区域后，你就可以开始构建第一个 API 请求了。

发送第一个 GET 请求

下面我们用公共的 JSONPlaceholder 接口来演示一个完整的 GET 请求流程。

  1. 在顶栏的 URL 输入框 中填入： 
    https://jsonplaceholder.typicode.com/posts/1
  2. 确认左侧的 HTTP 方法选择器为 GET。
  3. 点击右侧 Send 按钮（或按键盘 Ctrl+Enter）。
  4. 右侧面板会显示服务端返回的 JSON 数据，例如： 
    {
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere...",
  "body": "quia et suscipit..."
}
  5. 同时你会看到状态码 200 OK 和响应时间。

如何在 GET 请求中附加参数？

切换到底部 Params 标签页，点击 Add New:

  • 键（Key）：userId
  • 值（Value）：1 接着将请求 URL 改为：
https://jsonplaceholder.typicode.com/posts

发送请求后，你会看到属于 userId=1 的所有帖子列表。Hoppscotch 会自动将参数追加到查询字符串中。

发送 POST 请求并传递 JSON 数据

POST 请求常用于提交数据，下面我们模拟创建一条新帖子。

  1. 将方法切换为 POST。
  2. URL 填入： 
    https://jsonplaceholder.typicode.com/posts
  3. 进入 Body 标签页，选择内容类型为 application/json（通常是默认选项）。
  4. 在编辑框中输入要发送的 JSON： 
    {
  "title": "我的第一条帖子",
  "body": "这是一篇通过 Hoppscotch 创建的测试帖子。",
  "userId": 1
}
  5. 点击 Send。
    右侧会返回创建成功的响应，状态码为 201 Created，并附带一个 id 字段（通常为 101，因为这是模拟接口）。

其他常用 Body 类型

  • Form Data：适合上传文件或表单字段。
  • x-www-form-urlencoded：适合简单表单提交。
  • GraphQL：直接编写 GraphQL 查询并发送。

设置请求头与授权

很多 API 要求在 Headers 中携带额外信息，例如认证 Token。

添加自定义 Header

在 Headers 标签页中：

  1. 点击 Add New。
  2. 键输入 Authorization，值输入 Bearer my-token-123。
  3. 发送请求时，该头信息会自动附加。

使用 Authorization 标签页

Hoppscotch 为常见认证方案提供了快捷设置。点击顶部的 Authorization（或 Body 旁的 Auth 标签），可选择：

  • None：无认证。
  • Basic Auth：直接填写用户名和密码。
  • Bearer Token：粘贴你的 JWT 令牌。
  • OAuth 2.0：配置授权流程（部分需要配合浏览器重定向）。

选择 Bearer Token，在输入框中填入令牌值，Hoppscotch 会自动生成对应的 Authorization 头部，避免手动拼写错误。

管理环境变量

在开发不同阶段，你需要频繁切换基础 URL 或 API Key。Hoppscotch 的环境变量功能可以轻松解决这个问题。

创建环境

  1. 点击左侧边栏的 Environments 图标（文件夹形状）。
  2. 选择一个已有的环境（例如 “My Environment”），或者点击 New Environment 创建新环境。
  3. 在环境编辑页面中添加变量，例如：
    • 变量名：base_url
    • 初始值：https://jsonplaceholder.typicode.com
    • 当前值：（与初始相同）

在请求中使用变量

现在你的所有请求地址都可以写成：

<<base_url>>/posts/1

双尖括号 <<variable>> 表示引用环境变量。当你需要切换测试环境和生产环境时，只需修改环境变量的值，而不需要逐个调整请求 URL。

环境变量不仅可用于 URL，还可以用在 Headers、Body 等任何地方。

组织请求：集合与历史

Collections 集合

类似于 Postman 的集合，Hoppscotch 也支持将相关请求分组保存。

  1. 点击侧边栏的 Collections。
  2. New Collection 创建一个新的集合，命名为 “JSONPlaceholder 练习”。
  3. 在集合内点击 New Request，可以将当前正在编辑的请求保存到集合中。
  4. 可以按文件夹结构组织，方便日后复用。

History 历史记录

每次发送的请求都会自动保存在 History 中，你可以直接点击历史记录快速还原请求，再进行二次修改。不需要手动保存，非常适合临时测试。

代码生成与导出

当你调试好一个 API 之后，可能需要把它转换成各种编程语言对应的客户端代码。Hoppscotch 内置了代码生成器。

  1. 在请求编辑区右侧，点击 </> Code Snippet 图标。
  2. 弹出的窗口中可以看到多种语言和库的实现：curl、JavaScript (Fetch)、Python (Requests)、Go、Java 等。
  3. 选择你需要的语言，复制代码即可直接粘贴到项目中。

例如，上面的 POST 请求转换成 Python 代码可能如下：

import requests
import json

url = "https://jsonplaceholder.typicode.com/posts"
payload = json.dumps({
  "title": "我的第一条帖子",
  "body": "这是一篇通过 Hoppscotch 创建的测试帖子。",
  "userId": 1
})
headers = {
  'Content-Type': 'application/json'
}
response = requests.post(url, headers=headers, data=payload)
print(response.text)

进阶功能：WebSocket 与 GraphQL

Hoppscotch 不仅仅是一个 REST 客户端，它还内置了其他常用协议支持。

测试 WebSocket

  1. 点击左侧边栏的 Realtime 图标（两个方向箭头），然后选择 WebSocket。
  2. 输入 WebSocket 服务地址，例如 Echo 测试服务：wss://echo.websocket.org
  3. 点击 Connect，连接成功后可以在消息输入框发送文本，服务器会原样返回。
  4. 支持查看帧、自动重连等选项。

GraphQL 请求

  1. 将顶部协议切换为 GraphQL。
  2. 输入 GraphQL 服务端点，例如 https://countries.trevorblades.com/graphql。
  3. 在 Query 编辑区编写查询： 
    query {
  countries {
    name
    emoji
  }
}
  4. 点击 Send，右侧会返回国家列表。

这让你在一个工具中完成 REST、GraphQL 和实时通信的测试，极大提升了开发效率。

常见问题与注意事项

  • 跨域问题：由于浏览器安全策略，一些 API 如果不是 CORS 允许的，可能在浏览器中无法直接调用。这并非 Hoppscotch 的问题，你可以尝试使用服务器中间件，或使用 Hoppscotch 的桌面应用版（PWA 或通过 Electron 打包的版本）。
  • 数据持久化：默认数据存储在浏览器的 IndexedDB 中，清除浏览器数据可能导致历史记录丢失。你可以注册 Hoppscotch 账号并登录，将集合和环境同步到云端。
  • 离线使用：Hoppscotch 可以作为 PWA 安装，在无网络时也能使用基础功能。点击浏览器地址栏右侧的安装图标即可。

总结

Hoppscotch 是一款集合了 HTTP 客户端、环境管理、代码生成、多协议支持为一体的开源工具。极低的入门门槛和完全免费的体验，使它成为初学者学习 API 交互、老手日常调测接口的理想选择。现在打开 hoppscotch.io，用五分钟时间跟着教程发送你的第一个请求，你很快就会爱上这种流畅的开发体验。