Fiddler Mock Interface插件实现对不同类型接口的快速MOCK,不需要任何辅助就可以直接MOCK接口，你跟MOCK之间只差一个按钮的操作
Fiddler Mock Interface 插件背景
当我们在测试或者前端调试阶段时，服务器数据不符合测试条件时，我们可以通过mock接口的方式来达到测试用例所描述的条件，我们的app大部分都是json接口形式返回接口，H5或者M站网页经常遇到是Jsonp接口请求，Jsonp格式的接口特点是以GET请求携带的参数为callback一个随机字符串的特点，普通Fiddler是无法对jsonp接口进行正常mock。
Fiddler Mock Interface 插件是一站式解决测试所需要各种数据形式如：
1、JSONP 格式
2、JSON 格式
3、Other(.js/.css/.php/.html等) 格式
Fiddler Mock Interface 插件几个不需要
1、不需要配置请求接口指定mock数据文件位置（Fiddler配置mock接口时操作复杂）
2、不需要对接口返回结果进行拷贝黏贴到mock数据文件里
3、不需要每次修改mock文件时都要找到它
4、不需要使用第三方服务平台进行mock
5、不需要频繁切换平台、文件、Fiddler之间的来回切换
Fiddler Mock Interface 插件使用人群
1、测试工程师
2、前端开发工程师
Fiddler Mock Interface 插件增加辅助功能
在测试时，经常会用到请求接口的uid以及token来做一些操作，所以Fiddler Mock插件也扩展支持拷贝uid 以及 token功能，并支持多选uids和tokens
Fiddler Mock Interface 插件功能组成部分，以及功能介绍
1、Mock开关ON/OFF
1.1、开关位置Location ： Menu->Rules->Mock Switch
1.2、ON：打开Mock接口功能
1.3、OFF：关闭Mock接口功能
2、Fiddler增加IsMock 以及 UID/HostIP两列
2.1、IsMock是用来描述该接口是否被mock了，哪些接口正在mock
2.2、UID/HostIP是用来根据uid和hostip来清晰展示出是线上环境还是线下环境, 命中域名有（你可以自定义你们自己公司域名）
app.zhuanzhuan.com
m.zhuanzhuan.com
zhuan.58.com
zhuanzhuan.58v5.cn
3、右键菜单功能Mock Json(p)
3.1、Add Mock : 把接口增加到Mock队列中
3.2、Remove Mock : 把接口从Mock队列中移除
3.3、Modify Mock Data : 把接口从Mock队列中移除
3.4、Show Mocking Interfaces : 展示哪些接口正在进行Mock，分级别展示jsonp、json、other其他列表
-----------------------------------------------
3.5、Copy Selected Uids : 单/多拷贝选中的UID
3.6、Copy Selected Tokens : 单/多拷贝选中的Token
Fiddler Mock Interface 插件效果图
Fiddler Mock Interface 插件会以颜色区分提示是否Mock成功与否
1、JSONP接口命中MOCK ，绿色渲染请来求提示mock成功
2、JSON接口命中MOCK , 紫色渲染请求来提示mock成功
3、Other( .JS .PHP等)命中MOCK , 黄色渲染请求来提示mock成功
4、当Mock文件丢失后， 则以红色渲染请求来提示警告
Fiddler Mock Interface 插件流程图
Fiddler 自带mock请求的jsonp接口时，是无法正常使用的，请求已经mock了，以H5网页晒单页面请求的shareorderlist jsonp接口为栗子 ，如图
Fiddler自带的mock功能是无法实现jsonp接口的mock，所以用我们自己的插件操作，接下来介绍插件如何使用
Fiddler Mock Interface 插件工具使用
利用Fiddler Mock Interface 插件后就可以正常mock jsonp数据，而且不需要任何配置
接下来我们分别用三个例子来展示对不同接口类型【JSONP \ JSON \ M页 】进行MOCK , 以及异常操作。
1、JSONP Demo
1.1、当我们进行mock接口时，首先要打开mock 开关，会警告提示并指引用户如何打开开关操作，如图
1.2、打开开关后，选择jsonp 接口链接，右键菜单，则会弹出一项 mock json（p）
自动打开编辑器，不需要人为的去找文件位置然后再打开文件，插件自动帮您打开编辑器进行Mock ，如图 （PS： NOTEPAD json快捷键：CTRL+ALT+M）
这时候你就可以修改数据了，比如修改几处吧，例如用户名，点赞数，以及去掉头像，操作完后保存文件，关闭编辑器。再次请求页面，打开Fiddler，看截图
如果mock成功，则jsonp接口则会以绿色标识出已mock成功，查看H5页面数据改变，变为了我们想要的预期结果
如果想再次修改怎么办，不用着急，作者已经给你想到了 ，直接右键接口链接弹出菜单，点击Modify Mock Data按钮，怎会弹出接口mock数据文件。如图
自动打开文件，进行修改数据
保存后，关闭，再次请求页面
没问题，mock成功
Ismock列也会显示这是jsonp正在mocking呢，并且comments也会显示 jsonp response has mocked。
2、JSON Demo
Json模拟接口我们用转转app的请求即可，比如“我的”tab ，接口getmyprofilev2
同样，我们在Fiddler里找到接口getmyprofilev2，然后右键菜单点击 Add mock，则会打开mock数据文件
创建成功
再点击转转app 命中接口getmyprofilev2
Json命中mock的后，是以紫色来代表mock成功，我们来看一下app效果是否正常mock了
Json mock成功了，数据已改变，达到我们测试预期效果了
修改mock也一样，同jsonp修改方法，不再演示了，算了，还是在做一次，如图
保存，关闭notepad编辑器，请求app
Ok的，json也mock成功了，然后查看一下fiddler
Ismock列也会显示这是json正在mocking呢，并且comments也会显示 json response has mocked。
3、OTHER Demo
例如我们拿达内网站进行lxb.js mock和 kf_new.php 进行mock的案例
对lxb.js进行mock
我在js里加了一段代码，获取输入的手机号并修改按钮为大傻瓜文案
刷新页面
看到效果了吧，弹出alert，然后点击确定按钮，看看《立即免费通话》按钮文案是否变化
哈哈哈，变了，说明mock成功了，然后我们看一下Fiddler
Ohter命中mock的后，是以黄色来代表mock成功
Ismock列也会显示这是lxb.js正在mocking呢，并且comments也会显示 Other response has mocked。Other包括（.html .js .css .php ....等等）都会以黄色表示mock成功
接下来，又出现一个问题就是，我怎么知道我有哪些接口正在mock呢？我不记得了咋办？
作者给出了你想要的答案，选择 show mocking interfaces按钮，则会列出所有正在mocking的接口
分别列出接口mocking接口的列表，非常的清晰
如果我们想不想对某一个接口进行mock了，怎么办？
选中不想mock的接口，然后右键-选择remove mock 删除它即可，比如我要删除json接口的getmyprofilev2
会弹出提示是否要删除mock接口
点击确定即可删除
然后我们再次请求app客户端，看一下数据和fiddler
接口getmyprofilev2 没有被mock了，再查看一下show mocking interfaces
这些数据我们这次数据，下次我们在进行mock的时候，它还会存在可以重复使用，比如
我们把刚才的remove mock 删除的那个接口在加回来，看看效果
提示数据已存在，可以继续使用之前你配置的
我们在测试或者前端开发代码时，经常要用到UID或者TOKEN，每次拷贝UID时还要点开后在Fiddler右侧展开去找UID右键拷贝相对的麻烦，所以Mock Interface插件也增加了直接copy uid和copy token。
拷贝token
黏贴到编辑器里，操作更加方便 ，如图
由于mock interface插件功能太多，篇幅太大，比如多次添加mock如何处理，没有被mock的接口删除mock怎么处理，mock文件丢失如何处理？。。。等等 ， 就不一一详细介绍了，更好的功能还是希望大家去发现哈
在日常工作测试中或者前端调试中，mock接口是很关键的一环，使用Mock Interface插件一定会事半功倍。
工具使的好，下班回的早，充分利用工具提高工作效率，节省下来的大部分时间完全可以做一些更有意义的事情。
Fiddler Mock Interface插件下载，有需要de请发邮件： [email protected]
附一完美图