✍️作者:极客小俊
😈公众号同名: 一个把逻辑思维转变为代码的技术博主


Fiddler 插件扩展
Fiddler
本身的功能其实也已经很强大了,但是Fiddler
官方还有很多其他扩展插件
功能,可以更好的帮助用户去测试和管理项目上的任务!
插件地址
https://www.telerik.com/fiddler/add-ons

当我们安装好插件
之后,这些插件的功能都会出现在Fiddler
的辅助选项卡中!
安装插件也很简单,直接点击Download
下载好之后双击就可以安装了,但是要注意的是安装插件的时候最好关闭Fiddler
,安装好插件之后再重启Fiddler
Fiddler精选插件
Traffic Differ插件
Traffic Differ插件
用来对比两个请求会话
也就是比较对比数据,拖动请求就可以了
举个例子
: 把一个页面优化前的会话保存一个,在把优化后的页面保存一个,通过对比两个会话
来比较优化起多大作用,在Differ
选项页中会有详细数据
下载插件

下载好之后双击安装即可!


然后你重启Fiddler
会发现辅助选项卡中多出了Differ
选项

这个时候我们就直接把抓到的数据会话拉入到里面就可以进行对比查看了, 这对前端检查页面优化很有帮助!

JavaScript Formatter插件
JavaScript Formatter
插件是格式化js
的工具。
官网找到并下载JavaScript Formatter文件,安装时会生成JSFormat.dll文件

然后进入到Fiddler
中右键单击
任何响应结果是js
的会话,
如图

然后选择Make JavaScript Pretty
就可以进行格式化了!
在左边响应窗口中的TextView、SyntaxView、Raw
中都可以看到格式化效果。
如图

CertMaker for iOS and Android 插件
之前我们在手机抓包的时候也用过这款插件, iOS 设备和 Android 设备在可能无法使用 Fiddler 使用的默认 HTTPS 拦截证书。要解决此不兼容问题,就要安装生成与这些平台兼容的拦截证书的证书生成插件。

安装好了Fiddler
之后重置证书就可以了, 有时候解决证书的问题就可以解决很多抓包的问题!
Syntax-Highlighting Add-Ons插件

此插件包含 Fiddler 的三个最有价值的扩展。
可以使用语法高亮显示标记:
SyntaxView 为 HTML、JavaScript、CSS、XML 和其他 Web 格式提供语法高亮显示。
RulesTab2 扩展是一种直接在 Fiddler 中编辑 FiddlerScript 规则的强大方法。
FiddlerScript 编辑器是一个独立的文本编辑器,可帮助您编辑 Fiddler 的规则。它提供语法突出显示和类资源管理器来帮助您编写脚本。
但是现在最重要的是这些插件已经包含在最新版本的 Fiddler
中,你不再单独下载。
如图


哎..但感觉还是没有我们的intellij idea
语法高亮好看。 !😆
Gallery 插件

Gallery插件
的作用就是选择图片会话
后,显示在选定会话中找到的所在图像的缩略图
,也可以多选!
并且Gallery
还提供带有可选图像效果的全屏幻灯片模式。
安装好之后会在辅助标签中出现Gallery选项
如图

Willow插件
Willow插件
可以统计数据包、修改Host、请求重定向、编码转换、低网速模拟:慢速网络模拟可视化、断点调试、过滤HTTP请求等功能。
安装Willow

运行之后,直接下一步安装即可, 记得一定要先关闭Fiddler



Willow插件安装完成后会自动打开Fiddler
可以看到在辅助标签
工具栏中出现了Willow
插件的标签页,说明Willow插件安装成功了

Willow的简单使用
我们可以把Willow插件当作是AutoResponder
工具和Tools —> hosts
的功能加强版。
例如Fiddler
中我们可以选择Tools —> hosts
功能,来导入windows系统
中的hosts
文件。
- 勾选
Enable remapping of requests for one host to a different host or IP, overriding DNS
.来开启Fiddler
中的hosts
功能。 - 点击
Import Windows Hosts File
来导入windows
系统中的hosts文件
如图

之后我们就可以在这里编辑Windows系统
中的hosts
文件,来定义主机规则
就会很方便了
但是Willow插件对于Windows
系统中的hosts
文件的管理更加的丰富
比如: 测试环境,开发环境等,采用不同的主机规则
举个例子
在Willow
插件中,右键Add Project
快捷键Ctrl+P
,然后填写项目的名称
。
如图


然后根据实际的需求,添加我们实际的测试环境
或者项目环境
。
如图

选中其中一个项目,右键Add Host
, 填写 Domain
访问的域名地址 IP
实际访问的地址。
例如:当访问百度的时候,会访问到我本地的设置的回环地址
。

那么这个时候当访问www.baidu.com
的时候实则访问 127.0.0.1
这个本地ip地址,从而达到屏蔽网站的效果。

自动响应重定向规则
我们还可以利用Willow
给项目添加自动响应规则, 虽然Fiddler
中的AutoResponder
也有这个功能,但是Willow
更加强大!
举个例子
当请求百度
页面的时候,将百度
logo图片替换为本地图片。
我们在Willow
中选择好项目,右键Add Rule
添加规则

填写Match(原始会话)和Action(替换动作)
如图

当然一个项目中是可以添加多个规则的!

效果

通过使用Willow插件,我们就可以用项目的方式去管理规则, 我们可以在实际的工作用慢慢去学习!🙂
Privacy scanner 插件
Privacy Scanner 插件
可以标记基于 P3P 标头设置 cookie 和颜色代码的响应。

下载Privacy scanner插件
并安装之后, Fiddler
将获得一个名为Privacy
的新顶级菜单
然后开启菜单下的选项
如图

然后请求会通过不同颜色进行标示!
-
绿色
表示发送了令人满意的P3P政策。 -
黄色
表示没有设置P3P策略的cookie。 -
橙色
表示会话发送P3P策略,该策略不允许在第三方上下文中使用cookie。 -
红色
表示发送了无效的P3P策略。

总结
通过对Fiddler
的学习,也许你也会对HTTP
有更加深入的感悟和理解,至于Fiddler软件
本身的使用,就要从今后的项目当中去吸取实战的经验,以及不断的总结, 才能对Fiddler
这款软件的使用更加得心应手!


如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
如果以上内容有任何错误或者不准确的地方,🤝🤝欢迎在下面 👇 留个言指出、或者你有更好的想法,欢迎一起交流学习❤️❤️❤️❤️❤️
网友评论