原因

在現實項目中，由于開發的經常調試，接口的不穩定，和接口文檔的不及時更新，我們選擇做接口測試，更多的需要自己抓包分析，接口。

為什么選擇Fiddler

a.Firebug雖然可以抓包，但是對于分析http請求的詳細信息，不夠強大。模擬http請求的功能也不夠，且firebug常常是需要“無刷新修改”，如果刷新了頁面，所有的修改都不會保存。

b.Wireshark是通用的抓包工具，但是比較龐大，對于只需要抓取http請求的應用來說，似乎有些大材小用。

c.Httpwatch也是比較常用的http抓包工具，但是只支持IE和firefox瀏覽器（其他瀏覽器可能會有相應的插件），對于想要調試chrome瀏覽器的http請求，似乎稍顯無力，

而Fiddler2 是一個使用本地 127.0.0.1:8888 的 HTTP 代理，任何能夠設置 HTTP 代理為 127.0.0.1:8888 的瀏覽器和應用程序都可以使用 Fiddler。
【官方文檔】（http://docs.telerik.com/fiddler/KnowledgeBase/Filters）

Fiddler的工作原理

Fiddler 是以代理web服務器的形式工作的，它使用代理地址:127.0.0.1，端口:8888。它能夠記錄客戶端和服務器之間的所有 HTTP請求，可以針對特定的HTTP請求，分析請求數據、設置斷點、調試web應用、修改請求的數據，甚至可以修改服務器返回的數據，功能非常強大，是web調試的利器。當Fiddler退出的時候它會自動注銷，這樣就不會影響別的 程序。不過如果Fiddler非正常退出，這時候因為Fiddler沒有自動注銷，會造成網頁無法訪問。解決的辦法是重新啟動下Fiddler

image.png

Fiddler的基本界面

我使用的fiddler4

image.png

我們要開啟抓包，要確保Capture Traffic是開啟，在File –> Capture Traffic。開啟后再左下角會有顯示，當然也可以直接點擊左下角的圖標來關閉/開啟抓包功能。

image.png

我們的Fiddler默認默認是沒開啟https支持的，當項目中的接口使用的是https協議時，需要打開該功能

• 打開fiddler配置Tools –> Options.... ->HTTPS(安裝證書)

image.png

同時勾選“Decrypt HTTPS traffic”
如果需要監聽不可信的證書的HTTPS請求的話，需要勾選“Ignore servercertificate errors”

• Fiddler開始工作了，抓到的數據包就會顯示在列表里面

image.png

【#】----------------- 抓取HTTP Request的順序，從1開始，以此遞增
【Result HTTP】-- 狀態碼
【Protocol 】-------- 請求使用的協議，如HTTP/HTTPS/FTP等
【Host 】------------ 請求地址的主機名
【URL 】----------- 請求資源的位置
【Body 】----------- 該請求的大小
【Caching 】------- 請求的緩存過期時間或者緩存控制值
【Content-Type】--- 請求響應的類型
【Process】---------- 發送此請求的進程：進程ID
【Comments 】------ 允許用戶為此回話添加備注
【Custom】----------- 允許用戶設置自定義值

