原文链接:http://caibaojian.com/fiddler.html
有时候宽频网路用习惯了…
在开发的过程就比较少去考虑最佳化的问题…·
但当有人反应说「你的网页好慢」
甚至当网路速度慢,会造成你的网页跳出什么啊哩不哒的bug时要如何重现呢?
我们可以用Fiddler 这套强大的web Debugging 工具…
Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,甚至修改输入输出数 据,fiddler包含了一个强大的基于事件脚本的子系统,并且能够使用.net框架语言扩展。更多详细的信息我们可以在fiddler的官方网站上去了 解,http://www.fiddler2.com/fiddler2/,上面详细介绍了fiddler的用法与扩展。
我们为什么要限速
限速对于web前端研发是非常重要的,由于开发者的机器一般配置都很高,并且是在localhost下来调试程序,所以很难模拟到用户的真实使用情 况,如正在下载js,css等静态资源的时候,页面的一个渲染情况。当网速很慢的时候,我们更希望看到的是先渲染出用户界面,而不是让用户看到一片空白。 那么这个时候,网络限速就能很方便在localhost针对类似的情况来做性能调试与优化。
fiddler模拟限速的原理
我们可以通过fiddler来模拟限速,因为fiddler本来就是个代理,它提供了客户端请求前和服务器响应前的回调接口,我们可以在这些接口里 面自定义一些逻辑。Fiddler的模拟限速正是在客户端请求前来自定义限速的逻辑,此逻辑是通过延迟发送数据或接收的数据的时间来限制网络的下载速度和 上传速度,从而达到限速的效果。
他提供了一个功能,让我们模拟低速网路环境…启用方法如下:
Rules → Performances → Simulate Modem Speeds (如下图)
勾选之后,你会发现你的网路瞬间慢超多…
(想当年国中时我们的网路速度也是一路降子走来啊…)
如果你觉得模拟的速度慢到一个爆炸,不Make Sense 的话…
你也可以自己定义Modem Speeds 究竟要多快…
点开Rules → Customize Rules (如下图)
找m_SimulateModem这个字,你会找到下面这段:
这就是他模拟网路速度的原理,每上传/下载1KB 要delay 多久…
如果你习惯用kbps 去算的话,那么我们的算法就是 1000/下载速度 = 需要delay的时间(毫秒),比如50kb/s 需要delay200毫秒来接收数据。
//code from http://caibaojian.com/fiddler.html // Delay sends by 300ms per KB uploaded. oSession["request-trickle-delay"] = "300"; // Delay receives by 150ms per KB downloaded. oSession["response-trickle-delay"] = "150";
请注意,当你存档之后,原本已经勾选的Simulate Modem Speeds 会被取消勾选,
要记得再到Rules → Performances → Simulate Modem Speeds 勾选喔~
同场加映:让Fiddler 只针对某个Process 进行Debugging
以Windows 为例,Fiddler 开了之后,只要是走IE 下「网际网路选项」的程式(IE, Chrome)
预设所有流量都会经过Fiddler
如果你觉得你在模拟低速网路连网页时,不想影响其他程式…
你可以指定Fiddler 只针对某Process Debug...
方法为,把Fiddler 视窗中,那个很像靶心的东西给拉到你要Debug 的程式上(如下图)
被你靶心拉到的程式,在一瞬间会有「触电」的感觉如下图XD
放开滑鼠后,Fiddler 就只会监控你指定的Process 啰~
来源:前端开发博客
PS:这里我个人有个小疑问,怎么只针对手机端的Process来Debugging呢?