# 网络调试

# Charles进行网络调试

使用Charles对手机App应用进行抓包,可以对App接口进行测试,也可以了解App传输中流量使用及请求响应情况,从而测试数据传输过程中流量使用的是否合理。

调试设置:

image-20211002121811552

然后选择Enable Throttling就是开启了Proxy延迟:

image-20211002121859494

# Fiddler进行网络调试

使用Fiddler对手机App应用进行抓包,可以对App接口进行测试,也可以了解App传输中流量使用及请求响应情况,从而测试数据传输过程中流量使用的是否合理。

抓包过程:

# Fiddler设置

1)启动Fiddler->Tools->Fiddler Options

image-20211002120732553

2)HTTPS选项卡中,设置如下,勾选过程中如有弹窗允许即可;

image-20211002120754604

Connections选项卡中,勾选Allow remote computers to connect勾选时如有弹窗确定即可

image-20211002120904005

Fiddler listens on port:8888是监控端口;

image-20211002120849790

# 手机设置

1)手机和电脑连同一个WiFi;

2)通过ipconfig查看计算机IP地址,如本机IP地址为:192.168.31.132;打开手机无线网络,选择连接的WiFi,设置代理,IP输入192.168.31.132,端口:8888;

3)手机浏览器访问:192.168.31.132:8888,出现响应页面说明连接成功,点击响应界面中的“fiddlerRoot certificate”安装证书,然后就可以操作App通过Fiddler进行抓包了。

可以在Fiddler Statistics中查看各个请求发送和接受数据大小及传输时间。

image-20211002121113610

# fiddler模拟限速的原理

我们可以通过fiddler来模拟限速,因为fiddler本来就是个代理,它提供了客户端请求前和服务器响应前的回调接口,我们可以在这些接口里 面自定义一些逻辑。Fiddler的模拟限速正是在客户端请求前来自定义限速的逻辑,此逻辑是通过延迟发送数据或接收的数据的时间来限制网络的下载速度和 上传速度,从而达到限速的效果。

提供了一个功能,让我们模拟低速网路环境…启用方法如下:

Rules → Performances → Simulate Modem Speeds :模拟调制解调器的速度

启动fiddler需要进行如下设置:

  • 设置端口号,重启Fiddler
  • 设置模拟调制解调器的速度
  • 设置手机代理
  • 设置上下行速率
  • 开始调试

设置端口号

allow remote computers to connect “允许远程计算机连接”为设置的代理可以连接到fiddle上,必须勾选。重启fiddle!

设置模拟调制解调器的速度:

image-20211002121148388

设置手机代理

手机代理设置“ip地址为本机的ip,端口号为之前设置的端口号(确保端口号不被占用)”

手动设置设置上行,下行速率

image-20211002121217763

手动设置设置上行,下行速率模拟网路速度的原理,每上传/下载1KB 要delay 多久…

网络取值的算法就是 1000/下载速度 = 需要delay的时间(毫秒),比如50kb/s 需要delay200毫秒来接收数据。

查找代码如下:

image-20211002121254254

if (m_SimulateModem) {
   //Delay sends by 300ms per KB uploaded. //每延迟300ms发送1kb的数据,也就是每1s发送3kb的数据	
	 oSession["request-trickle-delay"] = 300

   //Delay receives by 150ms per KB downloaded.
   oSession["response-trickle-delay"] = 150//每延迟150ms下行1kb的数据
}

PS: 请注意,当你存档之后,原本已经勾选的SimulateModem Speeds 会被取消勾选,要记得再到Rules → Performances → Simulate Modem Speeds 勾选喔!

开始调试

清空原有的log,并使用你的app进行弱网条件下的操作,

选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间。从条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化

不同请求耗时多少的图形表,获取那种资源耗时最大,进而进行优化。