Fiddler 教程

Fiddler 教程

  

1. 簡介

Fiddler （中文名稱：小提琴）是一個 HTTP 的調試代理，以代理服務器的方式，監聽系統的Http網絡數據流動， Fiddler 可以也可以讓你檢查所有的 HTTP 通訊，設置斷點，以及 Fiddle 所有的“進出”的數據（我一般用來抓包）, Fiddler 還包含一個簡單卻功能強大的基於 JScript .NET 事件腳本子系統，它可以支持衆多的 HTTP 調試任務。

Fiddler官方網站提供了大量的幫助文檔和視頻教程,這是學習Fiddler的最好資料

• Fiddler_ 官方網站

• Fiddler_ 官方文檔

• Fiddler_ 官方視頻

• Fiddler_ 官方插件

2. 工作原理

Fiddler 是以代理WEB服務器的形式工作的,瀏覽器與服務器之間通過建立TCP連接以HTTP協議進行通信，瀏覽器默認通過自己發送HTTP請求到服務器，它使用代理地址: 127.0.0.1 , 端口: 8888 . 當 Fiddler 開啓會自動設置代理， 退出的時候它會自動註銷代理，這樣就不會影響別的程序。不過如果 Fiddler 非正常退出，這時候因爲 Fiddler 沒有自動註銷，會造成網頁無法訪問。解決的辦法是重新啓動下 Fiddler .

3. HTTP協議簡介

3.1 什麼是HTTP協議

協議是指計算機通信網絡中兩臺計算機之間進行通信所必須共同遵守的規定或規則，超文本傳輸協議(HTTP)是一種通信協議，它允許將超文本標記語言(HTML)文檔從Web服務器傳送到客戶端的瀏覽器，目前我們使用的是HTTP/1.1 版本。

3.2 URL詳解

URL(Uniform Resource Locator) 地址用於描述一個網絡上的資源, 基本格式如下

schema://host[:port#]/path/.../[?query-string][#anchor]

名稱	解釋
scheme	指定低層使用的協議(例如：http, https, ftp)
host	HTTP服務器的IP地址或者域名
port#	HTTP服務器的默認端口是80，這種情況下端口號可以省略。如果使用了別的端口，必須指明，例如 http://www.test.com:8080/
path	訪問資源的路徑
query-string	發送給http服務器的數據
anchor	錨

3.3 HTTP消息的結構

• Request

  先看Request 消息的結構, Request 消息分爲3部分，第一部分叫Request line, 第二部分叫Request header, 第三部分是body. header和body之間有個空行

第一行中的Method表示請求方法,比如"POST","GET", Path-to-resoure表示請求的資源， Http/version-number 表示HTTP協議的版本號,當使用的是"GET" 方法的時候， body是爲空的

• Response

  我們再看Response消息的結構, 和Request消息的結構基本一樣。 同樣也分爲三部分,第一部分叫Response line, 第二部分叫Response header，第三部分是body. header和body之間也有個空行

3.4 狀態碼

Response 消息中的第一行叫做狀態行，由HTTP協議版本號， 狀態碼， 狀態消息 三部分組成。

狀態碼用來告訴HTTP客戶端,HTTP服務器是否產生了預期的Response.

HTTP/1.1中定義了5類狀態碼， 狀態碼由三位數字組成，第一個數字定義了響應的類別

狀態碼	解釋
1XX	提示信息，表示請求已被成功接收，繼續處理
2XX	成功，表示請求已被成功接收，理解，接受
3XX	重定向，要完成請求必須進行更進一步的處理
4XX	客戶端錯誤，請求有語法錯誤或請求無法實現
5XX	服務器端錯誤，服務器未能實現合法的請求

• 200 OK

  最常見的就是成功響應狀態碼200了， 這表明該請求被成功地完成，所請求的資源發送回客戶端

   

• 302 Found重定向，新的URL會在response 中的Location中返回，瀏覽器將會自動使用新的URL發出新的Request

例如在IE中輸入， http://www.google.com . HTTP服務器會返回302， IE取到Response中Location header的新URL, 又重新發送了一個Request.

