方便智能的chrome数据mock插件

前言

最近看了一篇掘金文章前端请装上这个Chrome插件,里面讲了如何在chrome上使用ajax-interceptor进行mock数据，本人试着安装使用了一下，发现使用不是很方便。自己又在chrome里面找了另外一款tweak，感觉更加的方便，本文就来通过具体的实例来比较一下两者的差异。

准备工作

1. 首先我们安装这两个插件，具体的安装方法这里就不说了，需要翻墙(这里不知道的可以留言，我悄悄告诉你们方法😛)；
2. 找到一个页面，这里以掘金课程页面为例；

ajax-interceptor 的使用

1. 初始界面

2. 打开掘金课程页面，计划把里面初探前端工程化改为初探前端工程化666

3. 搜索到该条数据提供的接口: api.juejin.cn/booklet_api…

4. 将该接口拦截，在这里操作的时候很不方便，主要体现在以下几点：
   a. 那个json数据很不好编辑
   b. json里面没有搜索功能，很难找到我要找的字段在数组哪一项；
   c. 要手动把接口的数据放到里面；

5. 刷新页面

tweak 的使用

1. 初始界面

2. 打开接口自动匹配功能，然后刷新当前页面

3. 点击+号，在里面输入之前找到的接口的关键字段listbycategory，我们发现它能自动匹配出完整的接口出来，点击那个接口，它能自动把相应的数据带出来，里面支持直接编辑以及搜索功能。

4. 搜索到该字段更改后，点击启动

5. 刷新页面(这里出了点问题，直接拿的上图的结果，我在日常开发中使用是没有问题的🤣)

总结

tweak这个插件完美解决了ajax-interceptor在使用过程中痛点，使用更加的智能，还支持变换主题、导入导出等功能，后续也将加入对websocket的支持。当然mock数据也可以通过fiddler或者一些webpack的插件来做，但总的来说通过chrome插件来mock是比较快速、无侵入的一种方式了。