Fiddler是一款免費的、基於Windows系統的代理伺服器軟體（即Web除錯抓包工具），由Eric Lawrence用C#語言在2003年10月釋出了第一個版本。注意，由於Fiddler依賴Microsoft .NET Framework 2.0或更高版本，因此在執行Fiddler之前需要預先將其安裝。

　　當啟動Fiddler時，它會自動註冊成Windows Internet（WinINET）網路服務代理，從而就能捕獲本地所有的HTTP和HTTPS資料流。在圖14中，客戶端（例如Web瀏覽器、iOS移動裝置等）會把請求交由Fiddler轉發給伺服器，伺服器也會把響應交由Fiddler轉發給客戶端。在Fiddler介入後，就能實現過濾資料流、解密HTTPS、除錯斷點、修改請求或響應等功能。

圖14  Fiddler的工作原理

一、使用者介面

　　Fiddler的使用者介面包含6塊區域：主選單欄（1）、工具欄（2）、會話列表（3）、選項檢視（4）、命令列工具QuickExec（5）和狀態列（6），如圖15所示。

圖15  Fiddler的使用者介面

1）主選單欄

　　Fiddler的主選單包含6部分（如下所列），幾乎囊括了Fiddler的所有功能，並且利用FiddlerScript或Extensions可擴充套件菜單系統。

　　（1）File：啟動和關閉流量的捕獲，載入流量檔案，儲存捕獲的流量並支援多種格式（例如SAZ、BAT、MS等）的匯出。

　　（2）Edit：作用於會話列表中的會話（Session），包括複製、移除、全選、標記、搜尋等操作。

　　（3）Rules：由FiddlerScript檔案生成的規則，包括過濾影象類會話、提供影響Web效能的選項、替換User-Agent請求首部等。

　　（4）Tools：提供了控制Fiddler行為的全域性配置選項、對文字進行編碼和解碼的TextWizard（如圖16所示）、主機重對映（Host Remapping）工具（如圖17所示）等。

　　（5）View：檢視管理器，既能重新整理部分選項卡中的內容，也能重置Fiddler的使用者介面，例如顯示或隱藏Statistics、Inspectors等選項卡。

　　（6）Help：不僅提供了多條連結，可跳轉到網上論壇、線上文件等頁面，還能檢查是否是最新版本以及顯示當前版本的基本資訊。

圖16  TextWizard

圖17  Host Remapping

2）工具欄

　　Fiddler的工具欄提供了常見命令的按鈕以及預定義的快捷方式（如圖18所示），例如重發請求、移除斷點、儲存會話、清除WinINET快取、指示系統是否線上等。

圖18  工具欄

　　當把滑鼠懸停在某個按鈕上時，會顯示一條描述其功能的提示資訊，如圖19所示。

圖19  按鈕的提示資訊

3）會話列表

　　Web會話記錄了客戶端和伺服器之間的一系列互動，一個會話就是一個事務，由一條請求命令和一個響應結果組成。在Fiddler的會話列表中，每個條目代表一個會話，包含一段重要的摘要資訊，如圖20所示。

圖20  會話列表中的摘要資訊

　　關於每列的描述可參考表5。

表5  列包含的資訊

　　表中的圖示包括三類：會話進度、請求型別和響應型別。以圖20的首末兩個會話中的圖示為例，第一個表示加密的HTTPS資料流，最後一個表示響應是個影象檔案。

4）選項檢視

 　　Fiddler的選項檢視預設有9個選項卡（如圖21所示），其中Log選項卡收集日誌資訊，Fiddler Orchestra Beta選項卡提供遠端Web除錯的功能，其餘選項卡將在後文做單獨講解。

圖21  預設的選項卡

5）QuickExec

　　Fiddler的QuickExec允許使用者快速啟動指令碼命令，大致分為三類：選擇資料流、FiddlerScript命令和其它，表6挑選了幾個常用的命令。

表6  QuickExec中的命令

