前端利器躬行记（6）——Fiddler

　　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、调试断点、修改请求或响应等功能。

图14  Fiddler的工作原理

一、用户界面

　　Fiddler的用户界面包含6块区域：主菜单栏（1）、工具栏（2）、会话列表（3）、选项视图（4）、命令行工具QuickExec（5）和状态栏（6），如图15所示。

图15  Fiddler的用户界面

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：不仅提供了多条链接，可跳转到网上论坛、在线文档等页面，还能检查是否是最新版本以及显示当前版本的基本信息。

图16  TextWizard

图17  Host Remapping

2）工具栏

　　Fiddler的工具栏提供了常见命令的按钮以及预定义的快捷方式（如图18所示），例如重发请求、移除断点、保存会话、清除WinINET缓存、指示系统是否在线等。

图18  工具栏

　　当把鼠标悬停在某个按钮上时，会显示一条描述其功能的提示信息，如图19所示。

图19  按钮的提示信息

3）会话列表

　　Web会话记录了客户端和服务器之间的一系列交互，一个会话就是一个事务，由一条请求命令和一个响应结果组成。在Fiddler的会话列表中，每个条目代表一个会话，包含一段重要的摘要信息，如图20所示。

图20  会话列表中的摘要信息

　　关于每列的描述可参考表5。

表5  列包含的信息

列名	描述
#	图标和递增的唯一ID
Result	响应状态码，例如404、302等
Protocol	协议，例如HTTP、HTTPS和FTP
Host	域名和端口号
URL	路径、文件和查询字符串
Body	响应包含的字节数
Caching	响应中的两个首部Cache-Control和Expires的值
Content-Type	响应中的Content-Type首部的值
Process	发起本次请求的本地Windows进程
Comments	通过脚本或会话列表中右键（即上下文菜单）添加的注释
Custom	通过脚本设置的文本字段

　　表中的图标包括三类：会话进度、请求类型和响应类型。以图20的首末两个会话中的图标为例，第一个表示加密的HTTPS数据流，最后一个表示响应是个图像文件。

4）选项视图

　　Fiddler的选项视图默认有9个选项卡（如图21所示），其中Log选项卡收集日志信息，Fiddler Orchestra Beta选项卡提供远程Web调试的功能，其余选项卡将在后文做单独讲解。

图21  默认的选项卡

5）QuickExec

　　Fiddler的QuickExec允许用户快速启动脚本命令，大致分为三类：选择数据流、FiddlerScript命令和其它，表6挑选了几个常用的命令。

表6  QuickExec中的命令

命令	描述
?searchtext	搜索URL中包含指定文本的会话，搜索结果会被高亮
=status	选中指定状态码的会话
@host	选中包含指定主机的域名或IP地址的会话
cls	清空会话列表
g	恢复所有被断点暂停的会话
bpu urltext	当会话的URL包含指定文本时，会为其创建请求断点；而当没有urltext参数时，取消该断点
bpafter urltext	当会话的URL包含指定文本时，会为其创建响应断点；而当没有urltext参数时，取消该断点
!dns hostname	为目标主机执行DNS查询，在Log选项卡中显示结果
toolbar	显示工具栏

　　QuickExec还提供了多组快捷键（即热键），表7挑选了几组常用的快捷键。

表7  QuickExec中的快捷键

快捷键	描述
ALT+Q	光标聚焦到QuickExec
CTRL+R	打开FiddlerScript编辑器
CTRL+E	打开TextWizard
CTRL+Down	选择下一个会话
CTRL+Up	选择上一个会话
CTRL+T	激活Inspectors的子选项卡TextView
CTRL+H	激活Inspectors的子选项卡Headers
CTRL+M	最小化Fiddler
CTRL+SHIFT+DEL	清除WinINET缓存

6）状态栏

　　Fiddler的状态栏处于用户界面的最下方，显示了5项配置信息（如图22所示），从左往右的作用依次为：

图22  状态栏

（1）是否让Fiddler成为系统代理。

（2）根据选择的进程类型过滤数据流。

（3）断点影响的会话类型，包括全部请求、全部响应和无。

（4）选中的会话数和总会话数。

（5）选中会话的URL，如果选中了多个，那么只显示第一个。

二、Web调试

　　Fiddler能够调试来自于桌面浏览器和移动设备的数据流。

1）代理设置

　　在Windows上运行的大部分浏览器（例如IE、Chrome等），其数据流都能被Fiddler直接捕获，而其余浏览器要么需要安装插件，要么需要单独配置。

　　如果要在iOS或Android设备上捕获数据流，那么首先需要配置Fiddler的Tools菜单中的Options，使其允许远程连接，注意看图23用粗线框出的选项。

图23  Fiddler允许远程连接

　　然后让移动设备与Fiddler处于同一网段（例如连上相同的Wi-Fi），并修改其WLAN设置，如图24所示，其中服务器就是Fiddler所在电脑的IP地址，而端口就是Fiddler默认的工作端口号。

图24  设置代理服务器地址和端口号

2）解密HTTPS

