Fiddler AutoResponder 实战：接口 Mock 与前端联调

后端接口还没写好，前端却要联调；线上出了 bug，想把某个 JS 换成本地改好的版本验证一下——这些场景都不需要改服务器，Fiddler 的 AutoResponder（自动响应器）就能搞定。它的本质是：在请求到达服务器之前拦截，用你指定的内容直接返回。下面用几个真实场景把它讲透。

一、AutoResponder 的工作原理

Fiddler 作为系统代理，所有 HTTP(S) 请求都经过它。开启 AutoResponder 后，每个请求都会先和你配置的规则列表逐条比对：一旦某条规则的"匹配条件"命中，Fiddler 就执行该规则的"动作"（返回本地文件、重定向、返回状态码等），请求根本不会真正发到线上服务器；没命中的请求则正常放行。理解这一点，后面所有用法都顺理成章。

二、基础配置（务必先做对这两个勾选）

  1. 点开 Fiddler 右侧的 AutoResponder 标签页。
  2. 勾选 Enable rules——总开关，不勾一切规则都不生效。
  3. 勾选 Unmatched requests passthrough——这个非常关键。勾上表示"没匹配到规则的请求正常放行"；不勾的话，凡是没写规则的请求会被 Fiddler 返回 404，页面直接崩给你看。新手最常见的坑就是忘了勾它，导致整个网站打不开。

三、场景一：后端没就绪，用本地 JSON 做接口 Mock

这是最高频的用法。假设前端要调 https://api.example.com/user/profile，但后端还没上线。

  1. 先在本地建一个文件 D:\mock\profile.json，写好约定的返回结构：
    { "code": 0, "data": { "id": 1001, "name": "张三", "vip": true } }
  2. 在 AutoResponder 点 Add Rule，上方"匹配"框填 EXACT:https://api.example.com/user/profile。
  3. 下方"动作"框选择 Find a file...，指定刚才的 profile.json。
  4. 点 Save。刷新页面，前端拿到的就是你的 Mock 数据。

一个必须注意的坑：用本地文件返回时，响应头 Content-Type 可能被识别成 text/plain，导致前端 response.json() 解析失败。解决办法有两个：一是把文件命名为 .json 后缀（Fiddler 会据此推断类型），二是改用后面提到的脚本方式手动设置响应头。

四、场景二：把线上 JS/CSS 替换成本地文件调试

线上某个页面报错，你怀疑是某个 JS 的问题，改好了想直接在线上环境验证，而不是重新发布。

  1. 匹配框填 regex:.+/app\.[0-9a-f]+\.js$——用正则匹配那个带 hash 的打包文件（线上 JS 文件名常带指纹，写死没法匹配，正则最合适）。
  2. 动作框指向你本地改好的 app.js。
  3. 保存后刷新线上页面，加载的就是你的本地脚本了。

这招在排查"线上才复现、本地不复现"的问题时价值极高：你可以在本地脚本里加 console.log 甚至 debugger，直接在真实线上数据下断点调试。

五、场景三：模拟接口异常，测前端容错

产品要求"接口 500 时要弹友好提示"，但线上接口一直是正常的，怎么测？AutoResponder 可以直接伪造异常响应。

  • 匹配 api.example.com/user/profile，动作直接选择 Fiddler 内置的 *drop（直接断开连接，模拟网络中断）或 *delay:5000（延迟 5 秒，测超时/loading）。
  • 想返回特定状态码，动作填 *status:503，前端就会收到 503。
  • 这些 * 开头的都是 Fiddler 内置的"魔法动作"，在动作下拉框里能看到完整列表，包括 *redir（重定向）、*reset（重置连接）等。

六、匹配规则语法速查（配真实例子）

  • EXACT:https://api.example.com/login —— 完全精确匹配，连 query 都要一致。
  • api.example.com/login —— 不写前缀就是包含匹配，只要 URL 里出现这段就命中，最常用。
  • regex:.*\.(png|jpg|gif)$ —— 正则匹配所有图片请求。regex 前缀后面是标准正则，注意要匹配整条 URL。
  • NOT: 前缀 —— 取反，匹配"不包含"某段的请求。

规则顺序很重要：Fiddler 从上往下匹配，命中第一条就停止。所以把更精确的规则放上面，宽泛的（比如正则通配）放下面，否则会被前面的宽规则"截胡"。规则可以直接拖动排序。

七、更进一步：用 Import 保存与共享规则

配好的一整套规则可以通过 AutoResponder 面板的导出功能存成 .saz / .farx 文件，团队其他人 Import 进来即可复用同一套 Mock 环境。联调一个复杂需求时，把 Mock 规则文件提交到仓库，所有前端拉下来就能在无后端的情况下独立开发。

八、小结

AutoResponder 的价值在于把"改服务器才能验证"的事情，变成"本地几分钟配置就能验证"。记住三个要点就能上手：先勾 Enable rules + Unmatched passthrough、精确规则在上宽泛规则在下、返回本地文件注意 Content-Type。用熟之后，它几乎能覆盖前端联调、线上调试、异常测试的所有场景，是 Fiddler 里性价比最高的功能，没有之一。