1. 程式人生 > >fiddler網路除錯神器(前端)——擦肩而過

fiddler網路除錯神器(前端)——擦肩而過

##Web Debugging 支援基於windowsPC端windowsMacLinux系統,各種移動裝置的通訊除錯且無瀏覽器限制(非pc windows只需多個裝置與之在同一個網域下即可)。

fiddler可以攔截並解析http/https通訊,你可以檢視和更改已發出的請求資訊,或者在服務端返回到瀏覽器之前更改已返回的響應頭資訊,把fiddler當做一箇中間人。

fiddler提供了很多方法來讓你分析網路會話資訊,fiddler不限於監聽瀏覽器的會話資訊,其他軟體的通訊業會被fiddler截獲供您分析

##入門Fiddler

首先,安裝Fiddler。

接下來,配置Fiddler伺服器。

Fiddler伺服器就是當前安裝fiddler的windows PC。

ps: fiddler依賴.NET環境,因此目前只能在window上安裝,但通過配置,其他作業系統或裝置與安裝fiddler的系統(fiddler伺服器)同在一個網域下(簡單的說可以連同一個wi-fi然後設定代理)

如在我的手機上, 代理主機名就是fiddler伺服器的計算機名或IP地址,注意fiddler預設監控的埠是8888這個可以配置

手機配置fiddler服務

某些情況下可能需要特定的配置。如下:

  1. 流量型別:如HTTPS進行解密,並與通道繫結證書認證
  2. 作業系統:如Windows 8中和的Mac OSX
  3. 網路配置:像監視遠端計算機,連結到上游代理,使用Fiddler作為一個反向代理,監控本地流量或監視撥號(dal-up)和VPN連線

最後,配置客戶端。

客戶端是Fiddler網路流量監控的源。某些客戶端應用程式,作業系統,和裝置可能需要特定的步驟,以傳送和接收與Fiddler通訊。這包括:

  1. 瀏覽器:如火狐,Opera或IE(當傳送通訊到localhost)
  2. 應用程式:如.NET應用程式,WinHTTP的應用,Java應用程式和PHP /cURL apps
  3. 裝置:如安卓,iOS的,Windows Phone 7的,和掌上電腦裝置

##配置瀏覽器

系統代理chrome

  • 在Fiddler中設定:File > Capture Traffic。或F12 或點選左下角圖示顯示Capturing
    ;

##下面我們來看看fiddler的主介面及各個功能塊

Fiddler主介面

選單欄 File Edit Rules... 稍後一一介紹, 我們先來看看如上圖對應的功能模組 在講解之前我們先來統一一下幾個詞彙

下文使用詞彙 解釋
會話/請求/通訊記錄 fiddler如上圖中2中的一項記錄
指定請求/會話 在上圖2中選中的一項會話記錄
[1-6]框 在上圖中用紅矩形圈住的框

###1:工具欄 從左到右

  1. a. 氣泡框

    功能:如圖給當前指定的會話新增一個備註

    氣泡框

  2. 重複傳送指定請求: 點選該按鈕 +

    a.無其他操作:重複傳送一次指定請求

    b.按住ctrl:無條件的重複傳送一次指定請求

    c.按住shift:出現如下圖,輸入重複次數後,fiddler按一定的頻率快速的傳送指定次數的指定請求

    Replay

  3. 分類清除指定型別的會話記錄清除

    X清除會話

  4. 作用目標一個或多個加了斷點(在講5框中功能的時候解釋)的所有會話

    Go

    點選go按鍵同時按住shift鍵只越過指定會話

  5. 選中後每個通訊的響應以流的形式傳到客戶端瀏覽器等

  6. 選中按鈕後,每一個通訊的服務端響應都會被解碼,如,服務端對網頁做了gzip壓縮,那fiddler截獲的時候就被解壓了,可以直接在fiddler 4框中Inspectors選項框檢視各種通訊資訊,如下圖,沒有選中會提示解碼

    Decode

  7. 在2框中保持最近xx個會話記錄, 選中all儲存所有, 預設值Keep All sessions

    Decode

  8. 在該按鈕上按住滑鼠左鍵,將滑鼠拖到想要讓fiddler監控的程式或瀏覽器的一個選項卡上以讓fiddler只監控該指定的程序。預設值Any Process

    預設: 預設

    選中: 選中

  9. 按條件搜尋會話記錄並標記 可以用不同色同時標記多種匹配項

    Find

    FindFindFind

  10. 儲存當前所有的會話資訊。這個很有用,可以把自己按監控或除錯的資訊給協作者共享,共同發現問題。

  11. 單擊可以倒計時5s螢幕截圖, 按住shift點選立刻截圖,且通過會話的形式返回,並記錄會話

    相機截圖

  12. l. 計時器

    單機啟動,右擊停止

  13. 在指定瀏覽器中開啟選中會話的URL

    相機截圖

  14. 清除winINET cache, 按住ctrl鍵可清除永久cookies

  15. 一個支援多種編碼解碼格式的文字編輯器

    TextWizard

    選中view bytes 直接顯示編碼後的2二進位制資料 點選Encodings在出現下圖可選擇多種編碼格式轉換到輸出檔案To FileAs Session作為一個會話輸出,可以再fiddler 會話框中檢視記錄

    TextWizard

  16. 把右邊欄脫離主視窗,點×關掉就回到主視窗了

    Tearof

  17. q. MSDN search

    這個就不用說了,fiddler的作者在創作fiddler的前幾年一直就職於微軟。

