前端别再手写Mock数据了!这款浏览器插件,1分钟就能搞定

你有没有过这种经历——

• 在封装组件，需要测试多数据下的分页功能，但后端值只返回了3条
• 进行边界值测试，需要模拟各种异常情况，看看前端页面会不会崩溃
• 线上出了个Bug，怀疑是某个接口返回了特殊数据。但本地复现不了

出现上面这些场景，可能大部分人都会直接在代码里进行mock了，测试完后进行删除

但这样比较难维护，今天给大家推荐一个浏览器插件【Ajax Modifier】，功能非常强大，比纯手写mock简单多了，随用随停。

01

两个场景，一分钟就能上手

在这个场景下，数据比较复杂，直接替换数据就比较多了，而且我是只改total，没必要这么复杂，此时我们可以写js函数。

 效果可以看出，后端数据确实只有5条，但是我们通过mock，total改为了100

通过插件，不改前后端代码，不使用 Fiddler 、Charles 、Apifox 等工具，不用了直接开关关掉，随用随走。

02

下载安装

插件地址：https://www.crxsoso.com/webstore/detail/nhpjggchkhnlbgdfcbgpdpkifemomkpg

需要注意的是，Ajax Modifier 仅在 JavaScript 层修改响应结果。这意味着它只会影响全局 XMLHTTPRequest 对象和 fetch 方法的返回值，最终影响页面显示。

在 Chrome 开发者工具的“网络”面板中看到的原始响应将保持不变。不要以为浏览器控制面板数据没变就没mock成功。