当前位置：首页 > news >正文

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

news 2026/7/31 4:49:17

一个零依赖、纯浏览器的响应改写工具，让你的页面数据随时可控。

你有没有过这样的经历——

下午三点，后端同事说"接口马上好"，你对着浏览器里的 500 干瞪眼。UI 写好了，逻辑写好了，就差数据联调，偏偏卡在这一步。要么等，要么临时写一堆if (!data) return mockData的脏代码，回头还得记得删。

我之前也是这样。直到我受不了了，写了一个 Chrome 扩展：ResponseRewriter。

一句话：你在浏览器里看到的任何 XHR/Fetch 请求的返回值，都可以被接管、替换、改写。

不需要改一行后端代码，不需要起 Mock 服务，不需要配 hosts 或者代理。装好扩展，写一条 JSON 规则，刷新页面——页面里展示的，就是你想让它展示的数据。

最常见的场景。后端 500，前端没法继续调。在 ResponseRewriter 里新建一条规则：

刷新页面，你的前端收到的就是这段 JSON。跟真实接口返回的一模一样。

有时候接口能通，但你想看看某个字段改成极端值会不会崩溃。比如把balance改成-1，把status改成999。

JSON 合并模式只覆盖你指定的字段，其余原样保留。不用拷贝整个响应体再改，一个对象写清楚要覆盖什么就够了。

某些场景下，你想基于原始返回值做逻辑处理——加密、拼接、条件替换。JS 转换模式给你完整的脚本能力：

constdata=JSON.parse(originalResponse);// 根据请求参数动态调整if(context.url.includes('vip')){data.level='premium';}returndata;

你能拿到originalResponse和context（包含 URL、方法等请求信息），想怎么算怎么算。

最爽的功能。Fetch 请求直接在浏览器层面被拦截，连网络请求都不会发出。DevTools 的 Network 面板里根本看不到这条请求。就像这个接口从来没被调用过——页面直接拿到了你预设的返回值。

后端连接口定义都还没出的阶段，前端就能把整个页面调通。

这些工具都很优秀，但 ResponseRewriter 解决了一个根本差异：

零切换。

Postman Mock 需要你在 Postman 和浏览器之间来回切；Whistle 和 Charles 要配代理、装证书；Mock 服务要起一个额外的进程。

ResponseRewriter 就在你调试的页面里工作。页面代码感知到的就是改写后的数据，跟真实网络返回没有任何区别。你不需要离开当前页面，不需要改系统设置。

而且，规则就是一条 JSON——你可以导出、发到群里、存到 Git 仓库。队友导入就能用，零配置。

拦截日志 + 命中对比：每次命中都有完整的原始→改写对比记录，JSON 自动格式化去噪。改了哪里，一目了然。不用再对着控制台猜"现在用的是真实数据还是 mock 数据"。
规则执行顺序可拖拽排序：多条规则命中同一个请求时，按列表顺序依次处理。上下拖动就能调整优先级，或者按键Alt+↑/↓。
URL 匹配三种模式：精确匹配、包含匹配、正则匹配。而且全部自动忽略 URL 参数——不用担心?v=123导致匹配失败。
暗黑模式 + 四国语言：中日英韩完整翻译，浅色/暗黑主题切换。对深夜加班的同学比较友好。
纯原生实现，零 npm 依赖：整个项目没有node_modules。node --test直接跑 69 项测试。不装 Node 也能用——clone 下来直接加载到 Chrome。
隐私优先：扩展首次启用拦截前会明确说明并征得同意。所有数据只存在本机chrome.storage.local，日志最多存 100 条，没有任何数据会发出去。