前端利器躬行記（6）——Fiddler

• 2019 年 10 月 3 日
• 筆記

　　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  美化後的腳本