• 304 Not Modified

  代表上次的文檔已經被緩存了， 還可以繼續使用，例如打開博客園首頁, 發現很多Response 的status code 都是304

  [提示： 如果你不想使用本地緩存可以用Ctrl+F5 強制刷新頁面]

   

• 400 Bad Request 客戶端請求與語法錯誤，不能被服務器所理解

• 403 Forbidden 服務器收到請求，但是拒絕提供服務

• 404 Not Found

   

• 500 Internal Server Error 服務器發生了不可預期的錯誤

• 503 Server Unavailable 服務器當前不能處理客戶端的請求，一段時間後可能恢復正常

4. 界面操作

4.1 主界面

Fiddler 的主界面分爲 工具面板、會話面板、監控面板、狀態面板，下面進行一一介紹。

4.2 工具面板

• 說明註釋、重新請求、刪除會話、繼續執行、流模式/緩衝模式、解碼、保留會話、監控指定進程、尋找、保存會話、切圖、計時、打開瀏覽器、清除IE緩存、編碼/解碼工具、彈出控制監控面板、MSDN、幫助

• 兩種模式

緩衝模式（ Buffering Mode ）

Fiddler 直到 HTTP 響應完成時纔將數據返回給應用程序。可以控制響應，修改響應數據。但是時序圖有時候會出現異常

流模式（ Streaming Mode ）

Fiddler 會即時將 HTTP 響應的數據返回給應用程序。更接近真實瀏覽器的性能。時序圖更準確。但是不能控制響應。

4.3 會話面板

4.4 監控面板

• 統計報表

(1) 請求總數、請求包大小、響應包大小；

(2) 請求起始時間、響應結束時間、握手時間、等待時間、路由時間、 TCP/IP 傳輸時間；

(3) HTTP 狀態碼統計；

(4) 返回的各種類型數據的大小統計以及餅圖展現。

• 時間軸

  每個網絡請求都會經歷域名解析、建立連接、發送請求、接受數據等階段。把多個請求以時間作爲 X 軸，用圖表的形式展現出來，就形成了瀑布圖。在 Fiddler 中，只要在左側選中一些請求，右側選擇 Timeline 標籤，就可以看到這些請求的瀑布圖

看到這張圖，你是否可以回答這些問題：

1. 圖標的 Y 軸上顯示的是簡化後的 URL。爲什麼有些是綠色的，有些是黑色的？

2. 爲什麼第一個請求用陰影線來表示，其它請求卻都是實心的？

3. 請求條的不同顏色分別代表什麼？

4. 每個請求中的黑色豎線表示什麼？

5. 請求後面的圖標（如閃電和軟盤）代表了什麼？

6. 每個請求前面兩個小圓圈是什麼，爲什麼有的是紅色，有的是綠色？
   下面將一一揭曉。

1. 綠色的請求表示這是一個“有條件的請求”。HTTP 協議定義了 5 個條件請求頭部，最常見的兩個是“If-Modified-Since”和“If-None-Match”。服務器根據這兩個頭部來驗證本地緩存是否過 期，如果過期則正常返回資源的最新版本；否則僅返回 304 Not Modified，瀏覽器繼續使用本地緩存。包含條件請求頭部的請求用綠色顯示，否則用黑色。

2. 有陰影線的請求是緩衝模式下的請求，實心的是流模式下的請求。Fiddler 提供了緩衝（Buffering）和流（Streaming）兩種抓包模式：緩衝模式下，Fiddler 會在響應完成時纔將數據返回給應用程序（通常是瀏覽器），這種模式下可以控制響應，方便地修改響應內容；流模式下，Fiddler 會實時返回響應數據給瀏覽器，但沒辦法控制響應。一般使用流模式，瀑布圖會更真實一些。這兩種模式可以通過 Fiddler 的工具欄選擇。特別的，通過 Fiddler 的“AutoResponder”功能返回的響應，只能是緩衝模式。

3. 請求條的不同顏色對應着不同類型的響應，根據響應頭的 MIME Type 來歸類。如淺綠色表示圖片類型的響應；深綠色是 JavaScript；紫色是 CSS；其它都是藍色。

4. 請求中的黑色豎線，表示的是瀏覽器收到服務端響應的第一個字節這一時刻。這個時間受 DNS 解析、建立連接、發送請求、等待服務端響應等步驟的影響。

