一款好用的 Chrome Mock 插件

更新日志。 2025-01-10。当前最新版本为 2.0.1。

更新【不能访问应用商店】的安装方法。

为什么使用 Mock 插件

• 开发时不依赖于后端。不用等待接口返回 200 后才能进行后面的操作。
• 对代码无侵入。不用在代码中写死 Mock 数据。正常开发，当联调时，关闭插件中对应接口的 Mock 即可。
• 自动生成 Mock 数据。根据 Swagger 定义自动生成 Mock 数据，减少手动写 Mock 数据时间。

特色

1. 支持对使用 XMLHttpRequest 或 fetch 方法发起的接口请求进行 Mock。
2. 能根据 Swagger 2.0 文档自动生成 Mock 数据。
3. 支持修改请求头（Request Headers）。
4. 支持修改请求体（Request Body）。
5. 可对接口请求进行重定向处理。
6. 提供三种匹配模式：contains、equals 和 regexp，以满足不同的接口匹配需求。
7. 支持自定义返回状态和请求响应时间。
8. 支持配置数据的导入和导出。
9. 提供浅色和深色两种主题。
10. 支持中英文双语切换，依据浏览器语言环境自动显示对应语言。
11. 支持配置数据可转换为 TypeScript 类型定义。

获取方式

能访问 Chrome 应用商店

Chrome 应用商店需要翻墙才能访问。

进入 Chrome 应用商店搜索 Mock:Intercept and directly return data 安装。

点击进入插件详情，点击【添加至 Chrome】

弹框中点击【添加扩展程序】

添加好后，插件默认是收起状态，将 Mock 插件 固定在 Chrome 的菜单栏处：

添加好后，就可以在浏览器的菜单栏处看见 Mock 插件图标。

点击图标，就可以进入 Mock 插件 的配置页面。

不能访问应用商店

在浏览器中下载 mock-plugin.zip 压缩文件。

打开下载链接：gitee.com/xiangming25…。

下载好后，将文件夹解压，打开 管理扩展程序，选择 加载已解压的扩展程序。

加载刚才解压好的文件夹。

这样也添加好了。

然后将插件固定在 Chrome 的菜单栏

注意

• 如果 Mock 配置后不生效，请检查 匹配规则、请求方式、接口 URL 是否正确。如果确认无误，请刷新一下页面再试。

• 如果 Mock 成功，会在浏览器右下角以及控制台中提示，由此可以验证是否 Mock 成功。

• 拦截成功后，在浏览器的 Network（网络） Tab 下，不会再执行这请求。
• 不需要 Mock 时，点击单个 Mock 接口的开关可以控制单个接口是否 Mock。如果所有的接口都不需要 Mock，可以点击插件右上角的 Mock 总开关进行控制。

插件介绍

Mock:Intercept and directly return data 插件使用介绍

最后

开发过程中，难免有些边界情况没有考虑到，如果您觉得此插件对你的工作有帮助，在发现 bug 时，请联系我，我会尽快修改，在此拜谢！！！