Hoppscotch 浏览器扩展安装与使用教程：打通本地 API 调试的完整指南

Hoppscotch 浏览器扩展安装与使用教程：打通本地 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/hoppscotch

Hoppscotch 浏览器扩展是这款开源 API 开发工具里最容易被忽略、却最实用的一块拼图：装上它，网页版就能直接调通你本地的 localhost 接口，绕开浏览器的跨域拦截。下面从安装、启用、能力边界到排错，带你完整走一遍，把扩展真正用起来。

先说痛点：为什么网页版直接调 localhost 会卡住

你平时用浏览器里的 Hoppscotch 测试接口，发往公网地址都没问题。但一旦目标是本机起的服务，比如localhost:8080，浏览器自带的同源策略和 CORS 检查就会横插一脚：请求要么被拦下，要么返回一堆跨域报错。后端明明活着，前端却调不到，联调时最消耗耐心的就是这种"看不见的原因"。

浏览器扩展干的就是解围的事。它接管了请求的发送环节——网页把请求参数交给扩展，由扩展以更高的网络权限真正发出去。因为扩展运行在浏览器网络层之上，localhost 和跨域资源都不再是障碍。这也是为什么它在官方资料里被一句话概括：扩展专门用来修复 CORS 问题。

从商店安装到发出第一个请求

整个过程不到两分钟，按下面顺序做就行：

1. 打开你浏览器的扩展商店（支持 Chrome 及基于 Chromium 内核的浏览器，Firefox 也有独立版本），搜索Hoppscotch，点击安装。
2. 安装完成后回到 Hoppscotch 网页版，进入设置 → 浏览器扩展。
3. 打开"使用浏览器扩展发送请求（如果已安装）"这个开关。
4. 确认页面上显示的扩展版本号不是"Not Reported"，说明网页和扩展已经握手成功。
5. 新建一个请求，填上本地地址，例如GET http://localhost:8080/health，点发送。状态码回来，就算跑通了。

提示：装完扩展如果状态一直显示"等待中"，刷新一次 Hoppscotch 页面即可，网页侧是靠轮询探测扩展是否存在。

这个扩展到底能帮你做什么

不列功能清单，按"实际帮你省了什么事"来说：

• 本地联调不再绕路：localhost、127.0.0.1 这类地址直接可达，前后端分属两个人开发时，你不用再依赖 curl 或抓包工具。
• 跨域接口能看了：被 CORS 挡住的 API，借扩展之手发出去，响应头、状态码、耗时都能正常呈现。
• 能力与网页版同源：GET、POST、PUT、PATCH、DELETE、HEAD、OPTIONS 全支持，JSON、表单、XML、二进制等请求体都能带，认证方式覆盖 Basic、Bearer Token 和 API Key——你在网页上能配的，走扩展时基本都能用。
• 弱网也能顶一阵：请求链路落在本地浏览器内，部分操作不依赖外网连通，临时没网时调试不至于完全停摆。

想深入看它是怎么接管的，可以翻一下仓库里的 扩展拦截器实现，网页侧所有请求都会经过这里转发给扩展。

一个典型工作流：前端联调本地微服务

想象一个常见场景：你在写前端，后端同事刚把用户服务起在本机，你要反复验证GET /users/:id和POST /users的行为。

1. 在 Hoppscotch 里新建一个集合，命名"本地联调"，把这两个接口各建一张请求卡片。
2. URL 写成本地地址，POST 那张带上 JSON 请求体和必要的认证头。
3. 确认拦截器选的是扩展（设置里开关已打开），连续点发送。
4. 每次改完代码，刷新请求就能看到最新的响应体、状态码和耗时，不用切窗口、不用复制粘贴到终端。

这套流程同样适合教学演示：屏幕共享时，请求参数、响应头、JSON 结构一目了然，学生能完整看到一个 API 调用从头到尾发生了什么。微服务内部通信的排查也是同理——把服务间调用的端点逐一建卡，哪个环节挂了很快就能定位。

报错时先查这三个地方

扩展连不上时，报错信息其实已经把方向指得很清楚，按顺序自查：

如果三个都对，再看基础面：本地服务是否真的在监听预期端口、防火墙或公司代理是否拦了本机连接。仍不行的话，可以对照 扩展设置页组件 里的状态逻辑，看网页侧检测到的到底是"未安装"还是"源未授权"。

它适合谁

如果你的日常是"网页版测 API + 本地后端联调"，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