GraceMock：原来Mock可以如此简单！

背景

前端同学在日常开发需求过程中，经常会有以下困扰：

• 后端实现复杂，前期只有接口定义，很多流程接口调不通只能等着
• 有mock数据，但是mock生效需要入侵业务代码，例如在请求处注释请求而直接返回mock数据，如果忘记删后果很严重。
• 有时候需要修改某个字段来验证前端逻辑，但修改当前返回成本很高。

GraceMock功能介绍

它的本质

一个chrome浏览器插件，无需安装任何其它依赖。

它的优点

1. 基本对于所有页面生效，不局限于本地，线上环境。
2. 刷新页面时，自动收集当前页面ajax请求列表。
3. 给想要mock的接口设置数据，一键生效mock。
4. 大部分mock插件原理是在浏览器插入脚本修改ajax，可能存在破坏功能的情况。本插件使用chrome插件的debugger能力，不会影响业务代码，并且能够在network里看到真实的返回。

效果展示

第一步

打开插件开关，刷新页面

然后点击编辑接口信息按钮，进入接口列表页。插件会帮我们用页面url进行接口分组，可以清晰看出每个页面做了哪些请求。

第二步

当然，初始接口数据是空的。我们现在填充上mock数据，并打钩开启当前接口使用mock。

第三步

回到页面，再次刷新，可以看到刚才我们修改的mock数据已经生效了。

如何使用

安装插件

• 下载插件（以下任一途径）
  • github：github.com/rxyshww/gra...
  • 码云：gitee.com/ren_xiang_y...
• 解压后，直接加载文件夹即可。

项目配置

为什么需要配置生效域名与接口？

为使mock能力尽可能的简洁、专注，不希望在随便打开一个页面时都去收集请求，并且有些无关页面还会轮询请求，所以插件只对设置了域名和接口前缀的请求生效。

以文中演示的mock掘金列表接口为例：

• 掘金页面为https://juejin.cn/frontend，请求接口为https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed，固配置两个域名：https://juejin.cn、https://api.juejin.cn。
• 根据请求path，配置接口前缀为/recommend_api或/recommend_api/v1。

最后

使用中有任何问题或建议，欢迎评论中与我联系。