5. 請求條後面的圖標表示響應的某些特徵。如軟盤圖標表示這個響應正文從本地獲得，也就 是說服務端返回了 304；閃電錶示這是 Fiddler 的“AutoResponder”的響應；向下的箭頭表示響應是 302，需要重定向；紅色感嘆號說明這個請求有錯誤發生（狀態碼是 4XX 或 5XX）。特別的，如果請求條後面有一個紅色的X，說明服務端響應完這個請求之後，斷開了連接。出現這種情況一般有兩種可能：HTTP/1.0 的響應中沒有 Connection: Keep-Alive；或者是 HTTP/1.1 的響應中包含了 Connection: close。使用持久連接可以省去建立連接的開銷，也可以減小 TCP 慢啓動和其它擁塞控制機制帶來的影響，總之是好處多多。

6. 請求前面的紅色圓圈表示這個連接是新建的，綠色表示是複用的。上面的圓圈表示的是瀏覽器到 Fiddler 的連接，下面的圓圈是 Fiddler 到服務端的連接。

4.5 狀態面板

• 控制檯

  Fiddler的左下角有一個命令行工具叫做QuickExec,允許你直接輸入命令。

  常見得命令有

命令	解釋
help	打開官方的使用頁面介紹，所有的命令都會列出來
cls	清屏 (Ctrl+x 也可以清屏)
select	選擇會話的命令
?.png	用來選擇png後綴的圖片
bpu	截獲request
bpafter	截獲response

5. 常用功能

5.1 監聽HTTPS

Fiddler不僅能監聽HTTP請求而且默認情況下也能捕獲到HTTPS請求，Tool -> Fiddler Option -> HTTPS下面進行設置，勾選上“Decrypt HTTPS traffic”，如果不必監聽服務器端得證書錯誤可以勾上“Ignore server certification errors”，也可以跳過幾個指定的HOST來縮小或者擴大監聽範圍。

HTTPS例子：

https://pay.tenpay.com/main/app/v1.0/trans_manage.cgi?OutPutType=JSON

5.2 HOST切換

5.2 模擬各類場景

• 通過GZIP壓縮，測試性能

• 模擬Agent測試，查看服務端是否對不同客戶端定製響應

• 模擬慢速網絡，測試頁面的容錯性

• 禁用緩存，方便調試一些靜態文件或測試服務端響應情況

• 根據一些場景自定義規則

   

• 低網速模擬有時出於兼容性考慮或者對某處進行性能優化，在低網速下往往能較快發現問 題所在也容易發現性能瓶頸，可惜其他調試工具沒能提供低網速環境，而強大的Fiddler考慮到了這一點，能夠進行低網速模擬設置Rules > Performance > Stimulate Modem Speeds。

5.3 Compare（對比文本）

5.4 Composer（構造器）

請求構造顧名思義就是我們可以模擬請求，也就是說我們可以藉助Fiddler的Composer 在不改動開發環境實際代碼的情況下修改請求中的參數值並且方便的重新調用一次該請求，然後相比較2次請求響應有何具體不同。任何一個請求參數只要是合法的 取值再次調用後都會有相應的響應，那麼你想要的任意一個合法請求組合自然也能夠按照你的意願構造出來，然後再次調用以及查看返回數據，十分方便！

下面舉一個交易查詢請求構造的例子。首先進入交易查詢頁面抓包找到目標請求https://pay.tenpay.com/main/app /v1.0/trans_manage.cgi?OutPutType=JSON，雙擊該包在Inspectors標籤下查看返回數據爲JSON格式，而 XML格式一欄爲空：

將該請求鼠標左鍵單擊拖入Fiddler右側Request Builder標籤內並修改原請求參數OutPutType=JSON爲OutPu tType=XML，然後點擊Execute按鈕再次觸發調用請求，

雙擊這次請求包在Inspectors標籤下查看返回數據爲XML格式，而JSON格式一欄爲空：

5.5 Filters(過濾監控)

