【Fiddler學習】Fiddler教程,比較經典全面(轉)


簡介

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

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

工作原理

 
工作原理

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

主界面

 
主界面

Fiddler的主界面分為 工具面板、會話面板、監控面板、狀態面板

工具面板

 
工具面板

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

兩種模式

  • 緩沖模式(Buffering Mode)Fiddler直到HTTP響應完成時才將數據返回給應用程序。可以控制響應,修改響應數據。但是時序圖有時候會出現異常
  • 流模式(Streaming Mode)Fiddler會即時將HTTP響應的數據返回給應用程序。更接近真實瀏覽器的性能。時序圖更准確,但是不能控制響應。

會話面板

 
會話面板
 
會話面板圖標

監控面板

 
監控面板
  • 統計報表
  1. 請求總數、請求包大小、響應包大小。
  2. 請求起始時間、響應結束時間、握手時間、等待時間、路由時間、TCP/IP、傳輸時間。
  3. HTTP狀態碼統計。
  4. 返回的各種類型數據的大小統計以及餅圖展現。
 
統計報表
  • 時間軸

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

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

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

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

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

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

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

狀態面板

 
狀態面板

控制台Fiddler的左下角有一個命令行工具叫做QuickExec,允許你直接輸入命令。
常見得命令有:

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

Request消息的結構

 
Request消息的結構

Response消息的結構

 
Response消息的結構

常用功能

  • 監聽HTTPS

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

 
監聽HTTPS
  • HOST切換
 
HOST
  • 模擬各類場景

  • 通過GZIP壓縮,測試性能

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

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

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

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


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

  • Compare(對比文本)


     
    對比文本
  • Composer(構造器)

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

 
Paste_Image.png

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

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/947566-5aaac0b84a397c58.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 

雙擊這次請求包在Inspectors標簽下查看返回數據為XML格式,而JSON格式一欄為空:

 
Paste_Image.png
  • Filters(過濾監控)

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


 
Filter_1
![Filter_2](http://upload-images.jianshu.io/upload_images/947566-b6ed61685e13315e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 
  • AutoResponder(請求重定向)

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

  1. 你可以將前台服務器的諸多或者某個資源在本地做個副本,如果正常網絡訪問環境下該資源出現了BUG而導致開發環境崩潰時,可以先將這個資源的請求重定向到本地副本,這樣就可以繼續進行開發調試你的頁面,從而大量節省資源維護的等待時間。
  2. 你也可以將多人同時維護的某個JS文件復制一份出來在本地,當你的開發調試收到他人調試代碼干擾時,可以將這個JS的調用重定向到本地無干擾的JS文件,進行無干擾開發,功能開發完成並調試OK之后再將你的代碼小心合入到開發環境中,這樣就可以避免受到他人干擾專心搞你的模塊開發,也就是說能夠將JS文件脫離開發環境卻不影響線上調試。
  3. 你還可以將樣式文件或者圖片指向本地。
![重定向](http://upload-images.jianshu.io/upload_images/947566-18f9c105596ef543.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 

移動端抓包

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上來
     
    APP
  • 獲取Fiddler所在機器的IP

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

  • 首先要知道Fiddler所在的機器的IP地址: 假如我安裝了Fiddler的機器的IP地址是:192.168.1.104打開IPhone 的Safari, 訪問 http://192.168.1.104:8888, 點"FiddlerRoot certificate" 然后安裝證書

     
    APP_1

     
    APP_2

     

  •  

     

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

參考資料

 


作者:daoyidao
鏈接:https://www.jianshu.com/p/99b6b4cd273c
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM