Fiddler 高階用法：Fiddler Script 與 HTTP 斷點除錯
之前在《關於 WEB/HTTP 除錯利器 Fiddler 的一些技巧分享》中系統的介紹過 Fiddler 的原理與一些常見技巧，但那篇文章只是入門科普，並不深入，今天要介紹到的內容相對更加高階與深入，擴充套件性更好，功能更加強大。
1、Fiddler Script
1.1 Fiddler Script簡介
在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 DocumentsFiddler2ScriptsCustomRules.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 提供了語法高亮，以及智慧提示的功能， 方便編輯。
1.2 Fiddler Script用法
1.2.1 修改session樣式
- 修改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(':'));
1.2.3 定製選單
- 定製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選單的子選單
// 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"); // 根據需要定製
}1.3 Fiddler Script限速
限速對於web前端研發是非常重要的，由於開發者的機器一般配置都很高，並且都是把相關檔案代理到本地來除錯程式，所以很難模擬到使用者的真實使用情況，如正在下載js,css等靜態資源的時候，頁面的一個渲染情況。當網速很慢的時候，我們更希望看到的是先渲染出使用者介面，而不是讓使用者看到一片空白。那麼這個時候，網路限速就能很方便在localhost針對類似的情況來做效能除錯與優化。
我們可以通過fiddler來模擬限速，因為fiddler本來就是個代理，它提供了客戶端請求前和伺服器響應前的回撥介面，我們可以在這些接口裡面自定義一些邏輯。Fiddler的模擬限速正是在客戶端請求前來自定義限速的邏輯，此邏輯是通過延遲傳送資料或接收的資料的時間來限制網路的下載速度和上傳速度，從而達到限速的效果。
fiddler提供了一個功能，讓我們模擬低速網路環境。啟用方法如下：Rules → Performances → Simulate Modem Speeds。勾選之後，你會發現你的網路瞬間慢下來了很多。至於慢下來後網路速度是多少，則由CustomRules.js 中如下程式控制的：
...
var m_SimulateModem: boolean = true;
...
if (m_SimulateModem) {
// Delay sends by 500ms per KB uploaded.
oSession["request-trickle-delay"] = "500";
// 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 勾選，同時需要注意一定要禁用瀏覽器代理外掛，以及修改完成後重啟瀏覽器才能生效。
2、Fiddler AutoResponder：請求、響應應答與替換
AutoResponder 是 Fiddler 比較重要且比較強大的功能之一。可用於攔截某一請求，並重定向到本地的資源，或者使用Fiddler的內建響應。可用於除錯伺服器端程式碼而無需修改伺服器端的程式碼和配置，因為攔截和重定向後，實際上訪問的是本地的檔案或者得到的是Fiddler的內建響應。
2.1 線上檔案替換為本機端檔案
方法是點下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 。
2.2 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 。
3、實戰 HTTP 請求、響應的斷點除錯
斷點命令介紹：
- 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，就可以方便的除錯了。
4、Fiddler 遠端捕獲 Android/iPhone 請求
Android 或者 iPhone 上 APP 的請求對使用者來說是不可見的，不像 PC 上用瀏覽器 F12 可以很方便的除錯，我們有沒有辦法去除錯呢？
答案必然是有的，那就是 Fiddler 的代理可以支援 APP 遠端連線與抓包除錯。過程如下：
（1）Start Fiddler then open the Fiddler Options window
（2）and in the Connections tab, ensure Allow remote computers to connect is checked.
（3）In the Connections tab, check Act as system proxy on startup and verify what port is set (eg. 8888).
Once you've saved those settings you need to stop and re-start Fiddler.
（4）Once Fiddler has re-started, verify that the Capture Traffic menuitem is ticked.
（5）You need to know your computer's wireless-network IP address to configure the iPhone. This screenshots shows the Command Prompt > ipconfig output:
（6）With the computer IP address and Fiddler port, go to your iPhone/Android's Wifi Settings and scroll down to the HTTP Proxy, choose Manual and input the Fiddler proxy info:
Note：if you change iPhone/Android's Wifi Proxy Settings，you must re-connect your wifi to effect.
（7）If everything has been setup right, anything you do in Safari or other internet applications (like, say Microsoft Tag Reader) will be logged in the Fiddler window.
It's extremely useful for testing/debugging - have fun!
5、Refer：
[1] Fiddler的高階用法-Fiddler Script
[2] 用Fiddler模擬低速網路環境
http://caibaojian.com/fiddler.html
[3] Fiddler (二) Script 用法
http://www.cnblogs.com/tankxiao/archive/2012/04/25/2349049.html
[4] 抓包工具：Fiddler 2-強大功能之一 斷點
http://chessman-126-com.iteye.com/blog/2001288
[5] 【HTTP】Fiddler（三）- Fiddler命令列和HTTP斷點除錯
http://blog.csdn.net/ohmygirl/article/details/17855031
[6] 【HTTP】Fiddler（二） - 使用Fiddler做抓包分析
http://blog.csdn.net/ohmygirl/article/details/17849983
[7] 【HTTP】Fiddler（一） - Fiddler簡介
http://blog.csdn.net/ohmygirl/article/details/17846199
[8] Using QuickExec
http://docs.telerik.com/fiddler/knowledgebase/quickexec
[9] Add Rules to Fiddler
http://docs.telerik.com/fiddler/extend-fiddler/addrules
[10] 關於 WEB/HTTP 除錯利器 Fiddler 的一些技巧分享
http://my.oschina.net/leejun2005/blog/151103
[11] Monitoring iPhone web traffic (with Fiddler)
http://conceptdev.blogspot.com/2009/01/monitoring-iphone-web-traffic-with.html
[12] How to change proxy settings in Android (especially in Chrome)