Fiddler移动端抓包
本篇文章,博主想使用通俗易懂的话语,让大家明白一下内容:
抓包 包 (Packet) 是TCP/IP协议通信传输中的数据单位,一般也称“数据包”。
- 什么是抓包
- 哪些场景需要用到抓包
- Fiddler抓包的原理
- 怎样使用Fiddler进行移动端抓包
我们平常测试过程中所说的数据包其实就是接口请求的数据,在HTTP请求中,包括请求头信息、请求内容、响应头信息、响应内容。
什么是抓包
用特定的工具获取客户端与服务端之间发送和返回的数据包。目的是分析数据包的协议、内容等,从而判断接口的设计是否符合要求,比如抓包某次请求的请求参数与响应参数,查看参数是否正确。
哪些场景下需要抓包
对于初学者或者没有接触过接口测试的同学而言,可能不太明白做接口测试或者接口自动化测试为什么一定要学会对接口数据进行抓包。
那么在哪些场景下需要抓包获取请求数据呢?
- 重现bug,需要截取数据定位问题时;
- 判断问题是前端bug还是后端bug时;
- 做接口测试,但开发没有提供接口文档时,需要抓包才能获取接口信息;
- 某个功能场景或者某些功能场景我们不知道调用了哪些接口,或者不知道接口调用的先后顺序时;
- 需要修改返回参数时(用于mock或者别的场景)
Fiddler 抓包工具有很多种,如Wireshark、Fiddler、Charlse、Tcpdump、浏览器工具(F12)等,但在软件测试工作中抓包对象一般是HTTP协议的接口,所以最多的是浏览器工具、Fiddler/Charlse。
Fiddler特点简单归纳如下:
- Fiddler能抓取客户端和服务器之间的HTTP/HTTPS请求,可以对接口请求设置断点,甚至修改输入输出数据
- Fiddler只能抓取HTTP/HTTPS协议
- Fiddler除能对PC端浏览器抓包外,还支持对移动端进行抓包
通常,我们使用浏览器浏览网页,或者使用手机上的APP,交互可以使用以下简化的流程图表示:
文章图片
客户端(PC端或移动端) 向服务端通过发送HTTP请求进行数据交互,而我们的需求是,抓取这个交互过程中的数据。
我们只需要在客户端与服务端之间加上一个中介,让它们之间交互的数据都通过这个中介,中介记录这些通过自身的数据,就能获取到客户端与服务端之间具体的交互数据了。
Fiddler
便可以充当这个中介角色,交互流程如下:文章图片
启动
Fiddler
其实就是启动了一台代理web服务器(Proxy),代理地址为127.0.0.1
,端口为8888
。只要HTTP请求通过127.0.0.1:8888
(即Fiddler) 进行代理发送与接收,Fiddler就会记录经过自身HTTP请求数据,便是抓取到HTTP请求的相关数据。而怎样才能使得HTTP请求都通过
127.0.0.1:8888
进行代理?Fiddler启动时IE浏览器的代理会自动设置127.0.0.1:8888
为代理地址,Chrome、Firefox需要在浏览器中手动修改,移动端则需要在手机里设置。安装
进入官网下载,地址为:https://www.telerik.com/download/fiddler
【Fiddler移动端抓包】需填写内容可填写如下,Windows系统点击【Download for Windows】,点击后会跳转页面并开始下载 (没有的话可以多尝试两次) ,如果没有下载可根据跳转页面提示进行点击。
文章图片
下载后得到安装文件
FiddlerSetup.exe
,一路傻瓜式安装即可。目前下载的版本为Progress Telerik Fiddler Classic
。安装完成后,打开Fiddler,主界面如下:
文章图片
- 如图所示,切换至Inspectors可查看对应请求的请求参数和返回参数
- 请求参数、返回参数不同内容及格式的展示,可以切换图中对应展示窗口顶部的Tab按钮,如Headers、WebForms、Raw、Json等。
- 会话窗口图标说明见文章末说明。
Fiddler移动端抓包 我们先来屡一下移动端抓包的大概思路:
- Fiddler需要设置允许远程计算机连接,即允许手机移动端抓包;
- 设置手机代理网络代理,使手机通过Fiddler代理发送HTTP请求 (即Fiddler充当数据发送接收的中介);
- https请求抓包设置(如果只抓取http请求,以上两步设置就可以了,但实际工作中经常需要抓取https请求数据)。
第一步:允许远程计算机连接
设置步骤:Tools-->Options-->Connections-->勾选Allow remote computers to connect-->再点击OK,其他默认即可,如下图所示:
文章图片
勾选后如果有弹窗确认页面,点击【确定】即可。顺便说一下,上图勾选页面中的
8888
为默认的端口号,在第二步设置时需要使用。第二步,设置手机网络代理
首先,需要先获取到安装Fiddler的电脑的
IPv4
地址,在cmd中输入ipconfig
,如下图所示:文章图片
然后,在手机上找到对应的
WLAN
网络,进行该网络代理的设置,以荣耀V20手机为例,操作步骤如下图所示:手机系统设置-->WLAN-->修改网络-->高级选项-->代理-->选择手动-->主机名填入上一步IPv4-->端口填入默认的8888-->保存
文章图片
注意:
- 手机必须与电脑连接的是同一个网络,即连同一个WIFI或手机直接连电脑的热点,再对这个网络进行代理设置,否则无法抓取数据。
- 第2步选择修改网络时,手机型号不同可能需要不一样的操作才能进入到修改网络页面。
文章图片
可以看到,这里面只抓取了http请求,如果要对https请求进行抓包,则还需要进行下面的操作。
第三步,允许捕获HTTPS连接
设置步骤:Tools-->Options-->HTTPS-->勾选Decrypt HTTPS traffic-->再勾选Ignore server certificate errors-->点击OK
文章图片
注意,保存设置后需要重启Fiddler才会生效。
第四步,手机安装证书
步骤如下:
- 在手机上选择任意浏览器,输入第二步中的设置的代理地址,host为即Fiddler安装电脑的IPv4地址,端口号即为默认的8888
- 在
1
打开的网页中点击FiddlerRoot certificate
下载证书
文章图片
Android手机到这一步就可以了,苹果手机还需要在手机设置里去信任下载的证书,信任证书的操作步骤这里不做过多说明。
完成这两步后,我们即可以抓取手机发出的http请求,又可以抓取手机发出的https请求。在手机上打开今日头条APP,验证如下:
文章图片
至此,Fiddler移动端抓包设置便完成。
附上会话窗口图标说明,如下:
文章图片
文章图片
推荐阅读
- 想要实时把控工作进度(Smartbi移动BI你值得拥有!)
- 移动与web前端开发|【web前端开发 | CSS】CSS高级技巧
- 云上的移动性能测试平台
- vue项目判断|vue项目判断 是否是移动端 再依据判断跳转
- 定位|Vue.js开发移动端经验总结
- 阿里云移动研发平台EMAS(2月产品动态)
- 前端|我的第一次移动端页面制作 — 总结与思考
- 微信小程序|基于微信小程序的移动智能学习平台的设计开发和实现
- 极客前端|移动端兼容宝典大全,专治各种不适
- java|你们对移动端架构有怎样的思考()