Hoppscotch：让 API 测试变得超简单的开源神器

如果你还在为测试 API 而烦恼，今天要介绍的这个工具绝对能让你眼前一亮。**Hoppscotch** 是一个开源的 API 测试工具，GitHub 上已经有超过 73K 的 Star，完全可以媲美 Postman，但它更轻、更快、还免费！

虽然是网页版，但功能一点不含糊：
- 支持所有 HTTP 方法（GET、POST、PUT、DELETE 等）
- 支持 WebSocket、GraphQL、Socket.IO、MQTT
- 可以设置各种认证方式（Bearer Token、OAuth 2.0 等）
- 支持环境变量和集合管理
- 自动生成多种语言的代码片段


https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.hoppscotch


## 快速上手：搞定你的第一个 API 测试

### 打开就能用
应用启动后，不用登录，立马就能开始测试。

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/6d1caf2a-78b1-4acb-8012-faa5ee48055b.png "image.png")

### 发送你的第一个请求
最简单的例子：
1. 在 URL 栏输入：`https://lazycat.cloud/appstore/category/recent`
2. 选择 GET 方法（默认就是）
3. 点击 "Send" 按钮

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/2023d86c-c9a3-4580-8b7f-7714aad9c46e.png "image.png")
就这么简单，你已经成功发送了第一个请求！响应会立即显示在下方。

### 测试带参数的 POST 请求
实际工作中，我们经常需要发送带数据的请求：

1. 选择 POST 方法
2. 输入你的 API 地址
3. 点击 "Body" 标签
4. 选择 "application/json"
5. 输入你的 JSON 数据，比如：
```json
{
  "username": "testuser",
  "email": "test@example.com"
}
```
6. 点击 Send，搞定！

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/e20afea5-3b37-45a1-9d35-5fc347914831.png "image.png")


## 实用技巧：让你的效率翻倍

### 调整界面主题
点击左侧齿轮图标进入设置，可以：
- 切换深色/浅色模式
- 选择你喜欢的强调色（有 9 种颜色可选）
- 开启 Zen 模式，专注测试
- 调整字体大小

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/d333f7b9-ad3d-41a4-98df-57fdf63f6c84.png "image.png")
晚上加班的时候切换到深色模式，对眼睛友好多了。

### 用集合管理你的 API
如果你的项目有很多 API，每次都重新输入会很麻烦。这时候可以用集合功能：

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/8184131e-7231-4692-a768-00e44d827ff1.png "image.png")
1. 点击左侧的 "Collections" 图标
2. 创建新集合，比如 "用户管理 API"
3. 把相关的请求都保存进去
4. 下次直接点击就能复用

你还可以创建多层文件夹来组织，比如：
```
项目A/
  ├── 用户模块/
  │   ├── 登录
  │   ├── 注册
  │   └── 获取用户信息
  └── 订单模块/
      ├── 创建订单
      └── 查询订单
```

### 使用环境变量
不同环境（开发、测试、生产）的 API 地址不一样？可以使用环境变量来帮忙：

1. 点击右上角的环境选择器
2. 创建新环境，比如 "开发环境"
3. 添加变量：
   - `BASE_URL`: `http://localhost:3000`
   - `API_KEY`: `your-dev-api-key`
4. 在请求中使用 `{{BASE_URL}}/api/users`

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/5c7399ee-6f74-4a8c-b747-5e4bb58242e0.png "image.png")
切换环境只需要一键，所有请求自动更新地址。超方便！

### 自动生成代码
测试完 API 后，要写代码调用？Hoppscotch 帮你生成：

1. 点击 Send 按钮旁边的小箭头
2. 选择 "Show Code"
3. 选择你需要的语言/框架：
   - JavaScript (Axios、Fetch)
   - Python (Requests)
   - PHP (cURL)
   - Go、Ruby、Swift 等等

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/e1927b58-115f-40c7-971e-40eeb0026e71.png "image.png")

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/e8e37558-c983-4470-93ae-c26e0f8b85e8.png "image.png")
直接复制粘贴到你的项目里，省去大量编码时间！


### 方便导入导出
如果你之前用 postman，已经积累了很多请求，可以点击 Export 导出来

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/30e9d524-ab86-451c-bd09-8fe55ccf021e.png "image.png")

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/6bb971b6-7576-4613-ad22-773e024635fc.png "image.png")
然后在 Hoppscotch 里导入

### 浏览器扩展增强体验
安装 Hoppscotch 浏览器扩展可以：
- 绕过 CORS 限制
- 访问本地 localhost 接口
- 测试内网 API

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/101a9df1-5101-4fa7-8054-29a3522cd7c2.png "image.png")

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/92b502b5-cf16-4062-9f05-8b4a1a17707d.png "image.png")

**PWA 应用**：可以安装为桌面应用，获得原生应用体验

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/275ba1a9-cdd1-4baa-b548-65cba7710e6d.png "image.png")

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/b7bab430-47ce-417b-ba71-0d7c5cdd8550.png "image.png")
 

## 总结

Hoppscotch 是一个宝藏工具，免费开源、功能强大、使用简单。不管你是前端、后端还是测试，都能从中受益。最重要的是，它没有任何使用门槛，打开网页就能用。