Fiddler的使用介绍及抓包分析(详解)

(我的公众号“墨石测试攻略”,关注可免费获取全套接口测试实战项目)


1 Fiddler简介

Fiddler是一款网络代理调试工具,可以将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,是目前最常用的http抓包工具之一。

使用场景:接口调试、接口测试、线上环境调试、Web性能分析、定位BUG、开发环境hosts配置、Mock、弱网断网测试

2 Fiddler工作原理

Fiddler通过改写HTTP代理,来监控并截取数据。当浏览器访问服务器时会形成一个请求,浏览器发送请求时,先经过Fiddler,然后再到服务器。服务器返回数据给浏览器时,也会经过Fiddler再到浏览器显示。由于所有的网络数据都会经过Fiddler,因此Fiddler能够截获这些数据,实现数据的抓包。

Fiddler就好比一个房产中介,你(客户端)想要租房子,把你的诉求告诉中介(Fiddler),中介根据你的诉求去(服务器)找符合条件的房子,房子信息是先传给中介的,然后中介再把信息转给你。

在你打开Fiddler的一瞬间,它就已经设好浏览器的代理了,代理地址:127.0.0.1(表示本机),端口8888当你关闭的时候,它又帮你把代理还原了。

3 Fiddler安装

官网下载安装:https://www.telerik.com/download/Fiddler

4 Fiddler使用

4.1 界面介绍

4.1.1工具栏

