Fiddler模拟低速网络环境 - 布颜书

文章目录

有时候宽频网路用习惯了…
在开发的过程就比较少去考虑最佳化的问题…

但当有人反应说「你的网页好慢」
甚至当网路速度慢，会造成你的网页跳出什么啊哩不哒的bug时要如何重现呢？

我们可以用Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求，允许你监视，设置断点，甚至修改输入输出数据，fiddler的官方网站上去了解，http://www.fiddler2/，上面详细介绍了模拟到用户的真实使用情况，如正在下载js,css等静态资源的时候，页面的一个渲染情况。当网速很慢的时候，我们更希望看到的是先渲染出用户界面，而不是让用户看到一片空白。那么这个时候，fiddlerfiddler来fiddler本来就是个代理，它提供了客户端请求前和服务器响应前的回调接口，我们可以在这些接口里面自定义一些逻辑。模拟限速正是在客户端请求前来自定义限速的逻辑，此逻辑是通过延迟发送数据或接收的数据的时间来限制模拟低速网路环境…启用方法如下：
Rules → Performances → Simulate Modem Speeds (如下图)

勾选之后，你会发现你的网路瞬间慢超多…
(想当年国中时我们的网路速度也是一路降子走来啊…)

如果你觉得模拟网路速度的原理，每上传/下载1KB 要delay 多久…
如果你习惯用kbps 去算的话，那么我们的算法就是 1000/下载速度 = 需要delay的时间(毫秒)，比如50kb/s 需要delay200毫秒来接收数据。

// 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 开了之后，只要是走IE 下「网际网路选项」的程式(IE, Chrome)
预设所有流量都会经过模拟低速网路连网页时，不想影响其他程式…
你可以指定Fiddler 视窗中，那个很像靶心的东西给拉到你要Debug 的程式上(如下图)

被你靶心拉到的程式，在一瞬间会有「触电」的感觉如下图XD

放开滑鼠后，Fiddler 小秘技(from Vexed's Blog)

Fiddler 右上的AutoResponder ，勾选Enable automatic responses 和Unmatched requests passthrough ，按下右边的Add ：

再将下方的Rule Editor 第一行修改为线上档案位址：

线上档案位址也可以使用Regular Expression ，开头加上regex: 即可。

按下Rule Editor 第二行右边的箭头，选择Find a file ... ：

选择要替换成的本机端档案，按下右边的SAVE ：

大功告成！

将线上档案替换成另一个线上档案，步骤几乎一模一样，差别仅在Rule Editor 第二行填入的是另一线上档案位址：

感谢草儿介绍AutoResponder这么好用的东西ｍ(__ __)ｍ。

更多AutoResponder的说明请参考Fiddler替换HTTP Request Host

这边指的替换HTTP Request Host是，所有原先发到a.com的HTTP Request ， Fiddler 左下角输入：

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

按下Enter ，所有原先发到www.demo.com 的HTTP Request 就转发到www.dev.demo.com 了。

要清除转发，请在同一位置输入：

  urlreplace

按Enter 就可以了。

更详细的说明请参考Fiddler的CustomRules.js ，注意是.js ！点下Fiddler2 Scripts 」直接编辑CustomRules.js 。

请先在CustomRules.js 找到：

  static function OnBeforeRequest ( oSession : Session ) {
   // ...
 }

在函式OnBeforeRequest 中加入：

  if ( oSession . HostnameIs ( 'www.demo.com' ) )
   oSession . hostname = 'www.dev.demo.com' ;

将CustomRules.js 存档， Fiddler官方说明文件- Script Samples 。可以玩的东西多得哩:p 。

http://caibaojian.com/fiddler.html