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

時間 2019-11-05

標籤前端利器躬行 fiddler 简体版

原文原文鏈接

　　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的工做原理跨域

1、用戶界面

　　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），包括複製、移除、全選、標記、搜索等操做。app

　　（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 列包含的信息

列名	描述
#	圖標和遞增的惟一ID
Result	響應狀態碼，例如40四、302等
Protocol	協議，例如HTTP、HTTPS和FTP
Host	域名和端口號
URL	路徑、文件和查詢字符串
Body	響應包含的字節數
Caching	響應中的兩個首部Cache-Control和Expires的值
Content-Type	響應中的Content-Type首部的值
Process	發起本次請求的本地Windows進程
Comments	經過腳本或會話列表中右鍵（即上下文菜單）添加的註釋
Custom	經過腳本設置的文本字段

　　表中的圖標包括三類：會話進度、請求類型和響應類型。以圖20的首末兩個會話中的圖標爲例，第一個表示加密的HTTPS數據流，最後一個表示響應是個圖像文件。

4）選項視圖

　　Fiddler的選項視圖默認有9個選項卡（如圖21所示），其中Log選項卡收集日誌信息，Fiddler Orchestra Beta選項卡提供遠程Web調試的功能，其他選項卡將在後文作單獨講解。

圖21 默認的選項卡

5）QuickExec

　　Fiddler的QuickExec容許用戶快速啓動腳本命令，大體分爲三類：選擇數據流、FiddlerScript命令和其它，表6挑選了幾個經常使用的命令。

表6 QuickExec中的命令

命令	描述
?searchtext	搜索URL中包含指定文本的會話，搜索結果會被高亮
=status	選中指定狀態碼的會話
@host	選中包含指定主機的域名或IP地址的會話
cls	清空會話列表
g	恢復全部被斷點暫停的會話
bpu urltext	當會話的URL包含指定文本時，會爲其建立請求斷點；而當沒有urltext參數時，取消該斷點
bpafter urltext	當會話的URL包含指定文本時，會爲其建立響應斷點；而當沒有urltext參數時，取消該斷點
!dns hostname	爲目標主機執行DNS查詢，在Log選項卡中顯示結果
toolbar	顯示工具欄

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

表7 QuickExec中的快捷鍵

快捷鍵	描述
ALT+Q	光標聚焦到QuickExec
CTRL+R	打開FiddlerScript編輯器
CTRL+E	打開TextWizard
CTRL+Down	選擇下一個會話
CTRL+Up	選擇上一個會話
CTRL+T	激活Inspectors的子選項卡TextView
CTRL+H	激活Inspectors的子選項卡Headers
CTRL+M	最小化Fiddler
CTRL+SHIFT+DEL	清除WinINET緩存

6）狀態欄

　　Fiddler的狀態欄處於用戶界面的最下方，顯示了5項配置信息（如圖22所示），從左往右的做用依次爲：

圖22 狀態欄

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

（2）根據選擇的進程類型過濾數據流。

（3）斷點影響的會話類型，包括所有請求、所有響應和無。

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

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

2、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命令後，那麼就會移除全部斷點，恢復會話的執行。

3、性能測試

　　在Fiddler中，不只能清晰的看到頁面權重、緩存信息、壓縮狀況等數據，還能配置各類規則來隔離性能瓶頸。

1）分析會話性能

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

表8 性能參數

參數名	描述
Request Count	選中的會話數
Bytes Sent	發送的字節數
Bytes Received	接收的字節數
ClientConnected	客戶端第一次和Fiddler創建鏈接的時間
ClientBeginRequest	客戶端開始向Fiddler發送請求的時間
GotRequestHeaders	Fiddler從客戶端接收完請求首部的時間
ClientDoneRequest	Fiddler從客戶端接收完整個請求的時間
Determine Gateway	肯定使用哪一個網關代理所花費的毫秒數
DNS Lookup	解析DNS所花費的毫秒數。因爲DNS存在緩存，所以除了第一次，其他時候該值都是0
TCP/IP Connect	創建TCP/IP鏈接所花費的毫秒數
HTTPS Handshake	在HTTPS握手中所花費的毫秒數
ServerConnected	和服務器或上游網關代理創建TCP/IP鏈接的時間
FiddlerBeginRequest	Fiddler開始向服務器發送請求的時間
ServerGotRequest	Fiddler向服務器發送完請求的時間
ServerBeginResponse	Fiddler接收服務器響應的第一個字節的時間
GotResponseHeaders	Fiddler從服務器接收完響應首部的時間
ServerDoneResponse	Fiddler從服務器接收完整個響應的時間
ClientBeginResponse	Fiddler開始向客戶端發送響應的時間
ClientDoneResponse	Fiddler向客戶端發送完響應的時間
Overall Elapsed	花費的總時間
Estimated Worldwide Performance	在不一樣的地區和鏈接方式下所花費的時間，注意，因爲實際網絡會受不少因素的影響，所以該估值可能不許確

　　點擊下方的「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

4、擴展

　　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插件的用法。