對一個重新載入的頁面進行抓包，如果包的條目過多而你需要關注的就那麼幾項的話，可以使用Fiddler的過濾器Filters進行抓包，那麼抓 包時只會抓取你希望抓到的那些包。切換到Filters標籤勾選Use filter，以便激活過濾器，這樣下面的各種過濾方式就可以進行選擇了。

(1).

(2).

選項1	解釋
No zone filter	不設置hosts過濾
Show Only Intranet Hosts	只顯示內網HOST
Show Only Internet Hosts	只顯示外網HOST令

選項2	解釋
No Host Filter	不設置hosts過濾
Show Only The Following Hosts	隱藏過濾到的域名
Show Only The Following Hosts	只顯示過濾到的域名
Flag The Following Hosts	標記過濾到的域名

5.5 AutoResponder(請求重定向)

所謂請求無非就是需要調用到的一些資源(包括JS、CSS和圖片等)，所謂重定向就是將頁面原本需要調用的資源指向其他資源(你能夠控制的資源或者可以引用到的資源)。

(1)你可以將前臺服務器的諸多或者某個資源在本地做個副本，如果正常網絡訪問環境下該資源出現了BUG而導致開發環境崩潰時，可以先將這個資源的請求重定向到本地副本，這樣就可以繼續進行開發調試你的頁面，從而大量節省資源維護的等待時間。

(2)你也可以將多人同時維護的某個JS文件複製一份出來在本地，當你的開發調試收到他人調試代碼干擾時，可以將這個JS的調用重定向到本地無干 擾的JS文件，進行無干擾開發，功能開發完成並調試OK之後再將你的代碼小心合入到開發環境中，這樣就可以避免受到他人干擾專心搞你的模塊開發，也就是說 能夠將JS文件脫離開發環境卻不影響線上調試。

(3)你還可以將樣式文件或者圖片指向本地如果需要的話。開發過程中的很多頁面其實都是慘不忍睹的，究其原因很大程度上是因爲缺少對應的樣式文件或者沒有圖片資源，所以樣式文件和圖片的重定向會對美感稍有要求的開發人員帶來福音。

6. 插件介紹

6.1 Format

6.2 Script

• Fiddler Script 是用JScript.NET語言寫的，

  JScript.NET  

• 在這個方法中修改Request的內容， 我們用得最多,

  static function OnBeforeRequest(oSession: Session)

• 在這個方法中修改Response的內容，

  static function OnBeforeResponse(oSession: Session)

• 添加IP Main方法中添加

  FiddlerObject.UI.lvSessions.AddBoundColumn("HostIP", 50, "x-hostIP");

• 請求，響應延遲 在OnBeforeRequest 添加

  oSession["request-trickle-delay"]  = "3000"; 
  oSession["response-trickle-delay"] = "3000";

• 我們可以控制Session在Fiddler中顯示的樣式，把這段腳本放在OnBeforeRequest(oSession: Session) 方法下，並且點擊"Save script", 這樣所有的cnblogs的會話都會顯示紅色.

    if (oSession.HostnameIs("www.cnblogs.com")) {
              oSession["ui-color"] = "red";
          }

