用Fiddler模擬低速網絡環境【轉】
原文鏈接:http://caibaojian.com/fiddler.html
我們為什麽要限速
限速對於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毫秒來接收數據。
// 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 會被取消勾選,
原文鏈接:http://caibaojian.com/fiddler.html
同場加映:讓Fiddler 只針對某個Process 進行Debugging
以Windows 為例,Fiddler 開了之後,只要是走IE 下「網際網路選項」的程式(IE, Chrome)
預設所有流量都會經過Fiddler
如果你覺得你在模擬低速網路連網頁時,不想影響其他程式…
你可以指定Fiddler 只針對某Process Debug...
方法為,把Fiddler 視窗中,那個很像靶心的東西給拉到你要Debug 的程式上(如下圖)
被你靶心拉到的程式,在一瞬間會有「觸電」的感覺如下圖XD·
放開滑鼠後,Fiddler 就只會監控你指定的Process 啰~
其他Fiddler 小秘技(from Vexed‘s Blog)
Fiddler替換線上檔案為本機端檔案或另一個線上檔案
先講將線上檔案替換為本機端檔案。 方法是點下Fiddler 右上的AutoResponder ,勾選Enable automatic responses 和Unmatched requests passthrough ,按下右邊的Add :
再將下方的Rule Editor 第一行修改為線上檔案位址:
線上檔案位址也可以使用Regular Expression ,開頭加上regex: 即可。
按下Rule Editor 第二行右邊的箭頭,選擇Find a file ... :
選擇要替換成的本機端檔案,按下右邊的SAVE :
大功告成!
將線上檔案替換成另一個線上檔案,步驟幾乎一模一樣,差別僅在Rule Editor 第二行填入的是另一線上檔案位址:
感謝草兒介紹AutoResponder這麽好用的東西m(__ __)m 。
更多AutoResponder的說明請參考Fiddler官方文件- AutoResponder Reference 。
Fiddler替換HTTP Request Host
這邊指的替換HTTP Request Host是,所有原先發到a.com的HTTP Request , Fiddler都幫你轉發到b.com ,而在瀏覽器中毫無感覺。 測試debug過程中常有這種需求,例如用www. dev.demo.com替換 www.demo.com 。
替換的方法有兩種,一種是暫時的,一種是永久的。 暫時的方法是在Fiddler 左下角輸入:
urlreplace www.demo.com www.dev.demo.com
按下Enter ,所有原先發到www.demo.com 的HTTP Request 就轉發到www.dev.demo.com 了。
要清除轉發,請在同一位置輸入:
urlreplace
按Enter 就可以了。
更詳細的說明請參考Fiddler官方說明文件- QuickExec Reference 。 可以發現urlreplace 做的是整個網址字串的取代,所以可以動手腳的地方不只於此。
永久的方法是修改Fiddler的CustomRules.js ,註意是.js ! 點下Fiddler 上方的Rules ,再點Customize Rules :
如果有安裝FiddlerScript Editor ,會用FiddlerScript Editor開啟CustomRules.js ,否則會用筆記本開啟。 或者也可以到「我的文件 Fiddler2 Scripts 」直接編輯CustomRules.js 。
請先在CustomRules.js 找到:
//code from http://caibaojian.com/fiddler.html 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模擬低速網絡環境【轉】