💡 根据 研发定律所示：前端几乎一半的精力耗费在联调上，而mock数据又是联调中最重要的一环，此环缺失，那么将事半功倍，前功尽弃， 对于后端也是一样，前端传递的数据有差错，导致接口报错，想自己修改数据看界面又要改动返回代码，到了测试同学那也很辛苦，想要造数据、修改数据看效果只能一个个找数据库、找表、跟找对象一样很麻烦。。。
那么对此等现象，我等绝不可能姑息，不能袖手旁边，于是用我打野28段的功力，写了个小插件，不妄想解决联调过程中所有的问题，能解决一点那也是有价值的，没有白肝。
MT介绍
| 插件名字 | MT插件介绍 |
|---|---|
| 状态 | 更新中 |
| 简介 | mt插件是一个chrome插件，用来拦截Ajax/Fetch请求，并对其进行修改。目前支持修改请求数据、请求头、响应内容。 |
| 特性 | 实时拦截请求，xhr统一200状态码、可视化修改响应内容、url过滤，复制、全屏、切换模拟/原生数据 |
| 待更新 | 手动请求、请求转发、接入mock.js造数据规则、项目管理等... |
市面上也有类似的插件比如：ajax-interceptor,还有一些模拟数据的重磅工具yapi、apifox,模拟请求的postman等，个人都用过，但是对比ajax-interceptor，mt插件的优势是功能更全面（它也不更新了...），对比其他mock工具，更加轻量，而且在模拟数据这一块不需要再起一个mock服务地址，源码无需改动，在一些需要修改数据查问题的场景由于就是原生环境，所以排查效率也更高。狡辩了这么多，接下来看具体功能，希望能有所帮助！
功能演示
这里演示的gif图是带A-SOUL背景的，为的是参数哪个挑战赛，沾点边，觉得有用可以投票支持下，没想到其他河里的方式，实际运行的交互界面如下：没有UI,丑是正常的
copyToken不用管是为公司做的小功能，右上角设置按钮：
修改返回数据
- 首先通过url输入框匹配找到这个首页用的是哪个接口，可以输入请求地址，也可以输入页面上的内容来找到接口，如下：
- 打开拦截开关
- 修改对应的内容，比如这里应该是title字段，改了刷新看效果
- 如果想用原生数据，那么点击右侧的切换按钮为原生数据刷新即可。
- 数据量太多可以全屏修改
修改请求头
- 功能操作是一样的，可以对数据源进行切换。图上添加字段就报错了，说明添加成功，切回来就正常了
- 开发中有些接口是需要携带一些特殊请求头字段，可以用这个模拟
修改请求数据
- 操作同理，修改接口的请求数据，比如有些分页组件没有跳转功能，要找某一页的数据可以派上用场。
对于xhr类型的请求如果接口报404，只要开启了代理，状态默认修改了200，并且有返回值，客户端也能读取到返回值，不会报404错误。这也是接口未出来之前，能够mock数据的重要一步。
xhr、Fetch使用方法都是做了统一，但是fetch是返回一个promise 只要网络是正常的都会走到then方法里，此时如果返回的Response对象有值，那么是否报错客户端都能读到。下面是实现第一版之后加的小功能。
复制数据
1.统一了复制按钮，可以对数据进行复制，当前数据源是哪个复制的数据就是哪一份
配置功能
1.一些网站需要跨域携带cookie的配置，但是某些接口Access-Control-Allow-Origin配置的是* 是不允许携带cookie的，这个时候可以关掉，这里放在全局的配置而不是接口单个配置的原生是，我一打开某个网站可能不知道哪些接口报错，然后接口拿不到cookie就会开始重定向根本打不开，所以索性就放到全局里，后续会支持单个接口配置。
选择插件的原因
选择插件的原因上面也说了，市面上有很多的mock工具，比如yapi、apipost、等，但个人都觉得太重了，有时候我就改改返回数据看效果而已，不想改动代码。插件相较于他们比较轻量。后续接入mock.js的规则后用来mock数据也很方便，传统的使用方式都需要对项目进行改造，联调完后又需要删掉，太麻烦了，打工人就想早点下班插件学习可以看这篇 对里面代理xhr、fetch的可以看github,想写一些原理但是自己也是参考开源代码实现的，所以大家自己看看吧 对你有帮助可以点个star,给个鼓励。
end
总结下现有的功能：
- 实时拦截请求，渲染到交互界面上，后续可能也加上手动添加地址
- 支持修改请求数据、请求头、响应数据，并且可以来回切换模拟数据和原生数据，原生数据不可修改、模拟数据默认值就是原生数据
- url支持过滤匹配
- 支持全屏
- 支持复制数据
- 支持配置withCredentials
目前第一版功能开发的差不多了，bugs不能说完全没有，但是日常使用应该不受影响，后续会迭代剩下的功能，都是第一次做，肯定会有不足的地方，一起共勉，打工人也想发挥下打工人的价值，如果有兴趣可以一起交流开发，不局限于http请求领域，其他日常提效的范围都行，另外我这个赛季想打个50星，找个队友一起冲
