如何使用fiddler抓取手机APP的包,进行前后端bug定位

1,367 阅读4分钟

如何使用fiddler抓取手机APP的包,进行前后端bug定位

前置条件: 抓包的电脑和运行app的手机必须是在同一个局域网(电脑和手机连接的是同一个无线路由器)

当前两个主流抓包工具:Fiddler和Charles

说明:Charles支持windows,mac,linux;Fiddler支持windows,在mac和linux使用需要很复杂的设置

如果windows首选Fiddler,如果Mac只能选Charles

fiddler设置步骤

1.开启抓包功能,并设置端口号

2.生成证书,并导出到桌面

开启设置

  1. Tools—>options设置,

image-20231002143906727.png 2. ##### 点击Connections设置,把"Allow remote computers to connect"选项前的勾选框,勾选上 image-20231002143948579.png 3. ##### 确认监听端口为8888 image-20231002144021500.png

4.生成并导出证书

image-20231002144607170.png

二、APP设置

1.上传证书到手机,并安装
2.手机中设置代理

1.安装Fiddler证书:

​ 1.上传证书到手机: 将PC端导出到桌面的证书直接拖拽进模拟器窗口

  1. 进入系统设置—>安全—>凭据管理,选择从SD卡安装,找到证书(搜索fiddler),双击安装证书,自 定义命名并确定,安装成功后需要自定义锁屏密码(选择PIN码,进行设置); image-20231002154212677.png
3.设置手机代理

进入系统设置—>WLAN,选择当前连接的网络,在弹出窗口选择修改网络,代理选择手动,代理 服务器主机名输入本机IP,代理服务器端口与步骤1.1中设置的监听端口保持一致;

image-20231002155143524.png

image-20231002155332091.png

通过Fiddler抓包工具抓包

目的:定位BUG是属于前端还是后端

前后端问题定位

1.进行抓包,没有抓到接口---结论:前端问题(前端在用户操作时,没有调用登录接口)
2.进行抓包,有抓到接口查看请求数据,请求数据错误---结论:前端问题(没有按照后端要求传递请求数据)
3.进行抓包,有抓到接口查看请求数据且正确,查看响应数据错误--结论:后端问题
4.进行抓包,有抓到接口查看请求数据且正确,查看响应数据正确--结论:前端问题(前端获取接口返回的响应数据,在页面的展示出现问题)

弱网测试:

目的:模拟用户在网络情况比较糟糕的情况下,能够正常使用系统
实现步骤:
	1.设置模拟网络延迟时间 
	2.开启网络限速
	3.在浏览器中操作要进行弱网测试的功能
1.设置模拟网速
  • 点击 fiddler中的 “rules”---“customize rules” 菜单(或者直接 CTRL+R),会打开一个脚本文件
  • 在脚本文件中,按ctrl+f进行搜索,搜索的关键字为300 。并修改对应的上传和下载的时间。
2.开启限速
  • 在rules菜单中,选择Perormance---Simulate Modem Speeds即可

image-20231002161105551.png

3.进行弱网测试

断点测试

目的:绕过前端限制(修改请求的数据和响应的数据)
实现步骤:
	1.修改请求数据
        1.1 开启请求断点
        1.2 在浏览器中操作对应的功能,发送请求
        1.3 发送的请求被抓包工具拦截,拦截接口后在抓包工具中修改对应的请求数据
    2.修改响应数据
    	2.1 开启响应断点
    	2.2 操作浏览器,发送对应的请求
    	2.3 拦截接口返回的响应数据,针对响应数据进行修改
修改请求数据
目的:传入无法通过UI界面,传入的请求数据
使用场景:校验后端接口,是否实现需求的功能
  1. 开启请求断点

    在浏览器中操作对应的功能,发送请求

  2. 发送的请求被抓包工具拦截,拦截之后可以在抓包工具中修改对应的请求数据

    关闭断点

修改响应数据
使用场景:(提高效率)后端接口返回各种场景响应数据,前端UI界面展示的实际结果是否与预期一致
  1. 开启响应断点

  2. 操作浏览器,发送对应的请求

  3. 拦截返回的响应数据,针对响应数据进行修改