GraceMock:原来Mock可以如此简单!

背景

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

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

GraceMock功能介绍

它的本质

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

它的优点

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

效果展示

第一步

打开插件开关,刷新页面

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

第二步

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

第三步

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

如何使用

安装插件

项目配置

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

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

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

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

最后

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

相关推荐
三门7 分钟前
vue官网新读之后收获记录
前端
mapbar_front20 分钟前
我们需要前端架构师这个职位吗?
前端
ScriptBIN28 分钟前
Javaweb--Vue
前端·vue.js
KenXu33 分钟前
React Conf 2025 - 核心更新
前端
前端Hardy37 分钟前
Vue 高效开发技巧合集:10 个实用技巧让代码简洁 50%+,面试直接加分!
前端·javascript·vue.js
ᖰ・◡・ᖳ1 小时前
JavaScript:神奇的ES6之旅
前端·javascript·学习·es6
app出海创收老李1 小时前
海外独立创收日记(5)-上个月收入回顾与本月计划
前端·后端·程序员
前端Hardy1 小时前
HTML&CSS:一眼心动的 SVG 时钟
前端·javascript·css
TTGGGFF1 小时前
Streamlit:CSS——从基础到实战美化应用
前端·css
app出海创收老李1 小时前
海外独立创收日记(4)-第一笔汇款
前端·后端·程序员