Fiddler 高級用法：Fiddler Script 與 HTTP 斷點調試

一、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 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 提供了語法高亮，以及智能提示的功能， 方便編輯。

1.2 Fiddler Script用法

1.2.1 修改session樣式

• 修改session的顯示樣式（顏色等）

?

1 2	// 修改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請求內容做修改：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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

?

1 2 3 4 5

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字段的子菜單：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/ 定義名爲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菜單的子菜單
  

?

1 2 3 4 5

// tool menu   public  static  ToolsAction( "tool menu" )   function DoManualYules(){       FiddlerObject.alert( "tool menu" );  // 根據須要定製   }

• 定製右鍵子菜單

?

1 2 3 4 5

// 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 中以下程序控制的：

?

1 2 3 4 5 6 7 8 9 10

...   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 勾選，同時須要注意必定要禁用瀏覽器代理插件，以及修改完成後重啓瀏覽器才能生效。

二、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 左下角輸入：

?

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

按下Enter ，全部原先發到www.demo.com 的HTTP Request 就轉發到www.dev.demo.com 了。

要清除轉發，請在同一位置輸入：

?

1	urlreplace

按Enter 就能夠了。

更詳細的說明請參考Fiddler官方說明文件- QuickExec Reference 。 能夠發現urlreplace 作的是整個網址字串的取代，因此能夠動手腳的地方不僅於此。

永久的方法是修改Fiddler的CustomRules.js ，注意是.js ！ 點下Fiddler 上方的Rules ，再點Customize Rules ：

若是有安裝FiddlerScript Editor ，會用FiddlerScript Editor開啓CustomRules.js ，不然會用筆記本開啓。 或者也能夠到「個人文件 Fiddler2 Scripts 」直接編輯CustomRules.js 。

?

1 2 3 4 5 6 7 8 9

請先在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 。

三、實戰 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，就能夠方便的調試了。

四、Fiddler 遠程捕獲 Android/iPhone 請求

Android 或者 iPhone 上 APP 的請求對用戶來講是不可見的，不像 PC 上用瀏覽器 F12 能夠很方便的調試，咱們有沒有辦法去調試呢？

答案必然是有的，那就是 Fiddler 的代理能夠支持 APP 遠程鏈接與抓包調試。過程以下：

（1）Start Fiddler then open the Fiddler Options... window

（2）and in the General 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!

五、Refer：

[1] Fiddler的高級用法-Fiddler Script

http://cube.qq.com/?p=973

[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)

http://stackoverflow.com/questions/21068905/how-to-change-proxy-settings-in-android-especially-in-chrome