測試工具Fiddler（三）—— 常見功能介紹

Fiddler的功能面板

1、statistics：請求的性能指標；全世界范圍的性能測試；

RTP：一個請求的從發送出去到返回的時間；

Show chart可以看出圖表的示例；

2、inspectors:對請求解包：

• header：請求頭信息。UA,cookie,發送請求來源。
• textView:可以看到返回的數據；
• imageview:可以看到返回的圖片（如果有圖片返回的話）
• webforms:看到請求傳遞的信息；
• cookies：請求攜帶的cookie；
• response header：響應報文的頭文件

3、autoresponder: 文件代理：可以使用fiddler來自定義請求返回的文件。

    當我們線上的出現bug的時候，可以使用線上返回 的文件在本地做一個修改，看看bug是否解除。

4、composer：前后端接口聯調：可以將條目拖到composer然后進行模擬執行；偽造請求。不寫js實現跟服務器交互。類似postman。

5、log : 使用fiddler的日志；

6、filters：過濾功能，可以很好幫助只顯示我們關心的請求或者隱藏掉我們不關心的請求。

7、timeline: 網站性能分析，一個網站的請求多個網站請求進行，選中查看timeline查看請求詳情。

一、Statistics數據統計面板，性能分析

重點：主要關注RTT，體現一個請求從發送到返回響應的時間

1. 反映一個請求的性能指標，其中主要需要關注RTT
2. 會展示全世界范圍的請求平均數據
3. show chart按鈕，從餅狀圖中分別出哪些資源的請求耗時最多，從而對頁面的訪問進行訪問速度優化

二、Inspectors查看請求與響應

Headers：查看Header

WebForms：用表格的形式查看body的值和請求參數的值

TextView/WebView：無格式化查看數據

Cookies：查看header中cookie的值

Raw：查看完整的消息結構

JSON：以JSON格式查看數據（類似Charles默認顯示響應數據的格式）

三、Filters過濾器

1、User Filters啟用

2、Action

Action：

• Run Filterset now運行過濾器
• Load Filterset導入過濾規則
• Save Filterset保存過濾器到本地

 如下截圖：

過濾監控會話，篩選和標記會話，或進行一些輕量級的修改；fiddler默認會檢查http頭中設置的host，標記或隱藏部分會話，選擇隱藏的時候，fiddler仍然會代理通信的主機，只是將對應會話隱藏在監控面板

（文本框內輸入需要標記或過濾的域名，多個域名使用”;”分號分割）

3、過濾器實際應用

3.1 過濾器實際應用一：只根據域名進行過濾

3.2 過濾器實際應用二：根據域名進行過濾，並過濾掉圖片類型的請求

　　

四、AutoResponder請求重定向

目的：允許從本地返回文件，代替服務器響應，而不用將文件發布到服務器【可用正式環境驗證本地文件】。

關於Fiddler的AutoResponder重定向功能，主要是時進行會話的攔截，然后替換原始資源的功能。

1、什么是請求重定向？

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

2、為什么要用這個功能？

• AutoResponder類似於Charles的MapLocal功能，但是更強大，因為可以用正則去匹配；
• 平時我們可能需要觀察某個請求返回特定的響應數據，但是該請求可能每次都會帶有唯一的請求參數（如：時間戳），那就可以通過AutoResponder的正則去匹配該請求，無需url里關心唯一的請求參數，而且也可以根據Header的屬性去匹配url；
• 甚至Fiddler還提供了多種response，不一定要自定義一個response。

接下來，就是頁面介紹：

• 紅色圈：執行匹配規則，就是用來啟動AutoResponder
• 綠色圈：不匹配請求失敗的url
• 藍色圈：添加匹配規則
• 橘色圈：因為正則較為復雜，可以用Test去測試自己寫的正則能否匹配上對應url

3、使用方法

