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](https://www.fiddlerbook.com/fiddler/help/quickexec.asp)允許用戶快速啟動腳本命令，大致分為三類：選擇數據流、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官方和獨立開發者們提供了豐富的[功能插件](https://www.telerik.com/fiddler/add-ons)（即附加組件），可大大提升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 美化后的腳本 ***** > 原文出處： [博客園-前端利器躬行記](https://www.cnblogs.com/strick/category/1472499.html) [知乎專欄-前端利器躬行記](https://zhuanlan.zhihu.com/pwtool) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。