　　QuickExec還提供了多組快捷鍵（即熱鍵），表7挑選了幾組常用的快捷鍵。

表7  QuickExec中的快捷鍵

6）狀態列

　　Fiddler的狀態列處於使用者介面的最下方，顯示了5項配置資訊（如圖22所示），從左往右的作用依次為：

圖22  狀態列

（1）是否讓Fiddler成為系統代理。

（2）根據選擇的程序型別過濾資料流。

（3）斷點影響的會話型別，包括全部請求、全部響應和無。

（4）選中的會話數和總會話數。

（5）選中會話的URL，如果選中了多個，那麼只顯示第一個。

二、Web除錯

　　Fiddler能夠除錯來自於桌面瀏覽器和移動裝置的資料流。

1）代理設定

　　在Windows上執行的大部分瀏覽器（例如IE、Chrome等），其資料流都能被Fiddler直接捕獲，而其餘瀏覽器要麼需要安裝外掛，要麼需要單獨配置。

　　如果要在iOS或Android裝置上捕獲資料流，那麼首先需要配置Fiddler的Tools選單中的Options，使其允許遠端連線，注意看圖23用粗線框出的選項。

圖23  Fiddler允許遠端連線

　　然後讓移動裝置與Fiddler處於同一網段（例如連上相同的Wi-Fi），並修改其WLAN設定，如圖24所示，其中伺服器就是Fiddler所在電腦的IP地址，而埠就是Fiddler預設的工作埠號。

圖24  設定代理伺服器地址和埠號

2）解密HTTPS

　　HTTPS是HTTP的安全版本，如果要讓Fiddler將其捕獲，那麼需要先在Options的HTTPS選項卡中勾選“Decrypt HTTPS traffic”，允許解析HTTPS的請求和響應，如圖25用粗線框出的選項。

圖25  Fiddler允許解析HTTPS

　　當第一次勾選時，Fiddler會生成一張自簽名的證書，並且需要確認是否信任它，如圖26所示。

圖26  信任Fiddler證書

　　在信任該證書後，就需要將其安裝，如圖27所示。

圖27  安裝Fiddler證書

　　如果要讓Fiddler能夠捕獲移動裝置的HTTPS流量，那麼還需要額外幾步。首先開啟裝置的瀏覽器，在位址列中輸入代理伺服器的IP和Fiddler的工作埠，得到下載證書的頁面，如圖28所示，圖中用粗線框出的就是下載地址。

圖28  下載Fiddler證書

　　然後將下載的Fiddler證書安裝到當前裝置中，從而就能在Fiddler中檢視到HTTPS資料流了。

3）會話資料

　　在Inspectors選項卡中，請求資訊在面板頂部，響應結果在面板底部，如圖29所示。

圖29  Inspectors選項卡

　　請求和響應都包含的子選項卡如下所列。

（1）Headers：請求和響應的首部。

（2）TextView：檢視文字格式的請求和響應內容。

（3）SyntaxView：檢視語法高亮的請求和響應內容。

（4）HexView：以十六進位制的形式顯示首部和內容。

（5）Auth：請求和響應的授權和認證。

（6）Cookies：傳送和接收到的Cookie資訊。

（7）Raw：檢視文字格式的請求和響應。

（8）JSON：將請求和響應的內容解析成JSON格式的字串。

（9）XML：將請求和響應的內容解析成XML格式的字串。

　　其餘子選項卡的作用如下所列。

（1）WebForms：解析請求的查詢字串。

（2）Transformer：設定響應內容的編碼型別。

（3）ImageView：以影象形式顯示響應內容。

（4）WebView：預覽Web瀏覽器中顯示的響應結果。

（5）Caching：響應的快取資訊。

4）AutoResponder

　　Fiddler的AutoResponder選項卡提供了一個強大的功能，它能建立請求規則，並在匹配成功時，替換響應結果。

