有时候宽频网路用习惯了… 在开发的过程就比较少去考虑最佳化的问题… 但当有人反应说「你的网页好慢」 甚至当网路速度慢,会造成你的网页跳出什么啊哩不哒的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 (如下图)

// 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 的程式上(如下图)
其他Fiddler 小秘技(from Vexed's Blog)
Fiddler替换线上档案为本机端档案或另一个线上档案 先讲将线上档案替换为本机端档案。 方法是点下Fiddler 右上的AutoResponder ,勾选Enable automatic responses 和Unmatched requests passthrough ,按下右边的Add :




urlreplace www.demo.com www.dev.demo.com

urlreplace按Enter 就可以了。 更详细的说明请参考Fiddler官方说明文件- QuickExec Reference 。 可以发现urlreplace 做的是整个网址字串的取代,所以可以动手脚的地方不只于此。 永久的方法是修改Fiddler的CustomRules.js ,注意是.js ! 点下Fiddler 上方的Rules ,再点Customize Rules :

static function OnBeforeRequest ( oSession : Session ) { // ... }在函式OnBeforeRequest 中加入:
if ( oSession . HostnameIs ( 'www.demo.com' ) ) oSession . hostname = 'www.dev.demo.com' ;将CustomRules.js 存档, Fiddler 会自动重新载入CustomRules.js ,原先发到www.demo.com 的HTTP Request 就会自动转发到www.dev.demo.com 。 更详细的说明请参考Fiddler官方说明文件- Script Samples 。 可以玩的东西多得哩:p 。 以上都是小粉红教我的,谢谢小粉红大神m(__ __)m 。