除了mock，或许你还需要这款插件📖📖📖

我正在参加「掘金·启航计划」

前言

这篇水文主要是和大家交流一下我平时是如何快速模拟后端接口返回的数据，除了本地开发环境上模拟，还可以在测试环境或者是生产环境上配合调试（在线上环境先看看假设后端接口返回的某个字段值为空时，前端的呈现是怎么样？），熊猫的老习惯，先上使用场景和结果

场景

产品趾高气扬指着线上环境的页面

产品：我想看看当后端返回XXX状态的时候，你页面是怎么展示的？
开发：你自己设计的心理没点数？
产品：我现在就想看看
开发：自己去造数，接口返回来XXX你就可以看了
产品：这是生产环境，我怎么造数？
开发：那你等我一会，我开发环境运行起来给你看
产品：我就是想看看生产环境的
开发：你再等等，我去拿下刀

图示

页面上的一个按钮，根据后端返回的出参，动态设置样式或者文本。

代码如下

js：

const res = await http('xxx') 
if (res.status === 0) this.class = 'class0'
else if (res.status === 1) this.class = 'class1'this.value = res.value

html：

<button :class="[class]"> {{value}} </button>

css：

.class0 {
    width:100px;
    height:200px;
    color:red;
}
.class1 {
    width:300px;
    height:200px;
    color:white;
}

xxx接口出参返回如下

{ status: 0, value: '0号选手' }

这个时候页面展示的就是的按钮是红色文本，这个时候你想试试当后端返回status为 1的时候，样式布局会是怎样？怎么处理？

方法很多其实，如：

直接在代码里面改一下，看看效果（缺点：手动改代码）
mock一下数据，改一下数据看看（缺点：需要在本地搞一下mock，在你搞完mock的时候，或许别人已经验证完了）
直接在页面dom上改一下class（缺点：只能看到样式调整，如果涉及到逻辑，则无法真实模拟）

出路：

除了上面的那些办法，是否能有一种方法，能够临时篡改后端返回的接口数据，从而实现让前端拿到不同状态的出参呢？

答案：

通过谷歌插件，拦截我们浏览器发起的请求，修改请求的出参，返回给前端

效果

截图.png

插件功能使用

找到需要更改的接口，复制原本的出参体

维护拦截api

插件的来源

参考YGYOOO这位大佬的项目改动（github.com/YGYOOO/ajax… 进行优化。该项目原本使用React开发，使用React的同学可以参考原来的项目。

基于这个项目做了以下的改动

改动功能

项目从react改成vue
chrome开发V2版本升级V3版本
UI交互调整
json编辑器更换
增加搜索功能
支持修改404、502等失败类型的返回体

注意事项

不使用拦截功能的时候，需要最好关闭总开关，避免遗忘，以为接口返回的数据有问题（我有时候以为是后端搞事情返回错误数据，实际是忘记关拦截）
配置中有“忽略原请求状态”的开关，开启后，所有请求的状态都会变成200，如果代码中有判断http status的逻辑将会受影响

插件安装

拉取项目
npm run build
谷歌浏览器 - chrome://extensions/ - 加载已解的拓展程序 - 选择项目源码目录

源码

github