　　HTTPS是HTTP的安全版本，如果要让Fiddler将其捕获，那么需要先在Options的HTTPS选项卡中勾选“Decrypt HTTPS traffic”，允许解析HTTPS的请求和响应，如图25用粗线框出的选项。

图25  Fiddler允许解析HTTPS

　　当第一次勾选时，Fiddler会生成一张自签名的证书，并且需要确认是否信任它，如图26所示。

图26  信任Fiddler证书

　　在信任该证书后，就需要将其安装，如图27所示。

图27  安装Fiddler证书

　　如果要让Fiddler能够捕获移动设备的HTTPS流量，那么还需要额外几步。首先打开设备的浏览器，在地址栏中输入代理服务器的IP和Fiddler的工作端口，得到下载证书的页面，如图28所示，图中用粗线框出的就是下载地址。

图28  下载Fiddler证书

　　然后将下载的Fiddler证书安装到当前设备中，从而就能在Fiddler中查看到HTTPS数据流了。

3）会话数据

　　在Inspectors选项卡中，请求信息在面板顶部，响应结果在面板底部，如图29所示。

图29  Inspectors选项卡

　　请求和响应都包含的子选项卡如下所列。

（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”的响应。选项卡的中心区域就是规则集合，其中第一列是匹配条件，第二列是匹配成功后所执行的动作。

图30  行为选项和规则集合

　　图31是编辑规则的区域，第一个可写的选择框用于定义规则（即匹配条件），第二个用来指定重定向的本地文件、延迟返回响应结果等各类行为。

图31  编辑规则

　　每个匹配条件都会包含一个前缀，可供选择的前缀有NOT、EXACT和REGEX。其中NOT会忽略给定字符串的请求，EXACT会精确匹配给定字符串，REGEX会指定一段正则表达式，通过.NET正则表达式引擎来匹配。

5）发送请求

　　Fiddler的Composer选项卡（如图32所示）支持发送一条或多条请求，它能编辑请求的方法、首部、内容和URL等部分，其中URL需要包含http://、https://等协议，不仅如此，还能上传文件。

图32  Composer选项卡

6）过滤流量

　　Fiddler的Filters选项卡提供了7组过滤选项，包括主机、客户端进程、请求首部、断点、响应状态码、响应类型和大小以及响应首部，如图33所示。

图33  Filters选项卡

　　Filters选项卡可用来修改Cookie、模拟跨域、过滤二级域名的会话、捕获远程进程等。

7）设置断点

　　Fiddler包含两种断点，分别是请求断点和响应断点。它们中断的时刻不同，前者是请求已发送，但还未到服务器；后者是响应已返回，但还未到客户端。

　　在图34中，用粗线框出的“Before Requests”和“After Responses”可分别设置全局的请求断点和响应断点，利用Filters和AutoResponder可过滤掉无用的会话，从而能更精确地定位断点。

图34  设置断点

　　当执行断点时，可在Inspectors中编辑请求或响应（例如修改URL、首部、内容、查询字符串等），并且所做的变更会被自动提交。而在Inspectors的中间位置（即请求和响应之间）还会出现一个断点栏，如图35所示，包含两个按钮和一个选择框。

图35  断点栏

　　第一个“Break on Response”按钮会为当前会话设置响应断点；第二个“Run to Completion”按钮会继续执行会话并且不再设置断点；选择框用来配置响应结果，提供了多套特定模板以及上传文件的入口。

　　如果在QuickExec中输入g命令后，那么就会移除所有断点，恢复会话的执行。

三、性能测试

　　在Fiddler中，不仅能清晰的看到页面权重、缓存信息、压缩情况等数据，还能配置各种规则来隔离性能瓶颈。

1）分析会话性能

　　在Statistics选项卡中，记录了处理会话所花费的各项参数的时间，而利用这些数据就可以分析出会话的性能问题，表8列出了各个性能参数的具体说明。

表8  性能参数

参数名	描述
Request Count	选中的会话数
Bytes Sent	发送的字节数
Bytes Received	接收的字节数
ClientConnected	客户端第一次和Fiddler建立连接的时间
ClientBeginRequest	客户端开始向Fiddler发送请求的时间
GotRequestHeaders	Fiddler从客户端接收完请求首部的时间
ClientDoneRequest	Fiddler从客户端接收完整个请求的时间
Determine Gateway	确定使用哪个网关代理所花费的毫秒数
DNS Lookup	解析DNS所花费的毫秒数。由于DNS存在缓存，因此除了第一次，其余时候该值都是0
TCP/IP Connect	建立TCP/IP连接所花费的毫秒数
HTTPS Handshake	在HTTPS握手中所花费的毫秒数
ServerConnected	和服务器或上游网关代理建立TCP/IP连接的时间
FiddlerBeginRequest	Fiddler开始向服务器发送请求的时间
ServerGotRequest	Fiddler向服务器发送完请求的时间
ServerBeginResponse	Fiddler接收服务器响应的第一个字节的时间
GotResponseHeaders	Fiddler从服务器接收完响应首部的时间
ServerDoneResponse	Fiddler从服务器接收完整个响应的时间
ClientBeginResponse	Fiddler开始向客户端发送响应的时间
ClientDoneResponse	Fiddler向客户端发送完响应的时间
Overall Elapsed	花费的总时间
Estimated Worldwide Performance	在不同的地区和连接方式下所花费的时间，注意，由于实际网络会受很多因素的影响，因此该估值可能不准确