　　在圖30中，包含了一組控制AutoResponder行為的選項，只有勾選了“Enable rules”才能啟用當前選項卡，在勾選“Unmatched requests passthrough”後，就能讓匹配失敗的請求傳送到原來的伺服器中，而不是返回“404 Not Found”的響應。選項卡的中心區域就是規則集合，其中第一列是匹配條件，第二列是匹配成功後所執行的動作。

圖30  行為選項和規則集合

　　圖31是編輯規則的區域，第一個可寫的選擇框用於定義規則（即匹配條件），第二個用來指定重定向的本地檔案、延遲返回響應結果等各類行為。

圖31  編輯規則

　　每個匹配條件都會包含一個字首，可供選擇的字首有NOT、EXACT和REGEX。其中NOT會忽略給定字串的請求，EXACT會精確匹配給定字串，REGEX會指定一段正則表示式，通過.NET正則表示式引擎來匹配。

5）傳送請求

　　Fiddler的Composer選項卡（如圖32所示）支援傳送一條或多條請求，它能編輯請求的方法、首部、內容和URL等部分，其中URL需要包含http://、https://等協議，不僅如此，還能上傳檔案。

圖32  Composer選項卡

6）過濾流量

　　Fiddler的Filters選項卡提供了7組過濾選項，包括主機、客戶端程序、請求首部、斷點、響應狀態碼、響應型別和大小以及響應首部，如圖33所示。

圖33  Filters選項卡

　　Filters選項卡可用來修改Cookie、模擬跨域、過濾二級域名的會話、捕獲遠端程序等。

7）設定斷點

　　Fiddler包含兩種斷點，分別是請求斷點和響應斷點。它們中斷的時刻不同，前者是請求已傳送，但還未到伺服器；後者是響應已返回，但還未到客戶端。

　　在圖34中，用粗線框出的“Before Requests”和“After Responses”可分別設定全域性的請求斷點和響應斷點，利用Filters和AutoResponder可過濾掉無用的會話，從而能更精確地定位斷點。

圖34  設定斷點

　　當執行斷點時，可在Inspectors中編輯請求或響應（例如修改URL、首部、內容、查詢字串等），並且所做的變更會被自動提交。而在Inspectors的中間位置（即請求和響應之間）還會出現一個斷點欄，如圖35所示，包含兩個按鈕和一個選擇框。

圖35  斷點欄

　　第一個“Break on Response”按鈕會為當前會話設定響應斷點；第二個“Run to Completion”按鈕會繼續執行會話並且不再設定斷點；選擇框用來配置響應結果，提供了多套特定模板以及上傳檔案的入口。

　　如果在QuickExec中輸入g命令後，那麼就會移除所有斷點，恢復會話的執行。

三、效能測試

　　在Fiddler中，不僅能清晰的看到頁面權重、快取資訊、壓縮情況等資料，還能配置各種規則來隔離效能瓶頸。

1）分析會話效能

　　在Statistics選項卡中，記錄了處理會話所花費的各項引數的時間，而利用這些資料就可以分析出會話的效能問題，表8列出了各個效能引數的具體說明。

表8  效能引數

　　點選下方的“Show Chart”會出現一張餅圖，其切片是各個MIME型別以及資料流首部的位元組數，如圖36所示。

圖36  位元組餅圖

2）分析瀑布圖

　　選中一個或多個會話後，可在Timeline選項卡中看到資料流的瀑布圖，如圖37所示。

圖37  瀑布圖

　　預設採用時間軸模式，即橫軸表示時間，縱軸表示檔名，線條欄表示會話。當滑鼠懸線上條欄上時，在下方的狀態列會顯示該會話的更多資訊。

　　條形欄會在ClientBeginRequest時刻開始繪製，然後在ClientDoneResponse時刻結束繪製。條形欄會根據響應的MIME型別著色，其中亮綠色是影象、軍綠色是JavaScript、紫色是CSS、藍色是其它檔案。條形欄中的黑色豎線表示ServerBeginResponse的時間。

