在web前端開發的過程中，fiddler是最常使用的一款調試工具。在大多數情況下，通過fiddler默認菜單的功能就可以基本滿足開發者的調試需求，然而如果需要滿足更復雜的調試場景時，單純通過fiddler菜單已無法達到開發者的調試要求。
如果用戶需要修改http請求的頭部或者修改http請求的應答頭部，只能通過設置斷點的方式，設置斷點有兩種方法：
第一 種：打開Fiddler 點擊Rules-> Automatic Breakpoint ->Before Requests(這種方法會中斷所有的會話)，消除斷點的方法，點擊Rules-> Automatic Breakpoint ->Disabled。
第二種: 在命令行中輸入命令: bpu http://www.qq.com，這種方法只會中斷http://www.qq.com，消除斷點的方法就是在命令行中輸入命令 bpu。
但是這 兩種方法當程序運行到斷點處的時候都會停止，需要手動點擊“Run to Completion”重新啟動，非常不方便。而且通過fiddler的菜單功能，無法修改http請求的URI。此時Fiddler Script的優點就體現出來了，Fiddler Script的本質其實是用JScript.NET語言寫的一個腳本文件CustomRules.js，語法類似於C#, 通過修改CustomRules.js可以很容易的修改http的請求和應答，不用中斷程序，還可以針對不同的URI做特殊的處理，除此之外還可以根據開 發者的需要去定制菜單。
腳本文 件CustomRules.js位於C:\Documents and Settings\[your user]\My Documents\Fiddler2\Scripts\CustomRules.js 下，你也可以在Fiddler 中打開CustomRules.js 文件， 啟動Fiddler, 點擊菜單Rules->Customize Rules。Fiddler Script 的官方幫助文檔的地址是：http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp。
可以直 接編輯CustomRules.js文件，也可以下載 Fiddler Script Editor來編輯，下載的地址是http://www.fiddler2.com/fiddler/fse.asp。Fiddler Script Editor 提供了語法高亮，以及智能提示的功能， 方便編輯。
修改session的顯示樣式（顏色等）
// 修改session中的顯示樣式 oSession["ui-color"] = "orange";
修改http請求和應答
在如下函數中修改http請求頭：
static function OnBeforeRequest(oSession: Session)
在如下函數中修改http應答：
static function OnBeforeResponse(oSession: Session)
在如下函數中fiddler命令（右下角的命令行）：
static function OnExecAction(sParams: String[])
例如http請求中，對域名為p.21kunpeng.com的URI的http請求內容作修改：
if (oSession.host.indexOf("p.21kunpeng.com") > -1) {
// 修改session中的顯示樣式
oSession["ui-color"] = "orange";
// 移除http頭部中的MQB-X5-Referer字段
oSession.oRequest.headers.Remove("MQB-X5-Referer");
// 修改http頭部中的Cache-Control字段
oSession.oRequest["Cache-Control"] = "no-cache";
// 修改host
oSession.host = "kyfw.12306.cn";
// 修改Origin字段
oSession.oRequest["Origin"] = "https://kyfw.12306.cn";
// 刪除所有的cookie
oSession.oRequest.headers.Remove("Cookie");
// 新建cookie
oSession.oRequest.headers.Add("Cookie", "username=yulesyu;");
// 修改Referer字段
oSession.oRequest["Referer"] = "https://kyfw.12306.cn/otsweb/loginAction.do";
// 獲取Request中的body字符串
var strBody=oSession.GetRequestBodyAsString();
// 用正則表達式或者replace方法去修改string
strBody=strBody.replace("1111","2222");
// 彈個對話框檢查下修改後的body
FiddlerObject.alert(strBody);
// 將修改後的body，重新寫回Request中
oSession.utilSetRequestBody(strBody);
}
例如http應答中，如果含有location並且location中含有字段initQueryUserInfo，則修改為http://p.21kunpeng.com
var location = oSession.oResponse.headers["Location"];
if(oSession.PathAndQuery.indexOf("initQueryUserInfo") != -1)
{
oSession.oResponse.headers["Location"] = "http://p.21kunpeng.com";
}
1.2.2 修改URI
將請求URI中http協議替換成https協議，例如：
oSession.fullUrl = "https" + oSession.fullUrl.Substring(oSession.fullUrl.IndexOf(':'));
定制rule菜單的子菜單
例如在rule菜單下定義一個修改http頭部中的Q-UA字段的子菜單：
/ 定義名為Q-UA的子菜單
RulesString("&Q-UA", true);
// 生成Q-UA子菜單的radio選項
RulesStringValue(0,"x5_4.3", "ADRQBX43_GA/420411&X5MTT_3/024200&ADR&346014& U9200 &0&9065&Android4.0.3 &V3")
RulesStringValue(1,"x5_5.0", "ADRQBX50_B1/500620&X5MTT_3/025001&ADR&346014& U9200 &21013&9255&Android4.2.2 &V3")
RulesStringValue(2,"ios4.1", "IQB41_GA/370015&IMTT_3/370015&IPH&406040&iPodTouch4G&50003&8917&V3")
RulesStringValue(3,"ios5.0", "IQB50_GA/500028&IMTT_3/500028&IPH&406040&iPhone4&50001&9219&iOS7.0.4&V3")
RulesStringValue(4,"&Custom...", "%CUSTOM%")
public static var sQUA: String = null;
還需要在OnBeforeRequest函數中加入：
// Q-UA Overrides
if (null != sQUA) {
oSession.oRequest["Q-UA"] = sQUA;
}
// tool menu
public static ToolsAction("tool menu")
function DoManualYules(){
FiddlerObject.alert("tool menu"); // 根據需要定制
}
// tool menu
public static ContextAction("context menu")
function DoOpenInIE(oSessions: Fiddler.Session[]){
FiddlerObject.alert("context menu"); // 根據需要定制
}
限速對 於web前端研發是非常重要的，由於開發者的機器一般配置都很高，並且都是把相關文件代理到本地來調試程序，所以很難模擬到用戶的真實使用情況，如正在下 載js,css等靜態資源的時候，頁面的一個渲染情況。當網速很慢的時候，我們更希望看到的是先渲染出用戶界面，而不是讓用戶看到一片空白。那麼這個時 候，網絡限速就能很方便在localhost針對類似的情況來做性能調試與優化。
我們可 以通過fiddler來模擬限速，因為fiddler本來就是個代理，它提供了客戶端請求前和服務器響應前的回調接口，我們可以在這些接口裡面自定義一些 邏輯。Fiddler的模擬限速正是在客戶端請求前來自定義限速的邏輯，此邏輯是通過延遲發送數據或接收的數據的時間來限制網絡的下載速度和上傳速度，從 而達到限速的效果。
fiddler 提供了一個功能，讓我們模擬低速網路環境。啟用方法如下：Rules → Performances → Simulate Modem Speeds。勾選之後，你會發現你的網路瞬間慢下來了很多。至於慢下來後網絡速度是多少，則由CustomRules.js 中如下程序控制的：
if (m_SimulateModem) {
// Delay sends by 300ms per KB uploaded.
oSession["request-trickle-delay"] = "300";
// Delay receives by 150ms per KB downloaded.
oSession["response-trickle-delay"] = "150";
}
算法就是 1000/下載速度 = 需要delay的時間(毫秒)，比如50kB/s 需要delay20毫秒來接收數據，所以根據你需要的網絡速度來修改上述值。
【注】：存檔之後，原本已經勾選的Simulate Modem Speeds 會被取消勾選，需要再到Rules → Performances → Simulate Modem Speeds 勾選。
AutoResponder 是 Fiddler 比較重要且比較強大的功能之一。可用於攔截某一請求，並重定向到本地的資源，或者使用Fiddler的內置響應。可用於調試服務器端代碼而無需修改服務器 端的代碼和配置，因為攔截和重定向後，實際上訪問的是本地的文件或者得到的是Fiddler的內置響應。
方法是 點下Fiddler 右上的AutoResponder ，勾選Enable automatic responses 和Unmatched requests passthrough ，按下右邊的Add ；再將下方的Rule Editor 第一行修改為線上檔案位址（線上檔案位址也可以使用Regular Expression ，開頭加上regex: 即可。）；按下Rule Editor 第二行右邊的箭頭，選擇Find a file ... ；選擇要替換成的本機端檔案，按下右邊的SAVE ，大功告成！
將線上檔案替換成另一個線上檔案，步驟幾乎一模一樣，差別僅在Rule Editor 第二行填入的是另一線上檔案位址：
更多AutoResponder的說明請參考Fiddler官方文件- AutoResponder Reference 。
這邊指 的替換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 。
斷點命令介紹：
bpu在請求開始時中斷,
bpafter在響應到達時中斷,
bps在特定http狀態碼時中斷,
bpv/bpm在特定請求method時中斷。
提示：命令輸入區域輸入help，回車執行會打開一頁面詳細介紹fiddler的所有命令。
也可以在菜單欄設置斷點，是針對所有的會話請求，不大實用，建議用命令。
以bpu為例演示斷點功能：
（1）以淘寶無線H5為例，在浏覽器打開m.taobao.com首頁。
（2）在Fiddler命令行輸入區輸入“bpu”回車執行清掉原有的斷點，然後輸入“bpu m.taobao.com/search.htm”回車執行，接下來就會中斷URL中包含此地址的請求。
（3）在浏覽器淘寶首頁頂端搜索框輸入“充氣娃娃”後點擊搜索，此時請求被中斷，在Fiddler會話列表面板看到以紅色小圖標開頭被中斷的會話
（4） 點擊會話列表中被中斷的會話，依次進入Inspectors-->WebForms。此時請求並未發出，q參數即為查詢關鍵字，我們修改為 “nike”，然後點擊“Break on Response”按鈕。注：在這裡實現修改了請求數據，其它的post數據，甚至是headers裡的cookie、referer、user- agent等都可以修改。
（5） 右邊面板Response區有響應內容了，這時Fiddler再次中斷了response，響應已到達Fiddler代理，但還沒返回給浏覽器。點擊 Inspectorsg下Response區的“response is encoded and may need to decoded before inspection.Click here to transform”後，即可在TextView tab看到返回的html內容。在這裡修改response中的title部分，然後點擊“Run to Completino"把修改後的response返回給浏覽器。
（6）回到浏覽器，搜索出關鍵字為“nike”的結果，而不是“充氣娃娃”，標題也被修改為“搜索充氣娃娃”。
其他：
命令行輸入 go 會斷續執行所有中斷，再次輸入 bpu 會清除所有的斷點。
如 上第四點圖所示，這裡有很多的操作選擇，就是選擇輸出內容，選擇之後，實際的響應數據就會這些替代，特別是最後一個find 操作a file：這個我們可以中斷一個圖片，然後這裡選擇本地的一張圖片，這樣我們就可以替換頁面的圖片。比較強大的場景就是例如現網js出了問題，但是一般現 網的js是壓縮過的，在firebug中根本無法調試，這樣我們可以把它映射到本地的一個原始版本，這樣firebug就會拿到一份原始的js，就可以方 便的調試了。
