夜雨聆风你有没有过这种经历——
在封装组件，需要测试多数据下的分页功能，但后端值只返回了3条 进行边界值测试，需要模拟各种异常情况，看看前端页面会不会崩溃 线上出了个Bug，怀疑是某个接口返回了特殊数据。但本地复现不了
出现上面这些场景，可能大部分人都会直接在代码里进行mock了，测试完后进行删除
但这样比较难维护，今天给大家推荐一个浏览器插件【Ajax Modifier】，功能非常强大，比纯手写mock简单多了，随用随停。
01
两个场景，一分钟就能上手
打开插件，填入你想拦截的接口URL，写好你期望的返回值，开关一开，这个接口就返回你设定的数据了。
实战场景一：拦截校验识别发票
上传发票之前需要接口识别发票，验证了才能继续上传，有了插件就轻松多了，不管啥附件直接模拟成功或失败
实战场景二：动态修改接口的total总数，使其出现分页器
在这个场景下，数据比较复杂，直接替换数据就比较多了，而且我是只改total，没必要这么复杂，此时我们可以写js函数。
效果可以看出，后端数据确实只有5条，但是我们通过mock，total改为了100
通过插件，不改前后端代码，不使用 Fiddler 、Charles 、Apifox 等工具，不用了直接开关关掉，随用随走。
02
下载安装
插件地址：https://www.crxsoso.com/webstore/detail/nhpjggchkhnlbgdfcbgpdpkifemomkpg
需要注意的是，Ajax Modifier 仅在 JavaScript 层修改响应结果。这意味着它只会影响全局 XMLHTTPRequest 对象和 fetch 方法的返回值，最终影响页面显示。
在 Chrome 开发者工具的“网络”面板中看到的原始响应将保持不变。不要以为浏览器控制面板数据没变就没mock成功。