你是否了解Fiddler是，有何作用?

1. Fiddler是位于客户端和服务器端的HTTP代理，也是目前最常用的HTTP抓包工具之一。

2. Fiddler能够记录客户端和服务器之间的所有HTTP请求，可以针对特定的HTTP请求，分析请求数据、断点、调试web应用、修改请求的数据，甚至可以修改服务器返回的数据，功能非常强大，是web调试器。

本期小编献上一份Fiddler抓包教程，教你抓得又快又好～

1. Fiddler抓包原理

Fiddler是以代理web服务器的形式工作的，它使用代理地址：127.0.0.1，端口：8888。
Fiddler退出的时候会自动注销，这样就不会影响别的程序。
如果Fiddler非正常退出，这时候因为Fiddler没有自动注销，会造成网页无法访问的问题。解决办法是重新启动下Fiddler。
既然是代理，也就是说:客户端的所有请求都要先经过Fiddler，然后转发到相应的服务器。
反之服务器端的所有响应，也都会先经过Fiddler然后发送到客户端，基于这个原因，Fiddler支持所有可以设置http代理为127.0.0.1:8888的浏览器和应用程序。
使用了Fiddler之后，web客户端和服务器的请求过程如下图所示：

上传图片

【小知识】

B/S架构（如上图）：

1. 编写程序部署到web服务器，web服务运行在服务器上，绑定ip地址并监听某端口，接收和处理http请求。

2. 客户端通过http协议获取服务器上的网页、文档等资源。

超文本传输协议(Hyper Text Transfer Protocol)：

1. 用于从万维网服务器传输超文本到本地浏览器的传送协议。

2. HTTP协议是基于TCP的应用层协议，它不关心数据传输的细节，主要是用来规定客户端和服务端的数据传输格式，最初是用来向客户端传输HTML页面的内容。默认端口是80。

3. http是基于请求与响应模式的、无状态的、应用层的协议。

2. Fiddler工具介绍

Fiddler主界面分为：菜单栏、工具栏、会话列表栏、命令区…等区域，详见下图：

上传图片

接下来会一一讲解图中标注的内容。

2.1 菜单栏

（1）常用功能“文件→捕获通信”：

上传图片

捕获通信：通过快捷键F12控制。
导入会话：将抓取到的会话导出，方便其他人查看。
导出会话：导入会话，追溯历史记录。

（2）常用功能“编辑→移除”：

上传图片

（3）常用功能“编辑→查找会话”：

上传图片

上传图片

移除：删除不需要的HTTP请求信息，支持选中、反选、全选。
查找：通过关键字快速定位HTTP请求信息位置，常用的过滤条件为仅请求和仅响应，结果突出显示(Yellow)。
标记：使用不同颜色标记请求，可使用6种颜色分类标记。

（4）常用功能“工具”：

上传图片

工具→选项：

上传图片

上传图片

工具→WinINET选项：
用于对PC端进行设置代理，Fiddler启动的时候，浏览器的代理就自动挂上了。

上传图片

工具→文字编/解码
作为编码工具，可以用来进行编码、解码、转码操作。

上传图片

2.2 会话列表栏

2.2.1 HTTP请求报文

HTTP请求报文主要由请求行、请求头部、请求正文、空白行4部分组成；GET没有请求体。

上传图片

注意：空白行也就是在请求头结束的下方，会存在一个空白行, 这是必须存在的, 是由HTTP标准规定的。

上传图片

【小知识】

GET与POST区别：

1. 最直观的区别就是GET把参数包含在URL中，POST通过request body (请求体)传递参数。

2. GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

3. GET在浏览器回退时是无害的，而POST会再次提交请求。

4. GET请求只能进行url编码，而POST支持多种编码方式。

5. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

6. GET请求在URL中传送的参数是有长度限制的，而POST没有。

注意：这个限制是由浏览器导致。

7. 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

8. GET参数通过URL传递，POST放request body中。

2.2.2 HTTP响应报文

HTTP响应报文：主要由状态行、消息报头、响应正文、空白行4部分组成。

上传图片

上传图片

上传图片

2.2.3 会话列表

Fiddler抓取到的每条http请求(每一条称为一个session)，包含了请求的ID编号、状态码、协议、主机名、URI、内容类型、body大小、进程信息、自定义备注等信息。

上传图片

注意：

