后端接口挂了，前端怎么继续干活？这个 Chrome 扩展让我再也没等过后端

一个零依赖、纯浏览器的响应改写工具让你的页面数据随时可控。你有没有过这样的经历——下午三点后端同事说接口马上好你对着浏览器里的 500 干瞪眼。UI 写好了逻辑写好了就差数据联调偏偏卡在这一步。要么等要么临时写一堆if (!data) return mockData的脏代码回头还得记得删。我之前也是这样。直到我受不了了写了一个 Chrome 扩展ResponseRewriter。它做了什么一句话你在浏览器里看到的任何 XHR/Fetch 请求的返回值都可以被接管、替换、改写。不需要改一行后端代码不需要起 Mock 服务不需要配 hosts 或者代理。装好扩展写一条 JSON 规则刷新页面——页面里展示的就是你想让它展示的数据。四个场景四种用法1. 后端接口挂了 → 整段替换最常见的场景。后端 500前端没法继续调。在 ResponseRewriter 里新建一条规则URL 匹配方式选包含填/api/user/profile响应处理选整段替换内容填{code:0,data:{name:张三,role:admin}}刷新页面你的前端收到的就是这段 JSON。跟真实接口返回的一模一样。2. 只想改几个字段 → JSON 合并有时候接口能通但你想看看某个字段改成极端值会不会崩溃。比如把balance改成-1把status改成999。JSON 合并模式只覆盖你指定的字段其余原样保留。不用拷贝整个响应体再改一个对象写清楚要覆盖什么就够了。3. 想根据原响应动态计算 → JS 转换某些场景下你想基于原始返回值做逻辑处理——加密、拼接、条件替换。JS 转换模式给你完整的脚本能力constdataJSON.parse(originalResponse);// 根据请求参数动态调整if(context.url.includes(vip)){data.levelpremium;}returndata;你能拿到originalResponse和context包含 URL、方法等请求信息想怎么算怎么算。4. 接口还没写好 → Mock 拦截最爽的功能。Fetch 请求直接在浏览器层面被拦截连网络请求都不会发出。DevTools 的 Network 面板里根本看不到这条请求。就像这个接口从来没被调用过——页面直接拿到了你预设的返回值。后端连接口定义都还没出的阶段前端就能把整个页面调通。为什么不用 Postman Mock / Whistle / Charles这些工具都很优秀但 ResponseRewriter 解决了一个根本差异零切换。Postman Mock 需要你在 Postman 和浏览器之间来回切Whistle 和 Charles 要配代理、装证书Mock 服务要起一个额外的进程。ResponseRewriter 就在你调试的页面里工作。页面代码感知到的就是改写后的数据跟真实网络返回没有任何区别。你不需要离开当前页面不需要改系统设置。而且规则就是一条 JSON——你可以导出、发到群里、存到 Git 仓库。队友导入就能用零配置。几个我特别满意的细节拦截日志 命中对比每次命中都有完整的原始→改写对比记录JSON 自动格式化去噪。改了哪里一目了然。不用再对着控制台猜现在用的是真实数据还是 mock 数据。规则执行顺序可拖拽排序多条规则命中同一个请求时按列表顺序依次处理。上下拖动就能调整优先级或者按键Alt↑/↓。URL 匹配三种模式精确匹配、包含匹配、正则匹配。而且全部自动忽略 URL 参数——不用担心?v123导致匹配失败。暗黑模式 四国语言中日英韩完整翻译浅色/暗黑主题切换。对深夜加班的同学比较友好。纯原生实现零 npm 依赖整个项目没有node_modules。node --test直接跑 69 项测试。不装 Node 也能用——clone 下来直接加载到 Chrome。隐私优先扩展首次启用拦截前会明确说明并征得同意。所有数据只存在本机chrome.storage.local日志最多存 100 条没有任何数据会发出去。你可能会关心的问题安全吗扩展只申请了storage和all_urls两个权限——一个存数据一个让注入脚本能在调试页面运行。不读浏览历史不碰 Cookie。JS 转换脚本在页面上下文执行请只用自己的可信脚本。隐私政策完整透明代码在 GitHub 开源。能改二进制数据吗不能。目前定位是文本响应JSON / XML / HTML 等二进制文件图片、视频、字体不适合用这个工具改。适合线上用吗这是一个开发测试工具不建议在包含敏感数据的生产页面上持续启用。用完就关。装一个试试开源地址https://github.com/FutaoSmile/ResponseRewriter安装方式clone 项目 → Chrome 打开chrome://extensions/→ 开启开发者模式 → 加载已解压的扩展程序 → 选择项目目录。首次安装会自动带入 4 条示例规则和示例日志不配也能看懂用法。Chrome 114 可用MIT 开源。前端开发最大的时间浪费之一就是在等后端接口。把这个等待时间彻底干掉就是 ResponseRewriter 存在的理由。不管你是前端开发、测试、还是偶尔需要改一下页面数据的任何角色这个工具都值得装一个。如果你觉得它有用欢迎给个 Star ⭐或者分享给你的队友们。