1. 需要勾選enable rules、unmatched requests passthrough選項
2. 將左側監控面板中截獲到的請求，拖到Autoresponder面板中，選中該請求-右鍵-Edit response-textview，可修改服務端返回的內容（建議格式化之后再做修改，返回的內容結構會更清晰），點擊【save】按鈕，並勾選該請求前方的復選框——客戶端重新發起該請求的時候，就會返回修改的內容。
3. http://www.bejson.com/    json校驗格式化工具

下方規則編輯框：默認精准匹配，完全相同的請求地址才會被攔截，該編輯框支持正則表達式進行模糊匹配，如regex:(?insx).*\.(css|js|PHP)$  表示匹配所有以css,js,php結尾的請求url

下方規則下拉框：可選擇服務器返回不同的code值或返回一個本地文件；Fiddler支持的攔截重定向的方式：

4、AutoResponder具體匹配規則寫法（重中之重）

注意：如果Test URL輸入框中顯示綠色代表匹配成功，顯示紅色則匹配失敗

4.1 字符串匹配（相當於模糊匹配）

匹配規則：path1/ 

http://www.example.com/**Path1/**query=example

http://www.example.com/returnUrl=**Path1/**OtherPlace

4.2 NOT匹配

匹配規則：NOT:path1/ 

http://www.example.com/Path2/query=example

4.3 EXACT精確匹配（完全匹配）

匹配規則：EXACT:http://www.example.com/path 

http://www.example.com/path

http://www.example.com/Path 

http://www.example.com/path/query=""

4.4 regex正則表達式匹配

.+ 一個或多個

.* 零個或多個

（？insx）不區分大小寫

\ 轉義

匹配規則：regex:(?inx)^https://.+\.gif$

簡單理解：https開頭，.gif結尾的url

 

5、AutoResponder實際運用

5.1 場景設計：返回404給客戶端（Fiddler有自帶的404響應可選擇）

返回不同狀態碼可用於校驗客戶端是否正確處理錯誤碼的展示效果

5.2 場景設計：返回200給客戶端（Fiddler有自帶的200響應可選擇）

5.3 場景設計：返回自定義response

5.4 場景設計：返回原始響應文件修改之后的本地響應（類似Charles的MapLocal）

首先，選中對應的請求》saveresponse》response body》本地修改響應

五、Composer構造器

Fiddler Composer的功能就是用來創建HTTP Request 然后發送。你可以自定義一個Request, 也可以手寫一個Request，你甚至可以在Web會話列表中拖拽一個已有的Request，來創建一個新的HTTP Request。

簡單來說，Composer可以用來接口測試，支持前后端接口連調，支持多種類型的請求，如GET、POST。其中，POST請求的參數寫在request body中、一般協議選擇HTTP1.1。

Composer使用操作如下：

1. 將左側監控面板中截獲到的請求，拖到composer面板中
2. 修改parsed框Request Body（post請求需要修改，get請求不需要修改）中的值
3. 點擊右上角【Execute】按鈕，即可按照修改后的請求頭和參數值重新發起一次請求，重新發起的請求在左側監控面板中可查看，修改后的請求內容在右側history中有記錄

1、Fiddler Composer的優勢

• 能從"Web會話列表"中，拖拽一個先前捕獲到的Request，可以進行篡改數據；
• 發送Request后，可以設置斷點，繼續修改Request；
• 支持在Request中上傳文件；
• 支持重復發送多次Request。

2、Composer的實操

六、timeline網站性能分析

選中多個請求，進行網站性能分析

1. Y軸：發送的請求列表
2. 進度條為多線條型，則為緩沖模式；進度條為平滑的柱狀，則為流模式
3. 綠色圓圈：連接被重用；紅色圓圈：新創建的連接
4. 頂部圓圈：客戶端連接到fiddler，下部圓圈：fiddler連接到目標服務器
5. 灰色箭頭圖標/紅色！圖標/綠色閃電圖標：服務器返回一個錯誤代碼（3XX，4XX，5XX）
6. 結尾處的紅色X:意味着服務器發送了一個連接，連接被關閉或為private類型