Hoppscotch 浏览器扩展完整指南：三步装好，快速搞定本地接口调试
【免费下载链接】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
在浏览器里调本地接口，总被 CORS 同源限制卡住？localhost 死活连不上？Hoppscotch 浏览器扩展就是冲这个来的：装进浏览器，直接做 API 调试、本地接口测试和请求拦截，不用额外配置。
⏱️ 30 秒搞懂——浏览器版和网页版、桌面版差在哪
先说结论：三者是同一套产品的不同外壳，不是三个工具。
- 网页版：功能最全，浏览器打开即用，前提是联网。
- 桌面版：完整功能的本地打包版，偏重，适合要彻底离线用的人。
- 浏览器扩展：轻量搭档，功能与网页版保持同步，能直连本地接口、还能抓取浏览器发出的请求，部分功能断网也能用。
一句话：扩展不是替代网页版，而是补上「浏览器里本地调试」这块短板。
📦 三步装好扩展——Chrome、Firefox 入口分开讲
第一步：进商店。Chrome 或其他 Chromium 内核浏览器，打开 Chrome 网上应用店；Firefox 打开附加组件商店，搜「Hoppscotch」。
第二步：确认安装。进详情页，看一眼权限提示（主要涉及读取和发送请求），点「添加至 Chrome」或「添加至 Firefox」。
第三步：固定到工具栏。装完点一下扩展图标旁边的固定按钮，以后不用每次去拼图菜单里翻。
浏览器扩展安装就到这里，全程不到一分钟。
🚀 第一次上手：把本地接口跑起来
最快路径就三个动作：打开扩展 → 填 localhost 地址 → 发请求。
- 点工具栏图标打开扩展，请求类型默认 GET 就行。
- 地址栏里填一个本地地址，比如
http://localhost:3000/user/list。 - 点发送，响应面板里马上能看到状态码、响应体和耗时。
三个核心能力，实际就是这么用起来的：
- 本地接口调试：扩展和本地服务在同一台机器上，localhost 直接指向你自己的机器，不用再做额外配置就能把本地接口打通。
- 请求拦截：前端页面往本地服务发请求时，扩展可以把它们抓下来，逐个查看参数和响应，甚至修改后重新发出。排查时哪里出了问题，一眼就有数。
- 离线支持：断网状态下扩展照常打开，之前保存的请求还能看。只有真正发请求这一步，需要你的本地服务在跑。
如果你的服务是自托管部署的，把地址换成对应的内网地址即可，用法和 localhost 完全一致。
这 4 类人最值得装
- 你是前端开发：本地后端正在迭代，用它做本地接口测试，参数刚改完立刻验证，不用再在浏览器和别的工具之间来回切。
- 你写微服务：服务之间内部通信出了问题，用请求拦截看看线上到底发了什么，哪个环节参数错了，当场定位。
- 你做接口自动化测试：接口改动后先手动跑一轮，确认行为正常，再写进自动化用例，少走弯路。
- 你讲课或带新人：现场演示一个请求怎么发出去、响应怎么回来，比放静态截图直观得多。
🔍 打不开？4 项自查清单
请求发不出去、页面打不开，按这个顺序逐项核对，一分钟定位问题：
- 浏览器版本够新吗：Chrome、Firefox 建议先升到最新版。
- 扩展权限全吗：点地址栏左侧的锁形图标，检查请求相关权限是否打开。
- 本地服务真的在跑吗：新开一个浏览器标签页直接访问同一地址，打不开说明问题在服务端，不在扩展。
- 防火墙拦了吗：检查本地端口有没有被防火墙或安全软件挡住，拿不准就先临时关掉再试。
四项都过了还不行，重启一次浏览器再重新固定扩展。
装 Hoppscotch 浏览器扩展三步，跑通一个本地接口再三步，就是这条完整路径。现在就把它固定到工具栏，对着 localhost 发一个请求试试，比再看一篇教程快得多。
【免费下载链接】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），仅供参考