![在这里插入图片描述](https://img-blog.csdnimg.cn/a995a180f6e74b588c3c9b74e8cff617.png
在这里插入图片描述
在这里插入图片描述

4.1.2 左侧面板

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.1.3 右侧面板

在这里插入图片描述
功能说明:
1、Statistics:请求的性能数据分析
点开一个请求,就可以看到关于HTTP请求的性能及数据分析了。
在这里插入图片描述

ClientConnected: 客户端创建连接的时间
ClientBeginRequest: 客户端开始请求时间
GotRequestHeaders: 获取请求头时间
ClientDoneRequest: 客户端完成请求时间
ServerConnected: 服务器创建连接时间
FiddlerBeginRequest: 代理服务器开始请求时间
ServerGotRequest: 服务器获得请求时间
ServerBeginResponse: 服务器开始响应时间
GotResponseHeaders: 获取响应头时间
ServerDoneResponse: 服务器完成响应时间
ClientBeginResponse: 客户端开始响应时间
ClientDoneResponse: 客户端完成响应时间

【说明】:
这些参数可以体现一个请求从发送到返回响应的时间。

通过选择多个会话来获得这几个会话的总的信息统计,比如多个请求和传输的字节数。选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间。从条形图表中还可以分辨出哪些请求耗时最多,从而对页面的访问进行访问速度优化。

2、Inspectors:查看数据内容
对抓到的请求进行解包,上半部分是请求的内容,下部是响应的内容。在Inspectors面板下,提供Header、TextView、HexView、Raw等多种方式查看单条http(s)请求报文的信息。

HTML/JS/CSS使用TextView可以看到响应的内容;Raw标签可以查看原始的、也是最详细的符合HTTP标准的请求和响应;Auth可以查看授权Proxy-Authorization和Authorization的相关信息;Cookies标签可以看到请求的cookie和响应的set-cookie头信息。
在这里插入图片描述

3、AutoResponder:自动响应
允许拦截指定规则的请求,并返回本地资源或Fiddler资源,从而代替服务器响应。

4、Composer:自定义请求发送服务器
Composer允许自定义请求发送到服务器,用于前后端接口联调,可以模拟向响应的服务器发送数据的过程。

5、Filters:请求过滤规则
Fiters是过滤请求用的,当你刷新一下浏览器,一大片不知道哪来请求,看着碍眼,它还一直刷新你的屏幕。这个时候你可以通过过滤规则来过滤掉那些不想看到的请求。

6、Timeline: 性能分析
对选择多个请求有意义。作用类似HttpWatch。

4.1.4 底部控制面板

1、命令行工具:执行一些快捷操作。
在这里插入图片描述
在这里插入图片描述

2、状态栏:
在这里插入图片描述
Capturing:开启/关闭 Fiddler的监听;
All Process:过滤会话选择

4.2 Fiddler如何抓HTTPS的包

Fiddler默认抓HTTP格式的包,那么对于HTTPS数据包如何抓取呢?

不得不说Fiddler真是个功能强大的好东西,它可以通过伪造CA 证书来欺骗浏览器和服务器。大概原理就是在浏览器面前Fiddler伪装成一个HTTPS服务器,而在真正的HTTPS服务器面前Fiddler又装成浏览器,从而实现解密HTTPS数据包的目的。

具体设置步骤如下:
步骤1:
Tools –> Fiddler Options –> HTTPS
在这里插入图片描述

步骤2:
选择HTTPS栏,勾选Decrypt HTTPS traffic和Ignore server certificate errors两项, Fiddler截获HTTPS请求,点击OK(首次点击会弹出是否信任Fiddler证书和安全提示,直接点击yes就行)
在这里插入图片描述

4.3 Fiddler如何抓手机APP的包

Fiddler可以抓取浏览器的包,那么怎么抓取移动端设备的数据包呢?
步骤1:设置好HTTPS代理(见上一步骤)

步骤2:配置Fiddler允许远程链接
在这里插入图片描述

步骤3:配置移动端设备
(1)移动端的数据包,都是要走WiFi出去,所以首先需要确保手机连接的WiFi和Fiddler出于同一个局域网
(2)要知道电脑的IP地址(当然这个电脑是安装Fiddler的电脑):
方法一:打开Fiddler,点击箭头所指的下三角,鼠标悬浮在Online,可以看到IP地址
在这里插入图片描述

方法二:打开cmd命令行,输入IPconfig查看本机IP

(3)查看Fiddler的端口号,Tools-> Options->Connections,port中值就是端口号,一般默认为8888,不用改

(4)下载证书

①打开手机浏览器,输入http://IP:端口号(例如我的手机,http://10.72.160.181:8888),点击前往(每换一个WiFi都要重新下载安装证书),访问网址之后会跳转到证书下载页,点击FiddlerRoot certificate下载证书

②下载完证书后安装证书:在手机设置中搜索证书,并进入安装证书界面:
在这里插入图片描述

③更改手机无线网的代理

打开Android设备的“设置” ->“WLAN”,找到你要连接的网络,在上面长按,然后选择“修改网络”→勾选“显示高级选项”(不同的手机,设置方法有所不同)→将代理改为手动→在“代理服务器主机名”输入电脑的IP地址,在“代理服务器端口”输入8888,然后保存

④启动手机设备中的浏览器,访问百度首页,打开Fiddler就可以看到抓包数据了

备注:
·手机上设置代理后,Fiddler上抓到的是手机和PC上所有的请求,如果只过滤手机上的请求,且不影响电脑网络设置:
1.在电脑通过cmd命令查找IP:IPconfig ,查看计算机名:set computername
2.在 Fiddler 的 QuickExec 区块,输入以下指令,并按下 Enter 确认。
prefs set Fiddler.network.proxy.registrationhostname +你的电脑名称(刚才查询的)

4.4 抓包分析

根据上面的介绍,大家应该知道怎么抓包了。简而言之,只要客户端进行相关的操作,Fiddler左侧的会话列表都会显示一连串的数据,这个就是抓包数据。那么怎么对抓包信息进行分析呢?

找到对应的请求包→ →看请求信息→看响应结果。

前置知识说明:
在这里插入图片描述
一、找到对应的请求包
怎么抓到目的包,也就是问题对应的包?
建议先停止抓包,并清除之前的记录,然后在客户端进行操作,这样Fiddler上抓到的基本上是当前操作的记录,然后再对抓包数据进行分析。

二、看请求信息
在这里插入图片描述
从这个示例中可以看出,请求方式是POST,POST的信息分四部分,请求行、请求头、空一行、Body,GET请求是没有Body的。

Body是本次请求所提交的数据,如果需要Body进行解码,那么复制Body内容,点击 TextWizard图标,打开解码器,或者选中需要解码的内容,右键选择发送到解码器。
在这里插入图片描述

Raw存放的是原始数据,其他的项是分析请求中的某一种数据。
抓包分析:
看对应的接口有没有触发请求,如果没有请求或请求有问题,那就是前端的BUG。

三、看响应结果
HTTP响应主要由状态行、消息报头、响应正文(和消息报头之间空一行)组成。
在这里插入图片描述

从上述示例的消息报头中可以看出,响应的状态码为200 OK,是响应成功的,响应的类型是application/Json,这是POST请求最常见的Json格式。所以也可以点击Json查看响应正文,树状结构展示,更直观友好。从Json中可以看出,这里传了5个参数。
在这里插入图片描述
抓包分析:

如果前端请求没问题,就看后端返回报文,根据接口文档,返回的数据有误,要具体分析报错的内容。如果是前端传参不对导致的,那就是前端问题,如果传参正确,后端处理不正确,那可能就是后端问题。
如果后端响应了且数据和接口文档一致,那就是前端展示的问题。
总结,按前端→后端→前端的顺序进行分析。

举例:比如一个登录界面,输入用户名密码后点击【登录】发现无响应怎么回事?类似的问题还有,一个支付功能,支付成功后在我的订单里却没有显示。或者一个查询功能,输入条件查询后没有数据展示出来(先排除是否是因为数据库没有数据导致的)。一般都可以套用上面的回答。

猜你喜欢

转载自blog.csdn.net/weixin_44901808/article/details/125759553