[JS/TS] Hoppscotch：一个值得关注的开源API测试工具

前两天在GitHub上闲逛，发现了一个挺有意思的项目——Hoppscotch。作为一个经常需要测试接口的开发者，我对这类工具还是比较敏感的。这个项目目前已经有75,000多个star，用户量也突破了250万。

这个工具解决什么问题

说实话，市面上的API测试工具不少，Postman应该是大家最熟悉的。但Postman有个问题，安装包太大了，200多MB，启动也需要等几秒。Hoppscotch走的是另一个路线——直接在浏览器里用，不到5MB，打开就能用。

对于经常需要快速测试接口的场景，这种轻量化的方案确实更方便。

主要功能介绍

支持的协议类型

除了常规的HTTP请求，Hoppscotch还支持：

• WebSocket实时通信测试
• GraphQL接口调试，能自动获取Schema
• Server-Sent Events服务器推送
• Socket.IO实时应用协议
• MQTT物联网消息协议

基本上覆盖了日常开发中常见的通信协议。

认证方式

支持Basic Auth、Bearer Token、OAuth 2.0、API Key等主流认证方式，配置起来比较直观。

环境变量

可以为开发、测试、生产等不同环境配置独立的变量。比如：

开发环境：baseURL = http://localhost:3000
生产环境：baseURL = https://api.example.com

在请求中用{{baseURL}}引用就行，切换环境时会自动替换。

脚本功能

前置脚本：请求发送前执行，可以用来生成签名、设置动态参数等

测试脚本：验证响应结果，比如检查状态码、响应时间、返回数据等

pw.test('状态码是200', () => {
  pw.expect(pw.response.status).toBe(200);
});

代码生成

测试完接口后，可以一键生成JavaScript、Python、Go、Java等10多种语言的请求代码，直接复制到项目里用。

团队协作功能

个人使用之外，Hoppscotch也提供了团队协作能力：

• 创建工作空间，统一管理团队的API集合
• 三级权限控制：Owner、Editor、Viewer
• 支持多人实时协作编辑
• 一键分享请求集合

企业版还有SSO单点登录、审计日志、管理员控制台等功能，支持私有化部署。

如何使用

在线版本

访问 hoppscotch.io 就能用，不需要注册

自己部署

Docker一行命令：

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

或者从源码部署：

git clone https://github.com/hoppscotch/hoppscotch.git
cd hoppscotch
pnpm install
pnpm run dev

技术实现

项目用的是Vue 3 + TypeScript + Tailwind CSS，采用pnpm管理的Monorepo架构。整个代码库有60多万行，结构比较清晰，想学习Vue 3大型项目实践的话可以看看。

作为PWA应用，它支持离线使用，也可以添加到桌面当原生应用用。

性能表现

实际使用下来，确实比Postman轻快不少：

• 应用大小：不到5MB（Postman 200MB+）
• 内存占用：50-100MB（Postman 300-500MB）
• 启动速度：即时打开（Postman需要5-10秒）

适用场景

• 前端开发测试后端接口
• 后端开发调试API功能
• 移动端开发测试RESTful和GraphQL
• 物联网项目的MQTT协议测试
• WebSocket等实时应用调试

一些思考

这个项目的定位挺清晰的——不追求大而全，而是做轻量、快速、够用。对于日常开发来说，这种定位反而更实用。

完全开源也是个优势，可以自己部署，数据完全掌控。对于一些对数据安全有要求的团队来说，这点很重要。

当然，功能上和Postman这种老牌工具比还是有差距的，比如Mock Server、API文档生成等功能还不够完善。不过作为一个快速测试工具，已经够用了。

---

关注「云栈大前端」，一起发现更多实用的开源项目

---

项目地址
https://github.com/hoppscotch/hoppscotch

在线体验
https://hoppscotch.io

官方文档
https://docs.hoppscotch.io

1024程序员节推荐课程  

1️⃣ 课程一(Java全栈) : https://yunpan.plus/t/412

2️⃣ 课程二(Python大数据) : https://yunpan.plus/t/417

3️⃣ 课程三(爬虫+JS逆向) : https://yunpan.plus/t/419

---

标签：#Hoppscotch #Github #API测试工具 #开源项目 #Vue3 #前端开发 #TypeScript