R(D7LO}VIY`4NDAL_1HS(QO.png

Fiddler 內置命令與斷點

image.png

Fiddler的菜單欄

image.png

1. File菜單

File菜單中的命令主要支持完成通過Fiddler來啟動和停止web流量的捕獲（capture）,也可以加載或存儲捕獲的流量。)

image.png

（1）Capture Traffic是個開關，可以控制是否把Fiddler注冊為系統代理。當把Fiddler注冊為系統代理時，所有依賴于WinINET代理的應用（如IE瀏覽器和其他瀏覽器）會把Web請求發送給Fiddler.

（2）New Viewer是用來打開一個新的fiddler窗口

（3）Load Archive用于重新加載之前捕獲的以SAZ文件格式保存的流量。

（4）Save子菜單中的選項支持以多種方式把流量保存到文件中；該菜單選項和Web Session列表中的上下文菜單中的選項相同。

（5）Import Sessions...支持導入從其他工具捕獲的流量，也支持導入以其他格式存儲的流量。

（6）Export Sessions...支持把Fiddler捕捉到的Session以多種文件格式保存

（7）Exit菜單命令會取消把Fiddler注冊為系統代理，并關閉工具欄

2. Edit菜單

Edit菜單中的絕大多數命令都需要作用于Web Session中當前選中的Session,因此除非選中一個或多個Session，否則大多數命令都不可用

image.png

（1）Copy下面的幾個子菜單分別支持復制選中Session的某些信息。

（2）Remove下面的子菜單分別支持從Web Session列表中刪除全部、選擇或未選中的Session

（3）Select All命令選擇Sessions列表的所有內容。

（4）Paste as Session命令會基于剪貼板上的內容，生成一個或多個模擬的Web Session.

（5）Mark子菜單支持選擇一種顏色來標記Web Session列表中選中的Session.

（6）Unlock for Editing 菜單命令會對某個選中的Web Session解鎖，支持使用Inspectors編輯Session的所有請求和響應。

（7）Find Session...命令會打開Find Session窗口，搜索捕獲到的數據流。

3.Rules菜單

image.png

（1）Hide Image Request觸發器控制是否在Web Session列表中顯示圖像類Session.

（2）Hide CONNECTS觸發器控制是否在Web Session列表中顯示使用CONNECT請求方法的Session.

（3）Automatic Breakpoints子菜單控制Fiddler是否會自動在Before Requests或After Responses處設置斷點。Ignore Image觸發器控制這些斷電是否作用于圖片請求

（4）Customize Rules...菜單命令會使用配置的腳本編輯器打開當前的FiddlerScript文件

（5）如果選中Require Proxy Authentication菜單項，所有未提交Proxy-Authorization請求頭的請求會返回HTTP/407響應，要求客戶端安裝證書
該規則可以用于測試HTTP客戶端，確保這些規則在有證書的客戶端服務器上可以正常工作。

（6）如果選中Apply GZIP Encoding菜單項，只要請求包含具有gzip標識的Accept-Encoding請求頭，就會對除了圖片以外的所有響應使用GZIP HTTP進行壓縮。
該規則用于測試使用GZIP選項支持的客戶端是否真正對內容進行壓縮。該選項還支持性能調優，并且計算傳輸的壓縮后的數據流的字節數。

（7）如果選中Remove All Encoding,會刪除所有請求和響應的HTTP內容編碼和傳輸編碼

（8）Hide 304s選項會隱藏包含HTTP/304 Not Modified狀態的響應的所有Session.

（9）Request Japanese Content選項會把所有請求的Accept-Encoding請求頭設置或替換為ja 標識，表示客戶端希望響應以日語形式發送

（10）User-Agents子菜單支持把所有請求的User-Agent請求頭設置或替換成指定值。

（11）performance子菜單提供影響Web性能的簡單選項:

image.png

4.Tools菜單

image.png

（1）Fiddler Options...打開Fiddler Options窗口

（2）WinINET Options...打開IE的Internet Options窗口

（3）Clear WinINET Cache選項會清空IE和其他應用中所使用的WinINET緩存中的所有文件

（4）Clear WinINET Cookies選項會清空IE和其他應用中所發送的WinINET Cookie. Session的Cookies還是保持不變

（5）TextWizard...選項會啟動TextWizard窗口，支持對文本進行編碼和解碼

（6）Compare Session選項只有當選中Web Session列表中的兩個Session時才有效。

（7）Reset Script

（8）Sandbox，打開http://webdbg.com/sandbox/

（9）View IE Cache

（10）HOSTS...選項會打開Fiddler的Host Remapping工具

（11）New Session Clipboard..打開一個Session的剪貼板

5.View菜單

image.png

（1）Show Toolbar控制Fiddler工具欄是否可見

（2）Default Layout、Stacked Layout、Wide Layout三種界面布局

（3）Minimize to Tray或按下CTRL+M可以最小化Fiddler到系統托盤中

（4）Squish Session List控制Web Session列表是否水平收縮

（5）AutoScroll Session list選項控制當添加新的Session時，Fiddler是否會自動滾動到Session列表的底部

6.Help菜單

image.png

Fiddler的工具快捷欄

image.png

image.png

2.增加備注

image.png

選擇需要添加備注的請求地址，點擊左上角第二個按鈕即可添加備注
添加成功后將會在Comments欄下查看到該備注

3.回放按鈕（Ctrl + R）

image.png

當我們需要再一次對某個請求進行發送的時候，Fiddler提供了回放的功能可以再一次發送請求。

4.清空監控面板（Ctrl + X）

image.png

可以清楚面板上全部或某些請求。

5.調試bug

image.png

通過結合狀態欄中的按鈕，可以調試時請求的狀態進行攔截，上圖狀態欄處的箭頭向上，表示攔截該請求發送時候。

image.png

該狀態欄箭頭鄉下，表示Fiddler攔截請求回來的時候。放行斷點的時候單機上方的GO的按鈕即可

6.模式切換

image.png

Fiddler有兩種模式，默認是緩沖模式

7.解壓請求

image.png

將http請求的東西解壓出來，方便閱覽

8.會話保存

image.png

Fiddler默認保存 All sessions，需要注意的是Fiddler保存的會話狀態越多，占用的內存越大

9.過濾請求

image.png

該功能可以只捕獲某個客戶端發送的請求，點擊Any Process拖動鼠標到指定客戶端上。

10.查找

image.png

一般的工具都有的功能，選擇以什么顏色顯示可以更方便查看相應的內容

11.會話保存

image.png

image.png

選中需要保存會話的請求們，點擊保存，下次需要在查看的時候打開即可。

***12.截屏 **

image.png

該截屏還有計時器的功能。

13.計時器

image.png

計時功能，右擊清空

14.快速啟動瀏覽器

image.png

**15.清楚緩存 **

image.png

將ie瀏覽器的緩存清空的功能。

16.編碼/解碼

image.png

當瀏覽器的某些路徑被編碼后，利用這個工具可以得到相應解碼后的路徑，別的文本信息也可以

17.窗體分離

image.png

Filddler會話詳情

image.png

1. Statistic
關于HTTP請求的性能和其他數據分析：

image.png

我們可以從中看出一些基本性能數據：如DNS解析的時間消耗是8ms,建立TCP/IP連接的時間消耗是8ms等等信息

2. Inspectors

分為上下兩個部分，上半部分是請求頭部分，下半部分是響應頭部分。
對于每一部分，提供了多種不同格式查看每個請求和響應的內容。JPG 格式使用 ImageView 就可以看到圖片，HTML/JS/CSS 使用 TextView 可以看到響應的內容。Raw標簽可以查看原始的符合HTTP標準的請求和響應頭。Auth則可以查看授權Proxy-Authorization 和 Authorization的相關信息。Cookies標簽可以看到請求的cookie和響應的set-cookie頭信息。

image.png

image.png

3. AutoResponder

Fiddler比較重要且比較強大的功能之一?？捎糜跀r截某一請求，并重定向到本地的資源，或者使用Fiddler的內置響應?？捎糜谡{試服務器端代碼而無需修改服務器端的代碼和配置，因為攔截和重定向后，實際上訪問的是本地的文件或者得到的是Fiddler的內置響應。
請將 Enable automatic responses和Unmatched requests passthrough打勾。
RuleEditor填寫本地指向文件。

image.png

Fiddler支持的攔截重定向的方式：

image.png

因此，如果要調試服務器的某個腳本文件，可以將該腳本攔截到本地，在本地修改完腳本之后，再修改服務器端的內容，這可以保證，盡量在真實的環境下去調試，從而最大限度的減少bug發生的可能性。
不僅是單個url，Fiddler支持多種url匹配的方式：
I. 字符匹配
如 example可以匹配 http://www.example.com和http://example.com.cn
II. 完全匹配
以EXACT開頭表示完全匹配，如上邊的例子EXACT:http://blog.csdn.net/ohmygirl
III. 正則表達式匹配
以regex: 開頭，使用正則表達式來匹配URL
如：regex:(?insx).*.(css|js|php)$ 表示匹配所有以css,js,php結尾的請求url

4. Composer
可模擬向服務器發送數據的過程

image.png

Parsed和Raw兩種編輯方式
（1)Parsed 輸入請求的url之后executed即可，也可以修改相應的頭信息（如添加常用的accept, host, referrer, cookie，cache-control等頭部）后execute.把Request分成3部分：Request line，Request Headesr，Request Body,很容易創建一個Request
(2)Raw。使用HTTP頭部信息構建http請求。與上類似，需要一行一行手動寫一個Request

5． Filter
Fiddler另一個比較強大的功能。Fiddler提供了多維度的過濾規則，Fiddler的過濾器非常強大，可以過濾特定http狀態碼的請求，可以過濾特定請求類型的http請求（如css請求，image請求，js請求等），可以過濾請求報文大于或則小于指定大小（byte）的請求：

image.png

1.是否啟用filters。
2.我們可以維護多套filters，在不同的情形下加載不同的filter，在Actions中可以把當前的filter保存起來，也可以加載以前保存的filter

image.png

3.根據主機名信息的filter。其中第一個下拉框是只顯示內網或者外網選項,

image.png

另一個是下拉框結合它下面的輸入框來完成根據主機名信息顯示或者隱藏或者標記指定請求

image.png

下圖是一個例子，可以簡單理解為隱藏對本機的請求。

image.png

4.根據進程信息的filter，第一個checkbox選上就可以選擇進程了，那么fiddler將只顯示該進程發出的請求,另外兩個一個是指關心IE，另一個是隱藏來自service host的請求

image.png

5.根據request header的filter。
Show only if URL contains 和 Hide if URL contains 使用方法類似 功能相反。都是url中包含某些字符的filter，多種情況空格分隔。支持正則表達式和完全匹配，如下是個例子，可以簡單理解為隱藏所有js和css請求

image.png

6.這個部分是各種各樣的斷點，fiddler是有斷點功能的，可以在請求發送時斷住，之后修改請求，再發送。當然也可以在響應的時候斷住，做修改。而且fiddler還可以模擬響應，根本不發送給server端，在項目開發階段，server端沒有準備好API這個就特別有用了，或者用了復現一些問題

7.如果server端的響應代碼屬于或者不屬于哪一類就隱藏

8.這部分是根據響應類型和大小的filter，前一半是顯示隱藏的filter，后block的filter。block的filter也挺有意思，如果你選中了block css那么瀏覽器就加載不到css了

image.png

9.是對response header的flag和修改。比較有用的是如果你想知道哪些請求修改了cookie那么就可以選中第一個checkbox

5.Timeline
顯示session請求到響應的時間表，橫向為時間軸，縱向為session列表，鼠標移到timeline頁簽上，在底部會顯示四個數據：session編號和URL、session的響應類型、發送字節數和接收字節數

image.png

6.Fiddler的script系統
Fiddler最復雜的莫過于script系統了，官方的幫助文檔: http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp。

image.png

把這段腳本放在OnBeforeRequest(oSession: Session) 方法下，并且點擊"Save script"

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

}

這樣所有的cnblogs的會話都會顯示紅色。

7.log

image.png

Fiddler斷點和代理

代理

image.png

有兩種方法設置斷點
1.fiddler菜單欄->rules->automatic Breakpoints->選擇斷點方式，這種方式下設定的斷點會對之后的所有HTTP請求有效。

有兩個斷點位置：
a. before response。也就是發送請求之后，但是Fiddler代理中轉之前，這時可以修改請求的數據。
b.after response。也就是服務器響應之后，但是在Fiddler將響應中轉給客戶端之前。這時可以修改響應的結果。

2.命令行下輸入。Bpafter xxx或者bpv,bpu,bpm等設置斷點。這種斷點只針對特定類型的請求。

設置響應后斷點（after response breakpoint）,可以通過命令行設置：bpafter localhost。鍵入回車之后，web再次訪問文件，通過Fiddler的web session界面可以看到，請求已經被掛起來了，而web瀏覽器也一直處于加載的狀態。觀察右側的inspector面板下，也出現了新的東西：

image.png

切換到textView子面板，選擇需要修改的部分，然后點擊 “run to complete“，便可回送修改后的響應。假設我們修改后的內容如下：

image.png

終止斷點的方式有：

1. 在inspector界面點擊“run complete“即會終止本次HTTP請求的斷點。

2. 輸入go命令，也會使得當前的請求跳過斷點。

3. 在rules->auto breakpoint中disabled斷點即可。

總結

寫FIddler寫太多了，參考別人資料，寫一個大集合，同時也可以加深自己的理解，方便自己往后的回顧。