###2:會話視窗

會話視窗

  • 點選紅框標記中的每一項可以升序降序排序會話
  • 選中任一項或多項會話後可以再右邊3框中選擇各種針對當前選中會話的操作在4框中檢視和操作詳情

####符號的意義

會話視窗

###3/4:會話功能區

不限於這些功能可以安裝第三方外掛

會話功能區

  1. 過濾器,說事過濾器,就是在每個會話的請求和回覆的時候加一些條件或者增減一些資料。如下圖:

    Filters

    我們闊以在 Request Headers 中過濾出一些域來增加一些規則, 比如在所有請求域增加一些請求頭資料

    Response Headers 同理,只是其操作的是響應頭。

    Breakpoints 即在所示條件下斷點除錯

    其他的用得著的自己看看

  1. 如下圖顯示了會話中的各種資訊,包括 HeaderCookiesJSONXMLCaching,

    TextView(以純文字的形式顯示上傳或響應體),

    SyntaxView(如果ContentType是html,xml,json等會用語法高亮格式化顯示),

    wevForms(這個在請求頭中提交的表單資訊),

    HexView(請求或響應的16進位制對應資料),

    Auth(授權資訊ps:這個我記得基於IIS的ASP.NET裡面有開源的庫專門做這件事),

    ImageView(響應資料圖片檢視器),

    Raw(顯示原始的響應頭).

    上半部分是請求頭Request Headers, 下半部分是響應頭Response Header

    Inspectors

  1. c. Statistics

    顯示一個或多個(選中)會話的效能統計資訊,這個在chrome瀏覽器中有更清晰的統計方式,這裡就不多說這個了

    Statistics

  1. 自動響應器:這就是Fiddler可以除錯線上程式碼的一大功能所在。實際它更像一個攔截器,把匹配到的會話連線攔截並使用使用者設定的響應體或連線去響應。

    預設情況下這個框是灰色的

    **->**選中Enable automatix responses開啟這個攔截器開始你愉快的除錯(測試)之旅

    **->**可以點選Add Rule新增攔截規則,這裡提供了很多種匹配方式,當然也不會少了正則匹配(同時還提供了Test功能,你可以在Test彈窗中測試你寫的正則是否能批配到當前回話會其他你指定的URL並儲存)。 可以把匹配到的會話請求轉接到本地檔案或者其他的URL連結等。還可以把規則通過Import和Export匯入匯出,為團隊開發提供了遍歷。

    **->**選中Enable Latency延遲功能,這不用說大家都知道是在響應的時候做了延遲操作。 右鍵點選人你想演示響應的規則會出現下圖中的彈窗,除了馬上講的Set latency還有其他許多能在當前規則上的操作,CRUD(增刪改查不可少),添加註釋功能與會話框中的註釋功能一個意思。

    Set latency點選該選項後會出現延時的輸入框,這裡的單位是ms

    其他的功能自己看著辦了

    AutoResponder

    在我們除錯線上頁面的時候,我們闊以把線上頁面的資源(css/js等)轉到本地,用本地的程式碼去測試線上頁面。

  1. e. log

    提供了Fiddler操作的過程記錄,這個不用講了,開發和QA都很熟悉的

    log

  1. 這是Fiddler提供給使用者或開發者的一個hook/plugin入口,也是fiddler可擴充套件的地方。

    Go to中你可以選擇定位到各個hook回撥的函式。比如在響應體裡面加一個CORS響應頭。這裡給開發者提供了更靈活的擴充套件Fiddler的可能,go ahead.

    FiddlerScript

  1. 在這裡,你闊以在

    Parsed選項卡中模擬傳送如下圖列表所示的多種請求,通過點選Upload file可以模擬上傳檔案

    Scratchpad選項卡中可以儲存多個會話的請求頭提供分析和修改(只需把需要分析的會話拖到這個框中即可),當選中某一個請求頭的時候還可以使用當前的模擬器傳送對應的請求

    Composer

  1. h. Timeline

    資源載入的時間進度條這個不講了,使用chrome中的Timeline就好了

###5快捷功能

Composer

如上圖:

a. 第一個是Capturing,控制捕獲會話的快捷開關;

b. 第二個是選擇當前需要捕獲的會話的來源程式,所有程式、瀏覽器、非瀏覽器、都不捕獲選項。

c. 第三個是會話request傳送前的斷點和response返回後且到瀏覽器前的斷點,分別對應點一次,點兩次該按鈕(預設是空白即不設斷點),request斷點和response斷點詳情中詳解

後面的而是當前選中會話的一些標識和描述,如當前選中的是127個會話中的第一個, 詳細url為http://www......

###6命令列

快速執行命令列,關於命令的詳情請看

Composer