响应数据的长度，通常返回的数据内容越多，用户等待时间越长。
响应数据的类型，除了可以返回网页数据外还可以返回: 图片、文字、音乐、视频...等信息。

上传图片

【小知识】

在Fiddler的会话面板中不会展示请求方式，虽然请求头中有展示，但是每次看接口，都得一个一个点开查看，也很麻烦，因此就以此为例子，添加请求方式列在会话面板。

操作步骤如下：

1. 界面操作配置自定义列:

上传图片

上传图片

上传图片

2. 通过脚本自定义列:

上传图片

StatusText位置添加一行内容：

FiddlerObject.UI.lvSessions.AddBoundColumn("客户端IP", 120, "X-HostIP");

重启Fiddler，查看新增的列：

上传图片

2.2.4 功能面板

上传图片

（1）过滤器

通过过滤器可以过滤掉不需要的HTTP请求，使得抓包更精确。

上传图片

① 点击选择过滤器页签。

② 勾选“使用筛选器”。

③ Hosts下方的第二个下拉框，选择“仅显示下列主机”。

④ 性能测试过程中不需要抓取静态资源，在请求标头中填写正则表达式过滤。

上传图片

REGEX:(?insx)/[^\?/]*\.(css|ico|jpg|png|gif|bmp|wav)(\?.*)?$

⑤ 在下方输入框中输入要抓包的主机地址(多个地址用英文分号隔开，如: localhost;127.0.0.1)，点击右上角的“动作”选择“现在运行筛选器”。

⑥ 如果取消过滤，去掉“使用筛选器”的勾选。

（2）统计

上传图片

“实际性能”参数注解：

客户端连接：客户端与Fiddler建立了连接的时间。
客户端开始请求：客户端开始把请求发给Fiddler的时间。
客户端得到请求：Fiddler接收到客户端发来请求头的时间。
客户端完成请求：客户端完成将HTTP请求发送给Fiddler的时间。
确定网关：确认网关使用的时间。
DNS解析：DNS解析使用的时间。
TCP/IP连接：Fiddler与服务器建立连接（三次握手）使用的时间。
HTTP 握手：Fiddler与服务器HTTPS握手使用的时间。
连接服务器：Fiddler与服务器已建立连接的时间。
Fiddler开始请求：Fiddler开始把请求发给服务器的时间。
服务器请求：服务器接收完Fiddler发来的整个请求的时间。
服务器开始响应：Fiddler接收到服务器返回的第一个响应字节的时间。
得到响应头：Fiddler接收完成服务器发来请求头的时间。
服务器响应：服务器已将整个HTTP响应完全发送到Fiddler的时间。
客户端开始响应：Fiddler开始向客户端返回已接收到的HTTP响应数据的时间。
客户端做出响应：Fiddler已将整个HTTP响应数据完全发送给客户端的时间。

（3）检查

上传图片

① 可以用多种不同格式查看每个请求和响应的内容。

② 页签分为上下两部分，上部显示的是发出的请求相关信息，下部显示的是接收的响应相关信息。

请求部分：

标头：显示客户端发送到服务器的 HTTP 请求的 header，显示为一个分级视图，包含了 Web 客户端信息、Cookie、传输状态等。
文本视图：显示 POST 请求的 body 部分为文本。
语法视图：为Textview的加强版，查看语法高亮的请求内容。加上了行数标识，鼠标右键的菜单中，相较Textview多了一些功能，如Json、XML格式化，查找替换等。
Web表单：以表格的方式显示请求的GET参数和POST body内容。
Cookie：显示请求发送的cookies信息。
原始：将整个请求显示为纯文本。

响应部分：
有时候返回的数据过大，会对数据做编码或者压缩（例如 GZIP），需要转换后才能在 TextView 里正常浏览。点击该区域顶部的黄色提示文字或者下面的 Remove HTTP Chunked Encoding 按钮，都能执行转换或者解压缩。如果该请求没编码/压缩是看不见黄色提示文字提示的，其他内容参考请求部分。

③ 自动回复器

上传图片

*200-SESSION_107是服务器返回，这里可以修改任意字符串。

上传图片

通过shift+r 触发回放，观察response返回值。

上传图片

客户端使用不安全的网络，Fiddler可以篡改服务器返回，欺骗客户端，从而套取有价值的信息。在实操演练章节有案例。

⑤ 组合器

支持手动构建和发送 HTTP、HTTPS 和 FTP 请求。此外，还可以从 Web 会话列表中拖拽会话，把它放到 Composer 选项卡中，把该 Session 的请求复制到用户界面。点击 Execute 按钮，把请求发送到服务器端。如下图：

上传图片

上传图片

2.3 命令区

通过“命令行help?”，自动跳转官方帮助页面。

Fiddler一些常用内置命令：

select 选择命令：select image。
? text 搜索命令：选择所有 URL 匹配问号后的字符的全部 session。
> size和 < size 命令：请求大小过滤命令。
= status 命令：状态晒选命令。
@ host命令：选择包含指定 HOST 的全部 HTTP请求。
cls清屏命令：清屏 (Ctrl+x 也可以清屏)。
= post命令：查询post请求的session。

3. 实操演练

3.1 自动断点-定位前后端问题

测试步骤：

（1）进入添加人员的页面，填写正确的手机号码和其他信息。

上传图片

（2）打开Fiddler拦截开关: 【规则】->【自动断点】->【请求之前】。

上传图片

（3）回到添加人员界面，点击“保存”按钮。

（4）回到Fiddler，修改[请求体]，如修改手机号码内容。

注意：手机不要写11位的看看会不会报错，用于测试前后端缺陷。

（5）点击Fiddler中请求下方的绿色按钮“运行到结束”。

上传图片

（6）查看浏览器前端返回信息技术后端返回响应。

上传图片

上传图片

（7）关闭Fiddler拦截开关: 【规则】->【自动断点】->【已禁用】。

总结：

当前端输入框有条件限制的时候，在前端界面无法输入超出字数范围的内容去验证服务器的处理逻辑时，就可以通过Fiddler的请求前断点篡改数据来验证。测试结果表明产品在前端和后端都做了很好的校验限制。

3.2 自动回复器_MOCK模式

（1）进入自动响应界面。

上传图片

（2）选择列表左侧请求，点击“添加规则”。

上传图片

（3）选择响应结果，模拟测试场景 (此处支持打开本地文件，根据文件内响应数据(例如json文件)进行mock)。

上传图片

（4）点击右下角“保存”，保存响应设置。

上传图片

（5）勾选下图选项:

上传图片

启用规则: 开启或禁用自动重定向功能，勾选上时，激活规则。
接受所有连接。
不匹配的请求通过: 未匹配的请求穿透，即勾选上时，不影响那些没满足我们处理条件的请求。

（6）回放请求:

使用快捷键shift+r 调出重复计数弹窗或前端点击“保存”按钮。

上传图片

上传图片

上传图片

总结：

自动回复器用于将HTTP请求重定向为指定的返回类型。这个功能有点像是一个代理转发器，可以将某一请求的响应结果替换成指定的资源，可以是某个页面也可以是某个本地文件。可用于尚未开发好的产品做mock调试。

3.3 弱网测试

上传图片

操作步骤：

（1）打开Fiddle(开启代理)。

（2）打开网速模拟模式开关(【规则】->【性能】->【模拟调制解调器速度】)。

上传图片

（3）浏览器访问APP，或者用手机浏览器访问网络，观察功能响应或者页面刷新速度。

（4）自定义网络速度，在自定义规则中配置 (【规则】->【自定义规则】)延迟时间。通过ctrl+s 修改保存。

上传图片

上传图片

（5）访问网页验证修改效果

非弱网模式请求耗时：

上传图片

弱网模式请求耗时：

上传图片

划重点

通过对Fiddler的学习，会对HTTP有更加深入的感悟和理解，它能帮助我们：

1. 监控浏览器所有的HTTP/HTTPS流量。

2. 查看、分析请求内容细节。

3. 伪造客户端请求和服务器响应。

4. 测试网站的性能。

5. 解密HTTPS的web会话。

6. 全局、局部断点功能。

7. 支持第三方插件扩展。

至于Fiddler软件其他功能的使用，就要从今后的项目当中去吸取实战的经验，以及不断的总结, 才能对Fiddler这款软件的使用更加得心应手！

#往期推荐

# 教你构建一个高性能、易伸缩的Redis集群

# 搞懂主从复制原理及搭建过程，只需这篇文章！

# 学会pgbackrest备份，再也不怕删库！

# 关于rsync，你不知道的事

更多精彩内容，“码”上了解！↓

上传图片

Fiddler抓包教程，教你怎样抓得好抓得快

Fiddler抓包教程，教你怎样抓得好抓得快

恭喜您！