　　点击下方的“Show Chart”会出现一张饼图，其切片是各个MIME类型以及数据流首部的字节数，如图36所示。

图36  字节饼图

2）分析瀑布图

　　选中一个或多个会话后，可在Timeline选项卡中看到数据流的瀑布图，如图37所示。

图37  瀑布图

　　默认采用时间轴模式，即横轴表示时间，纵轴表示文件名，线条栏表示会话。当鼠标悬在线条栏上时，在下方的状态栏会显示该会话的更多信息。

　　条形栏会在ClientBeginRequest时刻开始绘制，然后在ClientDoneResponse时刻结束绘制。条形栏会根据响应的MIME类型着色，其中亮绿色是图像、军绿色是JavaScript、紫色是CSS、蓝色是其它文件。条形栏中的黑色竖线表示ServerBeginResponse的时间。

　　条形栏前面有两个圆圈，上方表示客户端与Fiddler之间的连接，下方表示Fiddler与服务器之间的连接，而它们都包含两种颜色，绿色表示复用连接，红色表示新建连接。条形栏后面的红色X图标表示服务器返回的响应首部中包含“Connection:close”，会阻止后续请求复用该连接。

3）模拟HTTP压缩

　　HTTP规范提供了两种提高性能的编码方式：压缩（Compression）和分块传输编码（Chunked Transfer-Encoding），而在Inspectors选项卡的Transformer中可以设置这两种编码方式，如图38所示。

图38  默认的Transformer

　　Fiddler提供了4种压缩算法：GZIP、DEFLATE、BZIP2和Brotli。每当选中某个算法或复选框时，“Response Body”的字节数就会改变，有时在“HTTP Compression”的下方还会有简短的信息提示，从而就能对比使用Transformer前后的差异。图39和图38应用的是同一个响应，在选中GZIP压缩算法后，响应内容的字节数明显降低了很多。

图39  选中GZIP压缩算法后的Transformer

四、扩展

　　Fiddler提供了多样化的扩展模型，包括FiddlerScript、.NET开发、FiddlerCore以及第三方插件。

1）FiddlerScript

　　FiddlerScript既能扩展Fiddler的菜单（例如Tools、Rules等），也能过滤或修改会话。Fiddler在处理每个会话时，都会执行CustomRules.js中的方法，而在FiddlerScript选项卡中能编辑该脚本文件，如图40所示。

图40  FiddlerScript选项卡

　　Fiddler在上图的Handlers类中保留了多个静态函数（例如OnPeekAtResponseHeaders、OnBeforeResponse等），它的参数就是当前会话，可以在其内添加自定义的逻辑。Fiddler还提供了多个工具函数和属性，用来完成一些常见任务，例如在状态栏上设置文本，播放音频文件等。

2）.NET扩展Fiddler

　　在Fiddler中，还可以通过.NET框架支持的语言（例如C#、VB.NET等）来进行扩展。.NET构建的扩展无需修改FiddlerScript中的脚本文件，只要安装到电脑中就能使用，并且在控制面板中就能卸载。

　　由于FiddlerScript构建的扩展，在Fiddler启动时需要重新编译，而.NET构建的扩展并不会这样，因此后者的加载速度和运行时性能都要好很多，但与此同时，其开发复杂度也会上升很多。

3）FiddlerCore

　　FiddlerCore是一个.NET类库，可以集成到.NET应用程序中，只提供了Fiddler的代理功能，可用来捕获、过滤或修改HTTP和HTTPS流量，而不必借助Fiddler UI，像自动化测试这类情况就很适合使用FiddlerCore。在图41中，左边是包含扩展的Fiddler应用，右边是集成FiddlerCore的用户应用。

图41  Fiddler.exe VS YourApp.exe

4）功能插件

　　Fiddler官方和独立开发者们提供了丰富的功能插件（即附加组件），可大大提升Fiddler的可用性和测试性，在下面的地址中列出了部分扩展。接下来会通过一个例子来说明Fiddler插件的用法。

https://www.telerik.com/fiddler/add-ons

　　目前很多网站都会对自己的JavaScript文件进行压缩（如图42所示），如果要在Fiddler中查看这类脚本，那么就得使用JavaScript Formatter插件，它能将压缩代码格式化，使之可读。

图42  压缩后的脚本

　　首先从官网上下载它的安装包，安装成功后再重启Fiddler，然后在会话列表中右击想要查看的JavaScript文件，得到图43所示的上下文菜单，选择用粗线框出的选项。

图43  Make JavaScript Pretty

　　此时在SyntaxView选项卡中就能查看到美化后的脚本了，如图44所示。

图44  美化后的脚本