fiddler 前端開發和http協議分析的瑞士軍刀

前端開發利器—FIDDLER

 

1.Fiddler相對其他調試工具的優勢

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

 

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

2.Fiddler安裝和FireFox配置

Fiddler2官方下載地址:https://www.telerik.com/fiddler   安裝程序600KB左右,目前一直都免費。Fiddler安裝非常簡單,雙擊.exe文件然後直接下一步就可以,如果首次運行報錯那很可能是因爲當前計算機沒有與之匹配的.NetFrameWork,由於Fiddler是由C#語言編寫而C#軟件的運行環境就是微軟的.NetFrameWork,所以還要下載安裝,下載地址仍然,https://www.telerik.com/fiddler 如果首次運行Fiddler沒有報錯,那麼很幸運你的計算機之前就已經有.NetFrameWork。

如果平時習慣用IE瀏覽器那麼現在就可以開始用Fiddler進行調試了,如果平時習慣用FireFox那麼還需要手動設置代理才能支持 Fiddler。配置方式——FireFox主菜單: 選項 -> 高級 -> 網絡 -> 設置(如下圖),選擇“手動配置代理”輸入HTTP代理爲127.0.0.1,然後“確定”。此時開啓的Fiddler就支持FireFox了,當關閉Fiddler後爲使FireFox能正常連接網絡應該取消上面設置的代理。

fiddler抓包原理

注意:Fiddler 是以代理web服務器的形式工作的,它使用代理地址:127.0.0.1,端口:8888。當Fiddler退出的時候它會自動註銷,這樣就不會影響別的 程序。不過如果Fiddler非正常退出,這時候因爲Fiddler沒有自動註銷,會造成網頁無法訪問。解決的辦法是重新啓動下Fiddler。

瀏覽器設置

ie和chrome瀏覽器設置

啓動fiddler後,ie瀏覽器和google瀏覽器會自動使用fiddler上網

手動設置方法:打開瀏覽器,iexplore.exe 在菜單選擇 internet選項 --> 自動配置 --》代理服務器

 

firefox設置fiddler代理上網

點firefox右上角,三根橫線圖標-》選項

在彈出頁面中,最下方找到 “網絡設置” --》設置... 按鈕

在連接設置對話框中,選擇手動代理配置上網,點確定按鈕保存,即可。

主界面

主界面

Fiddler的主界面分爲 工具面板、會話列表、命令行工具、監控面板、狀態面板

工具面板

快捷功能區

1:給會話添加備註信息
2:重新加載當前會話
3:刪除會話選項
4:放行,和斷點對應,後面詳細講解
5:響應模式。也即是,當Fiddler拿到遠程的response後是緩存起來一次響應給客戶端還是以stream的方式直接響應。
6:解碼。有些請求是被編碼的,點擊這個按鈕後可以根據響應的編碼格式自動解碼。
7:查找會話。
8:保存會話。
9:截屏。截屏後,會以會話的方式返回一個截圖。

 

響應模式

  • 緩衝模式(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有問題,可以參考這篇文章 https://blog.csdn.net/robinhunan/article/details/84348441

監聽HTTPS

  • HOST切換, 點擊菜單 Tool->HOSTS,打開hosts的配置頁面

是host生效,必須選擇Enable remapping 前的複選框。fiddler 即可導入系統hosts文件,也可以自己配置,比hosts強大一點的地方是可以配置域名別名比如 我將test.com這個域名 指向了localhost的地址。

HOST

  • 模擬各類場景

  • 通過GZIP壓縮,測試性能

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

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

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

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

     

    自定義規則

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

  • Composer(構造器)類似postman發送http請求

        請求構造顧名思義就是我們可以模擬請求,也就是說我們可以藉助Fiddler的Composer 在不改動開發環境實際代碼的情況下修改請求中的參數值並且方便的重新調用一次該請求,然後相比較2次請求響應有何具體不同。

        在瀏覽器訪問

         http://httpbin.org/forms/post

       在會話列表 , 將這個請求鼠標左鍵單擊拖入Fiddler右側 監控列表。修改請求參數,修改後點excute按鈕,這時候fiddler會發送一個新的請求,在分析新的請求會發現請求參數和響應內容已經變化。

Android 配置Fiddler抓包

配置抓HTTP包

第一步,獲取Fiddler所在PC的IP地址,以及Fiddler的代理服務器端口地址,默認爲8888

可以通過ipconfig命令等查看,最簡單的就是將鼠標移到Fiddler窗口右上角的online字樣上面,會自動提示當前電腦IP地址。

我的電腦局域網是192.168.31,所以標紅的就是fiddler的ip地址了。

比如,我當前PC IP地址爲192.168.31.109( fiddler會把這個ip解析爲: ipv4.fiddler

打開Fiddler上Tools-->Options,選擇Connections選項卡,可以查看到代理端口地址。默認爲8888。你可以自行配置成其他端口號。

還有,請勾選“Allow remote computers to connect”(這是允許Android手機通過代理進行網絡訪問)。

獲取端口號

第二步,Android手機Wifi連接成功後,高級選項中配置代理。

手機連接和PC位於同一局域網的wifi,連接成功後,進入到手機-》設置--》高級選項中。(不同手機有不同的進入方法,早期手機是長按已經連接上的wifi,現在有些手機直接提供了進入配置的箭頭按鈕。選擇修改網絡,增加手機代理上網。

配置代理

將代理服務器主機名修改爲第一步獲取的IP地址,端口號爲第一步獲取的端口號。然後保存。

以上配置OK,打開手機用瀏覽器 進行網絡,看看Fiddler上有沒有HTTP請求包。

實際測試,如果發現沒有數據包,你需要檢查Fiddler是否啓動,fiddler所在的電腦防火牆是否屏蔽手機訪問,以及端口號和IP地址是否配置正確。

Iphone配置也是類似。

蘋果手機上的配置
蘋果手機上的配置其實跟 Android 手機基本是一樣的。如圖 1. 進入設置 --》連接wifi設置
 
 
 
 

以上配置的僅僅是抓取HTTP請求,對於HTTPS請求,你還是看不到。手機抓https包參考下面的文章。

https://blog.csdn.net/robinhunan/article/details/84348441

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章