《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

1.简介

在开发或者测试的过程中,由于项目环境比较多,往往需要来来回回地反复切换,那么如何优雅地切换呢?宏哥今天介绍几种方法供小伙伴或者童鞋们进行参考。

2.实际工作场景

2.1问题场景

(1)已发布线上APP出现接口错误,如何测试线上APP访问本地请求?

(2)已发布线上H5页面,静态资源或js调试,如何映射本地js?

2.2一般解决方案

猜测(一般明显问题)、找到原发布包,修改请求资源url重新打包测试。需要前后端协调配合,耗时费力。

2.3聪明人解决方案

fiddler映射响应:

通过fidder拦截,将需要加载的资源映射到本地开发环境,而无需切换测试版APP

例如线上资源:http://online.com/api/page

映射加载本地资源:http://127.0.0.1/api/page

3.切换实战

3.1插件(Stave插件)

Stave是一个Fiddler扩展插件,让Fiddler能将URL映射到本地目录,实现批量文件自动响应。

Fiddler自带的AutoResponder每条自动响应规则只能对应一个本地文件, 在文件数目较多的时候,使用起来很不方便,往往需要部署到本地web服务,有了Stave插件(扩展),一个URL匹配可以对应一个本地目录,URL规则也支持通配符,前端调试方便多了。

除支持URL映射到目录之外,还支持URL到URL的替换。

Stave扩展并不影响原本的AutoResponder功能,两者可以共同起作用。具体操作步骤如下:

1.下载Stave插件,这个可费了大劲了,首先宏哥得FQ访问这个插件的官网,可以访问官网了,结果一下载,才发现已经不维护了,下载链接已经失效了,然后在csdn上找到了一个,结果还要积分,充值后用价格不菲的积分下载了,完全不能用,后来才发现后边有评论已经说了不好用,怪我咯没有看请就着急地下载了,果然是心急吃不了热豆腐,后来辗转查资料各种找,终于下载了一款可以用的。如果你也发现下载特别费劲,那就关注宏哥的公众号“北京宏哥”后,发送“stave”关键字,来获取下载此插件安装包的方式吧!如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

2.双击安装包后,出现安装完成的,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

3.重启Fiddler后,在右边的选项卡中没有看到这个插件,宏哥然后点击上图中的“Show detail”后,查看插件的安装目录,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

4.根据安装目录找到安装的插件文件,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

5.将Stave.dll文件拷贝到安装Fiddler的插件目录下,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

6.重启Fiddler,可以在Fiddler的选项卡中看到这个Stave插件,一个音乐符号的图标,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

从上图我们不难看出:本身stave插件的实列如上2个,第一个是替换单个文件的,第二个是替换目录的。接下来跟随宏哥一起来看看它们的如何配置的,具体步骤如下:

1.选中一个实例,右键-->编辑,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

2.点击“编辑”后,打开编辑界面,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

可以看到如上配置,我们回归今天文章的主题先来实践下吧!例如:还是要将百度首页的切换成博客园首页,具体操作步骤如下:

1.首先点击右侧,右键 --> 添加,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

2.弹出添加规则页面,添加规则,点击“确定”,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

3.浏览器访问百度,发现网址是www.baidu.com,但是浏览器访问的却是博客园首页,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

3.2插件(Willow)

我们可以把Willow插件当作是AutoResponder工具和Tools —> HOSTS...功能的加强版。但是Willow插件对于Windows系统中的hosts文件的管理更加的丰富,可以根据不同的环境,比如测试环境,开发环境等,采用不同的主机规则。同理Willow插件对于AutoResponder工具也是一样的,Willow插件可以用工程的方式,来区分不同环境所需要的主机规则和自动响应规则,这个功能就非常的实用。

这款插件宏哥在讲解和介绍Fiddler的精选插件部分就已经重点介绍过了,这里就不做赘述了,宏哥这里直接演示如何使用,具体操作步骤如下:

1.在Willow插件中,右键Add Project(Ctrl+P)。如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

2.填写项目的名称为:demo,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

3.选中项目,右键Add Rule(Ctrl+U),如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

4.填写Match(原始会话)和Action(替换动作),如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

5.再次刷新百度首页后,发现网址是www.baidu.com,但是浏览器访问的却是博客园首页,这是因为在访问百度首页网址的时候,Fiddler自动地将其替换成博客园的首页网址。如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

6.这款插件会把重定向的会话标识上颜色,如下图所示:

《吐血整理》高级系列教程-吃透Fiddler抓包教程(24)-Fiddler如何优雅地在正式和测试环境之间来回切换-中篇

4.小结

 Willow插件比Stave插件强大很多,而且Stave的功能,Willow插件都可以做到,这样Willow可以完全替代Stave插件,可能是因为这个原因官网不维护了,也可能是由于资金等其他原因。好了,今天时间也不早了,宏哥就讲解和分享到这里,感谢你耐心地阅读!!!

发表评论

相关文章