Hoppscotch安装配置教程3条命令跑通你的第一个API请求【免费下载链接】hoppscotchOpen-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem Cloud • Web, Desktop CLI • Open-Source Alternative to Postman, Insomnia项目地址: https://gitcode.com/GitHub_Trending/ho/hoppscotchHoppscotch 是一款开源的 API 测试工具装好它你就能在浏览器或桌面端里发送 REST 请求、调试 GraphQL、连接 WebSocket还能管理环境变量和请求集合全程免费不需要像 Postman 那样注册付费。先认识一下这个工具Hoppscotch 是一个开源的 API 开发平台一个界面里同时支持 REST、GraphQL、WebSocket、Socket.IO、MQTT 五种协议后几种分别对应 GraphQL 查询语言、实时消息、物联网消息传输并且可以导出 Postman、Insomnia 格式的集合。角色典型用法后端开发者调试自己写的接口看状态码、响应头、耗时前端工程师调第三方 API管理多套环境变量团队自托管后端共享集合与团队工作区最快上手3分钟跑通第一个请求不想看长文的话这三条命令就够了# 克隆源码仓库 git clone https://gitcode.com/GitHub_Trending/ho/hoppscotch # 进入目录并安装依赖项目强制使用 pnpm见下方说明 cd hoppscotch pnpm install # 启动 Web 版开发服务器 pnpm --filter hoppscotch/selfhost-web dev跑完后浏览器打开http://localhost:3000看到左侧集合树、右侧请求编辑区就是主界面了。在 URL 栏输入https://echo.hoppscotch.io点 Send下方会立刻返回你这次请求的完整回显——恭喜第一个 API 请求已经发出去了。完整安装与配置1. 环境检查CLI 子包要求 Node.js ≥ 22建议直接装最新的 LTS 版本装完用node -v确认一下。依赖管理强制使用 pnpmpackage.json里有preinstall钩子拦截其他包管理器没有的话先执行# 全局安装 pnpm npm install -g pnpm2. 环境变量配置复制根目录的.env.example为.envWeb 端和自托管后端都读它。里面主要两组值VITE_BASE_URL、VITE_BACKEND_GQL_URL等决定 Web 前端连哪个后端默认指向本地http://localhost:3170DATABASE_URL、DATA_ENCRYPTION_KEY数据库连接和 32 位加密密钥只在启用后端时需要只玩 Web 版.env保持默认值即可请求、集合、历史都存在本地浏览器里。3. 生产构建与预览开发用dev交付给团队时建议构建一次# 生产构建 Web 版构建脚本已自带 8GB 内存上限 pnpm --filter hoppscotch/selfhost-web build # 本地预览构建产物 pnpm --filter hoppscotch/selfhost-web preview4. 可选自托管后端团队功能想登录、团队共享、云同步就需要后端服务。仓库自带 Docker Compose 一键编排# 启动后端 Postgres 数据库数据库端口映射 5432、后端 3170 docker compose --profile default up -d启动后在 Web 端左上角实例菜单里 Add an instance填入你的后端地址就能切换到自己搭的实例。进阶玩法切换协议把 URL 栏左边的GET下拉换成WS、MQTT、GQL等输入栏会立刻变成对应协议的连接表单。想深入看实现可以翻 packages/hoppscotch-common/src/helpers/ 下的rest、graphql、realtime子目录。环境与测试脚本右侧 Variables 面板建一套开发/生产环境URL 里写{{baseUrl}}即可自动替换每个请求还能挂 Pre-request Script 和 Tests用 JS 做前置处理和断言。命令行跑测试仓库内置 CLI把导出的集合 JSON 丢给hopp test collection.json就能在 CI 里回放整个集合脚本执行细节见 packages/hoppscotch-cli/。避坑清单现象npm install 直接报错退出。原因package.json里only-allow pnpm钩子拒绝其他包管理器。 修复npm i -g pnpm后改用pnpm install。现象打开 3000 端口显示的是别的项目。原因默认端口被占用。 修复改 packages/hoppscotch-selfhost-web/vite.config.ts 中server.port重启 dev。现象请求被浏览器 CORS 拦截。原因对方 API 没有放行你当前的浏览器域名。 修复设置页打开 Proxy 模式让请求经官方代理中转这是官方给浏览器的标准解法。现象生产构建时 Node 进程被 OOM 杀掉。原因Vite 打包前端依赖时内存峰值高。 修复手动跑构建时加上node --max_old_space_size8192仓库自带的 build 脚本已经这么做了别绕过它直接用裸 vite。现象pnpm install 后页面报 GraphQL 相关错误。原因前端代码在postinstall阶段靠.env里的 schema 地址生成类型缺文件会静默失败。 修复确认.env已从.env.example复制然后重跑一次pnpm install。下一步想继续深入官方文档在 docs.hoppscotch.io源码层面前端所有组件和逻辑集中在 packages/hoppscotch-common/src/后端各业务模块在 packages/hoppscotch-backend/src/按目录名直接找就行。【免费下载链接】hoppscotchOpen-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem Cloud • Web, Desktop CLI • Open-Source Alternative to Postman, Insomnia项目地址: https://gitcode.com/GitHub_Trending/ho/hoppscotch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考