Fiddler是一款免费的、基于Windows系统的代理服务器软件(即Web调试抓包工具),由Eric Lawrence用C#语言在2003年10月发布了第一个版本。注意,由于Fiddler依赖Microsoft .NET Framework 2.0或更高版本,因此在运行Fiddler之前需要预先将其安装。
当启动Fiddler时,它会自动注册成Windows Internet(WinINET)网络服务代理,从而就能捕获本地所有的HTTP和HTTPS数据流。在图14中,客户端(例如Web浏览器、iOS移动设备等)会把请求交由Fiddler转发给服务器,服务器也会把响应交由Fiddler转发给客户端。在Fiddler介入后,就能实现过滤数据流、解密HTTPS、调试断点、修改请求或响应等功能。
![7854e70af75e50e5132c43bd8eabb647.png](https://i-blog.csdnimg.cn/blog_migrate/8fb3250659ceb4a22e399ca4b21604a7.jpeg)
一、用户界面
Fiddler的用户界面包含6块区域:主菜单栏(1)、工具栏(2)、会话列表(3)、选项视图(4)、命令行工具QuickExec(5)和状态栏(6),如图15所示。
![807abcbb7205ab84c2dc26a075a5772f.png](https://i-blog.csdnimg.cn/blog_migrate/cdb5157493321e551002c7e2996cb23c.jpeg)
1)主菜单栏
Fiddler的主菜单包含6部分(如下所列),几乎囊括了Fiddler的所有功能,并且利用FiddlerScript或Extensions可扩展菜单系统。
(1)File:启动和关闭流量的捕获,加载流量文件,保存捕获的流量并支持多种格式(例如SAZ、BAT、MS等)的导出。
(2)Edit:作用于会话列表中的会话(Session),包括复制、移除、全选、标记、搜索等操作。
(3)Rules:由FiddlerScript文件生成的规则,包括过滤图像类会话、提供影响Web性能的选项、替换User-Agent请求首部等。
(4)Tools:提供了控制Fiddler行为的全局配置选项、对文本进行编码和解码的TextWizard(如图16所示)、主机重映射(Host Remapping)工具(如图17所示)等。
(5)View:视图管理器,既能刷新部分选项卡中的内容,也能重置Fiddler的用户界面,例如显示或隐藏Statistics、Inspectors等选项卡。
(6)Help:不仅提供了多条链接,可跳转到网上论坛、在线文档等页面,还能检查是否是最新版本以及显示当前版本的基本信息。
![a31e68d3a6a6444d477fd2a6fa3e637e.png](https://i-blog.csdnimg.cn/blog_migrate/1efe150c061c71a58ff27273ba6e38b7.jpeg)
![82f446ecbda2d76710152a1653c46ff4.png](https://i-blog.csdnimg.cn/blog_migrate/9b783d097bb6790d1bccd0da668cc53b.jpeg)
2)工具栏
Fiddler的工具栏提供了常见命令的按钮以及预定义的快捷方式(如图18所示),例如重发请求、移除断点、保存会话、清除WinINET缓存、指示系统是否在线等。
![0da2dbd04b0beb2579130f18a990a98c.png](https://i-blog.csdnimg.cn/blog_migrate/a71bfc186e11fd0c10c089a32fc6d3e2.png)
当把鼠标悬停在某个按钮上时,会显示一条描述其功能的提示信息,如图19所示。
![9392dc6b71226f67d83b020aeefb42c4.png](https://i-blog.csdnimg.cn/blog_migrate/50624ed07ec9d39c3b2859c4ce4a49fa.jpeg)
3)会话列表
Web会话记录了客户端和服务器之间的一系列交互,一个会话就是一个事务,由一条请求命令和一个响应结果组成。在Fiddler的会话列表中,每个条目代表一个会话,包含一段重要的摘要信息,如图20所示。
![08ab5bc5bd2b39cfd92ebb3c7f131357.png](https://i-blog.csdnimg.cn/blog_migrate/21949dd869454c3f0b18e261b3579961.jpeg)
关于每列的描述可参考表5。
![d3cf436ce4760e0c1e7894e44599b9d2.png](https://i-blog.csdnimg.cn/blog_migrate/b67a7f329962088a8534b90d51a93c1a.jpeg)
表中的图标包括三类:会话进度、请求类型和响应类型。以图20的首末两个会话中的图标为例,第一个表示加密的HTTPS数据流,最后一个表示响应是个图像文件。
4)选项视图
Fiddler的选项视图默认有9个选项卡(如图21所示),其中Log选项卡收集日志信息,Fiddler Orchestra Beta选项卡提供远程Web调试的功能,其余选项卡将在后文做单独讲解。
![622fd13d9ad741c1d907aa785c890bd4.png](https://i-blog.csdnimg.cn/blog_migrate/ec03d7a0029921ac4d748cfa6944d734.png)
5)QuickExec
Fiddler的QuickExec允许用户快速启动脚本命令,大致分为三类:选择数据流、FiddlerScript命令和其它,表6挑选了几个常用的命令。
![4e1caf64050e4705ed5e95e1d39825d9.png](https://i-blog.csdnimg.cn/blog_migrate/91a5e1638b429a49ccdce4b4fad11841.jpeg)
QuickExec还提供了多组快捷键(即热键),表7挑选了几组常用的快捷键。
![292afa7746879a816a4529608c44d144.png](https://i-blog.csdnimg.cn/blog_migrate/1996980483b73a27facb55d410a26a4b.jpeg)
6)状态栏
Fiddler的状态栏处于用户界面的最下方,显示了5项配置信息(如图22所示),从左往右的作用依次为:
![47283f4bbcf707fcdd96db42a6739cb5.png](https://i-blog.csdnimg.cn/blog_migrate/2b60dfacb00c055edd3ce533fbb614a3.png)
(1)是否让Fiddler成为系统代理。
(2)根据选择的进程类型过滤数据流。
(3)断点影响的会话类型,包括全部请求、全部响应和无。
(4)选中的会话数和总会话数。
(5)选中会话的URL,如果选中了多个,那么只显示第一个。
二、Web调试
Fiddler能够调试来自于桌面浏览器和移动设备的数据流。
1)代理设置
在Windows上运行的大部分浏览器(例如IE、Chrome等),其数据流都能被Fiddler直接捕获,而其余浏览器要么需要安装插件,要么需要单独配置。
如果要在iOS或Android设备上捕获数据流,那么首先需要配置Fiddler的Tools菜单中的Options,使其允许远程连接,注意看图23用粗线框出的选项。
![475fca87ae9fb2931c24a59a09ebb9c9.png](https://i-blog.csdnimg.cn/blog_migrate/d044f387dfcdc322c24bc6095def14bb.jpeg)
然后让移动设备与Fiddler处于同一网段(例如连上相同的Wi-Fi),并修改其WLAN设置,如图24所示,其中服务器就是Fiddler所在电脑的IP地址,而端口就是Fiddler默认的工作端口号。
![ff7b2d7ad4f6de3ff41c55ece9ec8717.png](https://i-blog.csdnimg.cn/blog_migrate/77b42322b3db68083c248acae14d21a4.jpeg)
2)解密HTTPS
HTTPS是HTTP的安全版本,如果要让Fiddler将其捕获,那么需要先在Options的HTTPS选项卡中勾选“Decrypt HTTPS traffic”,允许解析HTTPS的请求和响应,如图25用粗线框出的选项。
![b2e0160b9ce29fe2c9c1019ad5fa7e35.png](https://i-blog.csdnimg.cn/blog_migrate/5b927b7e6efbe150b48b44bb36e6fa4d.jpeg)
当第一次勾选时,Fiddler会生成一张自签名的证书,并且需要确认是否信任它,如图26所示。
![ef1c925b2f6351e3d2a3f65ea89f1a06.png](https://i-blog.csdnimg.cn/blog_migrate/c4210a93a0e9ba3035f119e77c4bf7b7.jpeg)
在信任该证书后,就需要将其安装,如图27所示。
![c96c5c6f4e9561aab308810fddd80826.png](https://i-blog.csdnimg.cn/blog_migrate/424defe447a1b4131b3e17501363803a.jpeg)
如果要让Fiddler能够捕获移动设备的HTTPS流量,那么还需要额外几步。首先打开设备的浏览器,在地址栏中输入代理服务器的IP和Fiddler的工作端口,得到下载证书的页面,如图28所示,图中用粗线框出的就是下载地址。
![72b2d0a1e349de212a45877fb11f895e.png](https://i-blog.csdnimg.cn/blog_migrate/f5066cfba7653c1f4c93a0177405be8b.jpeg)
然后将下载的Fiddler证书安装到当前设备中,从而就能在Fiddler中查看到HTTPS数据流了。
3)会话数据
在Inspectors选项卡中,请求信息在面板顶部,响应结果在面板底部,如图29所示。
![a212a043374beb578863e48e8d25f48a.png](https://i-blog.csdnimg.cn/blog_migrate/0a620275ced85bf031badd3c37c4f5c5.jpeg)
请求和响应都包含的子选项卡如下所列。
(1)Headers:请求和响应的首部。
(2)TextView:查看文本格式的请求和响应内容。
(3)SyntaxView:查看语法高亮的请求和响应内容。
(4)HexView:以十六进制的形式显示首部和内容。
(5)Auth:请求和响应的授权和认证。
(6)Cookies:发送和接收到的Cookie信息。
(7)Raw:查看文本格式的请求和响应。
(8)JSON:将请求和响应的内容解析成JSON格式的字符串。
(9)XML:将请求和响应的内容解析成XML格式的字符串。
其余子选项卡的作用如下所列。
(1)WebForms:解析请求的查询字符串。
(2)Transformer:设置响应内容的编码类型。
(3)ImageView:以图像形式显示响应内容。
(4)WebView:预览Web浏览器中显示的响应结果。
(5)Caching:响应的缓存信息。
4)AutoResponder
Fiddler的AutoResponder选项卡提供了一个强大的功能,它能创建请求规则,并在匹配成功时,替换响应结果。
在图30中,包含了一组控制AutoResponder行为的选项,只有勾选了“Enable rules”才能激活当前选项卡,在勾选“Unmatched requests passthrough”后,就能让匹配失败的请求发送到原来的服务器中,而不是返回“404 Not Found”的响应。选项卡的中心区域就是规则集合,其中第一列是匹配条件,第二列是匹配成功后所执行的动作。
![85db04eccf97d43f576d250b5f8937af.png](https://i-blog.csdnimg.cn/blog_migrate/7c0edf8cf67531f236847c8a93c026e5.jpeg)
图31是编辑规则的区域,第一个可写的选择框用于定义规则(即匹配条件),第二个用来指定重定向的本地文件、延迟返回响应结果等各类行为。
![105278b275a8acf3fa06bb6b62093872.png](https://i-blog.csdnimg.cn/blog_migrate/e78e9cfb9bd8b50178f6a0a13849283b.png)
每个匹配条件都会包含一个前缀,可供选择的前缀有NOT、EXACT和REGEX。其中NOT会忽略给定字符串的请求,EXACT会精确匹配给定字符串,REGEX会指定一段正则表达式,通过.NET正则表达式引擎来匹配。
5)发送请求
Fiddler的Composer选项卡(如图32所示)支持发送一条或多条请求,它能编辑请求的方法、首部、内容和URL等部分,其中URL需要包含http://、https://等协议,不仅如此,还能上传文件。
![3fa8fed7d57b53cac7b414adc6a68707.png](https://i-blog.csdnimg.cn/blog_migrate/510e90f60f127eb9f6c8e4745e621d7b.jpeg)
6)过滤流量
Fiddler的Filters选项卡提供了7组过滤选项,包括主机、客户端进程、请求首部、断点、响应状态码、响应类型和大小以及响应首部,如图33所示。
![baf90157e1d7f888fad024e931471cf0.png](https://i-blog.csdnimg.cn/blog_migrate/77dbb1162846321bd475be523ad4b7dc.jpeg)
Filters选项卡可用来修改Cookie、模拟跨域、过滤二级域名的会话、捕获远程进程等。
7)设置断点
Fiddler包含两种断点,分别是请求断点和响应断点。它们中断的时刻不同,前者是请求已发送,但还未到服务器;后者是响应已返回,但还未到客户端。
在图34中,用粗线框出的“Before Requests”和“After Responses”可分别设置全局的请求断点和响应断点,利用Filters和AutoResponder可过滤掉无用的会话,从而能更精确地定位断点。
![01feb42088138334cbc62a0c4065e1c8.png](https://i-blog.csdnimg.cn/blog_migrate/bbfd8ad85b6c13904be128ec938c08df.jpeg)
当执行断点时,可在Inspectors中编辑请求或响应(例如修改URL、首部、内容、查询字符串等),并且所做的变更会被自动提交。而在Inspectors的中间位置(即请求和响应之间)还会出现一个断点栏,如图35所示,包含两个按钮和一个选择框。
![47b0d0303a96402e368495d6628da305.png](https://i-blog.csdnimg.cn/blog_migrate/bddd3b25022755b2815ee05fe5dc38a9.png)
第一个“Break on Response”按钮会为当前会话设置响应断点;第二个“Run to Completion”按钮会继续执行会话并且不再设置断点;选择框用来配置响应结果,提供了多套特定模板以及上传文件的入口。
如果在QuickExec中输入g命令后,那么就会移除所有断点,恢复会话的执行。
三、性能测试
在Fiddler中,不仅能清晰的看到页面权重、缓存信息、压缩情况等数据,还能配置各种规则来隔离性能瓶颈。
1)分析会话性能
在Statistics选项卡中,记录了处理会话所花费的各项参数的时间,而利用这些数据就可以分析出会话的性能问题,表8列出了各个性能参数的具体说明。
![d3b5731b365e556ec72f3c2c16d31242.png](https://i-blog.csdnimg.cn/blog_migrate/dcdfcea815cf31cdaeba1512659cf1da.jpeg)
点击下方的“Show Chart”会出现一张饼图,其切片是各个MIME类型以及数据流首部的字节数,如图36所示。
![f125514a1f167fcfcdea89f7614979f7.png](https://i-blog.csdnimg.cn/blog_migrate/c2a3777e6aa341b79bd3df12dab0f877.jpeg)
2)分析瀑布图
选中一个或多个会话后,可在Timeline选项卡中看到数据流的瀑布图,如图37所示。
![f9619aa5dc2be0ddff183c9be8ead2ad.png](https://i-blog.csdnimg.cn/blog_migrate/447829e498dbed7a183ebd2099ca6b1a.jpeg)
默认采用时间轴模式,即横轴表示时间,纵轴表示文件名,线条栏表示会话。当鼠标悬在线条栏上时,在下方的状态栏会显示该会话的更多信息。
条形栏会在ClientBeginRequest时刻开始绘制,然后在ClientDoneResponse时刻结束绘制。条形栏会根据响应的MIME类型着色,其中亮绿色是图像、军绿色是JavaScript、紫色是CSS、蓝色是其它文件。条形栏中的黑色竖线表示ServerBeginResponse的时间。
条形栏前面有两个圆圈,上方表示客户端与Fiddler之间的连接,下方表示Fiddler与服务器之间的连接,而它们都包含两种颜色,绿色表示复用连接,红色表示新建连接。条形栏后面的红色X图标表示服务器返回的响应首部中包含“Connection:close”,会阻止后续请求复用该连接。
3)模拟HTTP压缩
HTTP规范提供了两种提高性能的编码方式:压缩(Compression)和分块传输编码(Chunked Transfer-Encoding),而在Inspectors选项卡的Transformer中可以设置这两种编码方式,如图38所示。
![5a09eb02646490075196600de79d87e1.png](https://i-blog.csdnimg.cn/blog_migrate/e13ff8621178980060aff65b07525fbb.jpeg)
Fiddler提供了4种压缩算法:GZIP、DEFLATE、BZIP2和Brotli。每当选中某个算法或复选框时,“Response Body”的字节数就会改变,有时在“HTTP Compression”的下方还会有简短的信息提示,从而就能对比使用Transformer前后的差异。图39和图38应用的是同一个响应,在选中GZIP压缩算法后,响应内容的字节数明显降低了很多。
![8f6fd7194ed87008c2fef7478effcad0.png](https://i-blog.csdnimg.cn/blog_migrate/13c8f0e05b05c5c201be3c620017be56.jpeg)
四、扩展
Fiddler提供了多样化的扩展模型,包括FiddlerScript、.NET开发、FiddlerCore以及第三方插件。
1)FiddlerScript
FiddlerScript既能扩展Fiddler的菜单(例如Tools、Rules等),也能过滤或修改会话。Fiddler在处理每个会话时,都会执行CustomRules.js中的方法,而在FiddlerScript选项卡中能编辑该脚本文件,如图40所示。
![cb393ff8d5473eaaffedb3ab45653142.png](https://i-blog.csdnimg.cn/blog_migrate/470ccd891f65bb87c52ee4c58b5516c8.jpeg)
Fiddler在上图的Handlers类中保留了多个静态函数(例如OnPeekAtResponseHeaders、OnBeforeResponse等),它的参数就是当前会话,可以在其内添加自定义的逻辑。Fiddler还提供了多个工具函数和属性,用来完成一些常见任务,例如在状态栏上设置文本,播放音频文件等。
2).NET扩展Fiddler
在Fiddler中,还可以通过.NET框架支持的语言(例如C#、http://VB.NET等)来进行扩展。.NET构建的扩展无需修改FiddlerScript中的脚本文件,只要安装到电脑中就能使用,并且在控制面板中就能卸载。
由于FiddlerScript构建的扩展,在Fiddler启动时需要重新编译,而.NET构建的扩展并不会这样,因此后者的加载速度和运行时性能都要好很多,但与此同时,其开发复杂度也会上升很多。
3)FiddlerCore
FiddlerCore是一个.NET类库,可以集成到.NET应用程序中,只提供了Fiddler的代理功能,可用来捕获、过滤或修改HTTP和HTTPS流量,而不必借助Fiddler UI,像自动化测试这类情况就很适合使用FiddlerCore。在图41中,左边是包含扩展的Fiddler应用,右边是集成FiddlerCore的用户应用。
![49cca6cf8e2538b3c65ad1b74cbe7f1e.png](https://i-blog.csdnimg.cn/blog_migrate/81970e34ba5bd6b9270d93a862643b94.jpeg)
4)功能插件
Fiddler官方和独立开发者们提供了丰富的功能插件(即附加组件),可大大提升Fiddler的可用性和测试性,在下面的地址中列出了部分扩展。接下来会通过一个例子来说明Fiddler插件的用法。
https://www.telerik.com/fiddler/add-ons
目前很多网站都会对自己的JavaScript文件进行压缩(如图42所示),如果要在Fiddler中查看这类脚本,那么就得使用JavaScript Formatter插件,它能将压缩代码格式化,使之可读。
![9076619eb84578e2ac7cce506680b935.png](https://i-blog.csdnimg.cn/blog_migrate/fd4bce52eeddfa8f05cd7567bc9f97d9.jpeg)
首先从官网上下载它的安装包,安装成功后再重启Fiddler,然后在会话列表中右击想要查看的JavaScript文件,得到图43所示的上下文菜单,选择用粗线框出的选项。
![0019164bf37ea0c149b541ae0110ab10.png](https://i-blog.csdnimg.cn/blog_migrate/9bb1ce69dc9638bbf79a2520ef8be016.jpeg)
此时在SyntaxView选项卡中就能查看到美化后的脚本了,如图44所示。
![55c7a52058431d7a2124394a8ac036e7.png](https://i-blog.csdnimg.cn/blog_migrate/6ed69edcd68ba19b181984d0117d4fe3.jpeg)