【Fiddler學習】Fiddler教程，比較經典全面（轉）

簡介

Fiddler（中文名稱：小提琴）是一個HTTP的調試代理，以代理服務器的方式，監聽系統的Http網絡數據流動，Fiddler能夠也可讓你檢查全部的HTTP通信，設置斷點，以及Fiddle全部的「進出」的數據（我通常用來抓包）,Fiddler還包含一個簡單卻功能強大的基於JScript .NET事件腳本子系統，它能夠支持衆多的HTTP調試任務。

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

• Fiddler_官方網站
• Fiddler_官方文檔
• 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

參考資料

• Fiddler 教程

做者：daoyidao 連接：https://www.jianshu.com/p/99b6b4cd273c 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。