　　條形欄前面有兩個圓圈，上方表示客戶端與Fiddler之間的連線，下方表示Fiddler與伺服器之間的連線，而它們都包含兩種顏色，綠色表示複用連線，紅色表示新建連線。條形欄後面的紅色X圖標表示伺服器返回的響應首部中包含“Connection:close”，會阻止後續請求複用該連線。

3）模擬HTTP壓縮

　　HTTP規範提供了兩種提高效能的編碼方式：壓縮（Compression）和分塊傳輸編碼（Chunked Transfer-Encoding），而在Inspectors選項卡的Transformer中可以設定這兩種編碼方式，如圖38所示。

圖38  預設的Transformer

　　Fiddler提供了4種壓縮演算法：GZIP、DEFLATE、BZIP2和Brotli。每當選中某個演算法或複選框時，“Response Body”的位元組數就會改變，有時在“HTTP Compression”的下方還會有簡短的資訊提示，從而就能對比使用Transformer前後的差異。圖39和圖38應用的是同一個響應，在選中GZIP壓縮演算法後，響應內容的位元組數明顯降低了很多。

圖39  選中GZIP壓縮演算法後的Transformer

四、擴充套件

　　Fiddler提供了多樣化的擴充套件模型，包括FiddlerScript、.NET開發、FiddlerCore以及第三方外掛。

1）FiddlerScript

　　FiddlerScript既能擴充套件Fiddler的選單（例如Tools、Rules等），也能過濾或修改會話。Fiddler在處理每個會話時，都會執行CustomRules.js中的方法，而在FiddlerScript選項卡中能編輯該指令碼檔案，如圖40所示。

圖40  FiddlerScript選項卡

　　Fiddler在上圖的Handlers類中保留了多個靜態函式（例如OnPeekAtResponseHeaders、OnBeforeResponse等），它的引數就是當前會話，可以在其內新增自定義的邏輯。Fiddler還提供了多個工具函式和屬性，用來完成一些常見任務，例如在狀態列上設定文字，播放音訊檔案等。

2）.NET擴充套件Fiddler

　　在Fiddler中，還可以通過.NET框架支援的語言（例如C#、VB.NET等）來進行擴充套件。.NET構建的擴充套件無需修改FiddlerScript中的指令碼檔案，只要安裝到電腦中就能使用，並且在控制面板中就能解除安裝。

　　由於FiddlerScript構建的擴充套件，在Fiddler啟動時需要重新編譯，而.NET構建的擴充套件並不會這樣，因此後者的載入速度和執行時效能都要好很多，但與此同時，其開發複雜度也會上升很多。

3）FiddlerCore

　　FiddlerCore是一個.NET類庫，可以整合到.NET應用程式中，只提供了Fiddler的代理功能，可用來捕獲、過濾或修改HTTP和HTTPS流量，而不必藉助Fiddler UI，像自動化測試這類情況就很適合使用FiddlerCore。在圖41中，左邊是包含擴充套件的Fiddler應用，右邊是整合FiddlerCore的使用者應用。

圖41  Fiddler.exe VS YourApp.exe

4）功能外掛

　　Fiddler官方和獨立開發者們提供了豐富的功能外掛（即附加元件），可大大提升Fiddler的可用性和測試性，在下面的地址中列出了部分擴充套件。接下來會通過一個例子來說明Fiddler外掛的用法。

https://www.telerik.com/fiddler/add-ons

　　目前很多網站都會對自己的JavaScript檔案進行壓縮（如圖42所示），如果要在Fiddler中檢視這類指令碼，那麼就得使用JavaScript Formatter外掛，它能將壓縮程式碼格式化，使之可讀。

 圖42  壓縮後的指令碼

　　首先從官網上下載它的安裝包，安裝成功後再重啟Fiddler，然後在會話列表中右擊想要檢視的JavaScript檔案，得到圖43所示的上下文選單，選擇用粗線框出的選項。 

圖43  Make JavaScript Pretty

　　此時在SyntaxView選項卡中就能檢視到美化後的指令碼了，如圖44所示。

圖44  美化後的指令碼

&n