Chrome插件 - 浏览器Mock插件安装使用教程（Mock:Intercept and directly return data）
作者：hangge | 2024-09-30 08:57
在进行前端开发过程中，少不了要写一些 Mock 数据。而利用 Mock 插件，可以让我们开发时不用在代码中写死 Mock 数据。而要联调时，只需关闭插件中对应接口的 Mock 即可。下面将介绍这个插件的安装和使用。
（4）再次回到最初的测试页面重新发起 Ajax 请求，可以看到返回的数据变成了我们设置的 Mock 数据了。
1，插件介绍与安装
（1）“Mock:Intercept and directly return data”是一款基于 Chrome 浏览器的 Mock 插件，它有如下特色：
- 支持拦截和模拟使用 XMLHttpRequest 或 fetch 方法来请求的接口。
- 根据 swagger2.0 文档自动生成 Mock 数据。
- 支持 GraphQL 请求的 Mock。
- 允许对匹配的接口进行 Redirect 操作。
- 提供 contains、equals 和 regexp 三种匹配模式，以满足不同的接口匹配需求。
- 成功拦截匹配的接口，直接返回对应的 Mock 数据，无需进行实际的网络请求，Mock 时就不用等待接口返回 200 后才能继续进行后面的操作。
- 可以设置延迟返回时间，以模拟真实接口的响应。
- 保存成功后，支持自动返回入口页面，方便继续其他操作。
- 支持中英文两种语言。根据浏览器语言环境，自动显示对应的语言。
- 支持一键重置。
- 支持对 Mock 的配置进行 Clone。
- 支持 Mock 列表分组。
（2）我们只需要进入 Chrome 应用商店搜索“Mock:Intercept and directly return data”安装即可：
2，使用说明
（1）假设我们页面会发送个 Ajax 请求，请求地址为“https://httpbin.org/get”，默认服务端请求结果如下：
（2）以添加该接口的 Mock 数据为例，我们点击浏览器的菜单栏 Mock 插件图标进入 Mock 插件的配置页面。然后点击“添加”按钮。
（3）填写相关的匹配规则、请求方式、接口地址、返回数据等，然后点击“确定”保存退出 。
注意：我这里接口地址填的是“/get”表示会拦截所有 URL 中包含“/get”的请求。我们也可以填写完整的路径，比如：https://httpbin.org/get
（5）注意拦截成功后，在浏览器的 Network（网络） Tab 下，不会再执行这请求。但是会在浏览器右下角以及控制台中进行相关提示，由此可以验证是否 Mock 成功。
全部评论（0）