为什么运用 Mock 插件

  • 开发时不依赖于后端。不必等待接口回来 200 后才干进行后边的操作。
  • 对代码无侵入。不必在代码中写死 Mock 数据。正常开发,当联调时,关闭插件中对应接口的 Mock 即可。
  • 主动生成 Mock 数据。依据 Swagger 界说主动生成 Mock 数据,削减手动写 Mock 数据时刻。

特征

  1. 支撑阻拦和模仿运用 XMLHttpRequestfetch 方法来恳求的接口。
  2. 依据 swagger2.0 文档主动生成 Mock 数据。
  3. 支撑 GraphQL 恳求的 Mock
  4. 允许对匹配的接口进行 Redirect 操作。
  5. 提供 containsequalsregexp 三种匹配形式,以满意不同的接口匹配需求。
  6. 成功阻拦匹配的接口,直接回来对应的 Mock 数据,无需进行实践的网络恳求,Mock 时就不必等待接口回来 200 后才干继续进行后边的操作。
  7. 能够设置延迟回来时刻,以模仿真实接口的呼应。
  8. 保存成功后,支撑主动回来进口页面,便利继续其他操作。
  9. 支撑中英文两种言语。依据浏览器言语环境,主动显现对应的言语。
  10. 支撑一键重置。
  11. 支撑对 Mock 的装备进行 Clone
  12. 支撑 Mock 列表分组。

获取方法

能拜访 Chrome 运用商铺

Chrome 运用商铺需求翻墙才干拜访。

进入 Chrome 运用商铺搜索 Mock:Intercept and directly return data 装置。

一款好用的 Chrome Mock 插件

点击进入插件概况,点击【增加至 Chrome】

一款好用的 Chrome Mock 插件

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

一款好用的 Chrome Mock 插件

增加好后,插件默许是收起状态,将 Mock 插件 固定在 Chrome 的菜单栏处:

一款好用的 Chrome Mock 插件

增加好后,就能够在浏览器的菜单栏处看见 Mock 插件图标

一款好用的 Chrome Mock 插件

点击图标,就能够进入 Mock 插件 的装备页面。

一款好用的 Chrome Mock 插件

不能拜访运用商铺

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

翻开下载链接:gitee.com/xiangming25…。

下载好后,翻开 办理扩展程序

一款好用的 Chrome Mock 插件

将方才下载的 mock-plugin.crx 文件拖动到 办理扩展程序 面板中。

一款好用的 Chrome Mock 插件

这样也增加好了。

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

一款好用的 Chrome Mock 插件

留意

  • 假如 Mock 装备后不收效,请检查 匹配规则恳求方法接口 URL 是否正确。假如承认无误,请改写一下页面再试。

一款好用的 Chrome Mock 插件

  • 假如 Mock 成功,会在浏览器右下角以及操控台中提示,由此能够验证是否 Mock 成功。

一款好用的 Chrome Mock 插件

  • 阻拦成功后,在浏览器的 Network(网络) Tab 下,不会再执行这恳求。
  • 不需求 Mock 时,点击单个 Mock 接口的开关能够操控单个接口是否 Mock。假如所有的接口都不需求 Mock,能够点击插件右上角的 Mock 总开关进行操控。

插件介绍

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

最后

开发过程中,不免有些鸿沟情况没有考虑到,假如您觉得此插件对你的工作有帮助,在发现 bug 时,请联络我,我会尽快修改,在此感谢!!!