有時候寬頻網路用習慣了…
在開發的過程就比較少去考慮最佳化的問題…
但當有人反應說「你的網頁好慢」
甚至當網路速度慢，會造成你的網頁跳出什麼啊哩不噠的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毫秒來接收數據。
// 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 囉~
其他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這麼好用的東西ｍ(__ __)ｍ 。
更多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 找到：
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 。
以上都是小粉紅教我的，謝謝小粉紅大神ｍ(__ __)ｍ 。