必须通过手动配置实现网络请求的Mock覆盖,因Firefox未内置类似Chrome的Local Overrides功能,需借助Requestly扩展、WebExtensions脚本、mitmproxy代理或Firefox远程调试协议等方案拦截并替换响应。
如果您在使用火狐浏览器(Firefox)进行前端开发时,需在不依赖真实后端服务的情况下测试接口行为、验证错误处理逻辑或模拟特定响应状态,则必须通过手动配置实现网络请求的Mock覆盖。Firefox 本身未内置类似 Chrome 的 Local Overrides 功能,但可通过扩展与开发者工具组合方式达成等效效果。以下是具体操作步骤:
一、安装并配置Requestly扩展实现请求拦截与响应替换
Requestly 是一款支持 Firefox 的开源扩展,提供可视化规则配置能力,可精准拦截指定 URL 的请求,并返回自定义 JSON、HTML 或文本响应,无需修改代码或启动本地服务。
1、访问 Firefox Add-ons 官网,搜索并安装 Requestly 扩展。
2、点击浏览器右上角 Requestly 图标,选择 Open Dashboard 进入规则管理界面。
3、点击 Create Rule → 选择 Modify Response → 在 Match URL 字段中输入目标接口路径(如 https://api.example.com/v1/user),支持正则匹配与通配符。
4、在 Response Body 中粘贴 Mock 数据(例如 {"code":0,"data":{"id":123,"name":"测试用户"}}),设置 Status Code 为 200,Content-Type 为 application/json。
5、启用该规则,刷新网页,Network 面板中对应请求将显示状态码 200 且响应体为所设内容。
二、使用WebExtensions API编写轻量级内容脚本注入Mock逻辑
对于需高度定制化响应生成逻辑(如根据请求参数动态返回不同数据)的场景,可编写简易内容脚本,在页面加载前拦截 fetch/XHR 调用并重写其 Promise 返回值,绕过真实网络层。
1、新建文件夹作为临时扩展根目录,创建 manifest.json 文件,声明 "webRequest","webRequestBlocking","" 权限。
2、在 manifest.json 中注册 content_scripts,匹配目标站点域名,并注入 mock-inject.js。
3、在 mock-inject.js 中重写 window.fetch 函数:当 URL 匹配预设路径时,直接返回 resolve({ json: () => Promise.resolve(mockData) }),否则调用原生 fetch。
4、在 Firefox 地址栏输入 about:debugging#/runtime/this-firefox,点击“临时载入扩展”,选择该文件夹完成加载。
5、刷新目标网页,开发者工具 Console 中执行 fetch('/api/user').then(r => r.json()).then(console.log) 可验证返回是否为 Mock 数据。
三、结合Firefox开发者工具Network面板与本地代理实现响应劫持
利用外部代理工具(如 mitmproxy 或 Charles Proxy)截获 Firefox 发出的请求,实时修改响应内容并回传,适用于需复现复杂 HTTP 头部、重定向链或二进制响应的调试场景。
1、下载并运行 mitmproxy,确认其监听地址为 127.0.0.1:8080,并在终端中启动命令 mitmproxy --mode upstream:http://127.0.0.1:8080。
2、在 Firefox 设置中进入 Network Settings → Manual proxy configuration,填写 HTTP Proxy 为 127.0.0.1,Port 为 8080,勾选 Use this proxy server for all protocols。
3、在 mitmproxy 界面中按下 F2 键启用拦截模式,输入过滤表达式 ~u api/user 定位目标请求。
4、选中请求后按 e 编辑响应,切换至 Response Body 标签页,替换为所需 JSON 内容,按 Enter 提交修改。
5、在 Firefox 中刷新页面,Network 面板中该请求将显示被代理修改后的响应,Timing 显示为本地延迟而非真实网络耗时。
四、启用Firefox远程调试协议配合Node.js中间件注入Mock响应
通过 Firefox 的 remote debugging 接口连接到运行中的浏览器实例,监听 network event 并在请求发出前注入自定义响应,适合集成进自动化测试流程或 CI 环境。
1、启动 Firefox 时添加参数 -start-debugger-server 6000,或在 about:config 中将 devtools.debugger.remote-enabled 设为 true。
2、使用 Node.js 安装 firefox-client 库,建立 WebSocket 连接至 ws://127.0.0.1:6000。
3、调用 attachNetworkMonitor() 方法监听 Network.requestWillBeSent 事件,对匹配 URL 的请求调用 mockResponse() 方法返回伪造响应对象。
4、在响应对象中设置 status、headers、content(base64 编码的字符串)字段,确保 Content-Length 正确计算。
5、运行脚本后,打开目标网页,Network 面板中对应请求右侧将显示 [Mocked] 标识,响应体即为注入内容。
