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

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

下午三点，后端同事说"接口马上好"，你对着浏览器里的 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 转换模式给你完整的脚本能力：

constdata=JSON.parse(originalResponse);// 根据请求参数动态调整if(context.url.includes('vip')){data.level='premium';}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 参数——不用担心?v=123导致匹配失败。

• 暗黑模式 + 四国语言：中日英韩完整翻译，浅色/暗黑主题切换。对深夜加班的同学比较友好。

• 纯原生实现，零 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 ⭐，或者分享给你的队友们。