• Fiddler Script中修改CookieCookie其實就是request 中的一個header,注意:FiddlerScript不能直接刪除或者編輯單獨的一個cookie， 你需要用replace方法或者正則表達式的方法去操作cookie的string

  static function OnBeforeRequest(oSession: Session) {   if (oSession.HostnameIs('www.example.com')    && oSession.uriContains('pagewithCookie') 
      && oSession.oRequest.headers.Contains("Cookie")) 
    { 
        var sCookie = oSession.oRequest["Cookie"]; 
    // 用replace方法或者正則表達式的方法去操作cookie的string  sCookie = sCookie.Replace("cookieName=", "ignoreme="); 
    oSession.oRequest["Cookie"] = sCookie; 
  }

• 刪除所有的cookie

  oSession.oRequest.headers.Remove("Cookie");

• 新建cookie

  oSession.oRequest.headers.Add("Cookie", "username=testname;testpassword=P@ssword1");

• Fiddler Script中修改Request 中的body

  static function OnBeforeRequest(oSession: Session) {   if(oSession.uriContains("http://www.cnblogs.com/"))  {    // 獲取Request 中的body字符串    var strBody=oSession.GetRequestBodyAsString();  // 用正則表達式或者replace方法去修改string  strBody=strBody.replace("1111","2222");  // 彈個對話框檢查下修改後的body			     FiddlerObject.alert(strBody);  // 將修改後的body，重新寫回Request中  oSession.utilSetRequestBody(strBody);
  }
  }

VS插件： https://visualstudiogallery.msdn.microsoft.com/872d27ee-38c7-4a97-98dc-0d8a431cc2ed

6.3 三方插件

• .NET可以開發

• 插件管理

   

7. 瀏覽器抓包方式

7.1 IE

7.2 Firefox

7.3 Chrome

7.4 VS

我們在用visual stuido 開發ASP.NET網站的時候也需要用Fiddler來分析HTTP， 默認的時候Fiddler是不能嗅探到localhost的網站。

在localhost後面加個點號，Fiddler就能嗅探到。

例如：原本ASP.NET的地址是 http://localhost:2391/Default.aspx， 加個點號後，變成 http://localhost .:2391/Default.aspx 就可以了

8. 移動端抓包

Fiddler不但能截獲各種瀏覽器發出的HTTP請求, 也可以截獲各種智能手機發出的HTTP/HTTPS請求。

Fiddler能捕獲IOS,Andriod,WinPhone,設備發出的請求，同理，也可以截獲IPad, MacBook的等設備發出的HTTP/HTTPS。

前提條件是：安裝Fiddler的機器，跟Iphone 在同一個網絡裏， 否則IPhone不能把HTTP發送到Fiddler的機器上來。

具體操作步驟如下：

• Fiddler設置

  打開Fiddler, Tools-> Fiddler Options。（配置完後記得要重啓Fiddler）.

選中"Allow remote computers to connect". 是允許別的機器把HTTP/HTTPS請求發送到Fiddler上來

• 獲取Fiddler所在機器的IP

• 安裝Fiddler證書這一步是爲了讓Fiddler能捕獲HTTPS請求。 如果你只需要截獲HTTP請求， 可以忽略這一步

首先要知道Fiddler所在的機器的IP地址： 假如我安裝了Fiddler的機器的IP地址是:192.168.1.104

打開IPhone 的Safari, 訪問 http://192.168.1.104:8888， 點"FiddlerRoot certificate" 然後安裝證書

• 打開IPhone, 找到你的網絡連接， 打開HTTP代理， 輸入Fiddler所在機器的IP地址(比如:192.168.1.104) 以及Fiddler的端口號8888

9. 推薦書籍

• 《Fiddler調試權威指南》是Fiddler的開發者Eric Lawrence編寫的一本權威的參考指南。全書分爲10章和4個附錄，從認識Fiddler開始，介紹了基本技巧和概念、配置選項、 Inspectors、擴展、數據流導入導出、FiddlerScript和FiddlerCore等主題；附錄部分還給出了故障排除和命令行等有用的參 考信息。

• 《Fiddler調試權威指南》適合Web開發人員和Web測試人員閱讀參考，也適 合想要學習和掌握Fiddler的讀者閱讀。通過《Fiddler調試權威指南》，你將學會如何利用Fiddler調試Web相關的應用，掌握如何調試 HTTPS數據流，學會如何在流行的設備上使用Fiddler，甚至掌握更多高級的擴展功能。

10. 其他抓包工具

同類的工具有 : HttpWatch, Firebug,Chrome自帶調試工具，WireShark

11. 總結

通過以上的介紹，你應該已經發現fiddler其它強大的功能。fiddler絕對是開發利器。

• Fiddler能記錄所有客戶端和服務器的 HTTP 和 HTTPS 請求，允許你監視、設置斷點，甚至修改輸入輸出數據，Fiddler包含了一個強大的基於事件腳本的子系統，並且能使用 .NET 語言進行擴展；

• 你對 HTTP 協議越瞭解，你就能越掌握Fiddler的使用方法，你越使用Fiddler,就越能幫助你瞭解 HTTP 協議，兩者關係緊密、相輔相成；

• 強大圖形呈現，拖拽操作，豐富的插件。

• 使用Fiddler無論對 Coder 還是 Tester 來說，都是非常有用的工具。