(轉載）Fiddler調式使用知多少(一)深入研究

標籤：

原文來源於：http://www.cnblogs.com/tugenhua0707/p/4623317.html，塗根華

！個人覺得原作者寫的特別好，故收藏於此

Fiddler調式使用(一)深入研究

閱讀目錄

• Fiddler的基本概念
• 如何安裝Fiddler
• 瞭解下Fiddler使用者介面
• 理解不同表徵圖和顏色的含義
• web session的常用的快速鍵
• 瞭解web Session操作功能表
• Fiddler如何捕獲firefox中的會話
• Fiddler如何捕獲Https會話
• Fiddler的HTTP統計視圖
• 移動開發如何使用fiddler調式代碼

回到頂部

Fiddler的基本概念：

     Fiddler是一款基於windows系統的Proxy 伺服器軟體，本地啟動並執行程式，比如web瀏覽器及其他用戶端的應用程式，可以把http和https請求發送給Fiddler，Fiddler通常把這些請求轉寄給web伺服器，伺服器將這些請求的響應返回給Fiddler，Fiddler再把響應轉寄給用戶端。

      Fiddler 是以代理web伺服器的形式工作的,它使用Proxy 位址:127.0.0.1, 連接埠:8888. 當Fiddler會自動化佈建代理， 退出的時候它會自動登出代理，這樣就不會影響別的程式。如果Fiddler非正常退出，這時候因為Fiddler沒有自動登出，會造成網頁無法訪問。解決的辦法是重新啟動下Fiddler即可。

回到頂部

安裝Fiddler

     安裝Fiddler之前需要安裝.net framework， 我目前的安裝的是Fiddler4，所以我下載安裝的是.net framework4，如下所示：

安裝Fiddler和安裝一般的軟體沒有什麼區別，這裡就不介紹~~；

回到頂部

瞭解下Fiddler使用者介面

我這邊是Fiddler4的介面如下：

在fiddler中web session介面中捕獲到http請求如下所示：

Web session列表蘭中包含了一些資訊如下：

回到頂部

理解不同表徵圖和顏色的含義（下面是常見的）：

回到頂部

web session的常用的快速鍵

CTRL+A： 選中所有的session；

ESC:  取消選中所有的session；

CTRL+I  反向選中；如果session已選中，則取消，否則選中；

CTRL+X  刪除所有的session；

Delete： 刪除選中的session；

Shift+Delete 刪除所有未選中的session

R  重新執行當前請求

SHIFT+R  多次重複執行當前請求

U： 無條件重新執行當前請求，發送不包含If-Modified-Since 和 If-None-Match的要求標頭

SHIFT+U 無條件地多次重複執行當前請求。

ALT+Enter 查看當前session的屬性；

Insert：切換是否用紅色粗體標記選中的session

M  給選中的session添加描述；

回到頂部

瞭解web Session操作功能表

我們來點擊session一項後，右鍵菜單，會出現如下所示：

AutoScroll Session List選項用於決定Fiddler是否會自動把新增的session添加到web session列表中。

我們先來瞭解下 Copy功能表項目的一些session資訊如下：

Just Url： 把選中的session的url列表拷貝到剪貼簿，每行一個url。如下我們定位到session中，

當我們進行粘貼的時候，看到是一個url地址；如下所示：

http://www.telerik.com/UpdateCheck.aspx?isBeta=False

上面可以看到，我們還可以使用快速鍵ctrl+u 實現；

This column: 拷貝選中session菜單所在列的文本；如下：

到我們拷貝完成的時候，進行粘貼的時候，可以看到如下文本：

HTTP

Terse summary：把選中的session的簡要說明複製到剪貼簿中，簡要說明中包括要求方法，url，響應的狀態代碼及狀態資訊，如果響應是HTTP/3xx重新導向，文本中也會包括回應標頭中Location欄位的內容；如下所示：

當我們進行粘貼的時候，可以看到如下資訊：

GET http://www.telerik.com/UpdateCheck.aspx?isBeta=False

200 OK (text/plain)

當然如上也可以使用快速鍵；

Headers only  把session的要求標頭複製到剪貼簿中，既可以以純文字格式，也可以以HTML格式複製。如下：

粘貼如下：

GET http://www.telerik.com/UpdateCheck.aspx?isBeta=False HTTP/1.1
User-Agent: Fiddler/4.5.1.2 (.NET 4.0.30319.1026; WinNT 6.1.7601 SP1; zh-CN; 2xx86)
Pragma: no-cache
Accept-Language: zh-CN
Referer: http://fiddler2.com/client/4.5.1.2
Host: www.telerik.com
Accept-Encoding: gzip, deflate
Connection: Close
HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/plain; charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Microsoft-IIS/7.5
Set-Cookie: sid=jELer5vxx0gyb7Fw53nCXaobR7BcBb+Ortlpxuq2IuvsiQP1UoSgUO2DLC4HoxbgEq5YLfg959JRyKoL5ZX33nBVHffCk3UQDBWH5XAPRIGiSo9kJOvdHF6iP/UdEvLLyWb43itzcIaZNksXDEnidrB3lVo=; expires=Wed, 02-Jul-2025 01:56:29 GMT; path=/
Access-Control-Allow-Origin: http://converter.telerik.com
Date: Sun, 05 Jul 2015 01:56:29 GMT
Content-Length: 447
Connection: close

Session: 把整個session列表複製到剪貼簿中，支援以純文字和HTML這兩種格式進行複製。如下：

粘貼結果如下：

GET http://www.telerik.com/UpdateCheck.aspx?isBeta=False HTTP/1.1
User-Agent: Fiddler/4.5.1.2 (.NET 4.0.30319.1026; WinNT 6.1.7601 SP1; zh-CN; 2xx86)
Pragma: no-cache
Accept-Language: zh-CN
Referer: http://fiddler2.com/client/4.5.1.2
Host: www.telerik.com
Accept-Encoding: gzip, deflate
Connection: Close

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/plain; charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Microsoft-IIS/7.5
Set-Cookie: sid=jELer5vxx0gyb7Fw53nCXaobR7BcBb+Ortlpxuq2IuvsiQP1UoSgUO2DLC4HoxbgEq5YLfg959JRyKoL5ZX33nBVHffCk3UQDBWH5XAPRIGiSo9kJOvdHF6iP/UdEvLLyWb43itzcIaZNksXDEnidrB3lVo=; expires=Wed, 02-Jul-2025 01:56:29 GMT; path=/
Access-Control-Allow-Origin: http://converter.telerik.com
Date: Sun, 05 Jul 2015 01:56:29 GMT
Content-Length: 447
Connection: close

?

?`I?%&/m?{J?J??t??`[email protected]??????iG#)?*??eVe][email protected]????{???{???;?N‘????\fdl??J??!???­?~|­?"????o??????o???w?{??>??wwog????=[???2O_f?y??d?v]?i?XUu??g?f?O?n????Z7?d}q^???#

~‘????=?_?????I??o???k???z?.?u??

7}???6[?7? }?-[|:o???w‘eu????xZ-???uwU5msw????????W??n????v???F???????q?{~????_????q?f????i??????-?eZ??-}:????GOsB?X^?WE;O? ???I??U?]fE?M?|?‘??^????M?u?PV?*?‘D?4?.???b????4g?YkF?(?S????w???

Response DataURI :響應資訊的DataURI
如下：

資訊如下：

data:text/plain;base64,H4sIAAAAAAAEAO29B2AcSZYlJi9tynt/SvVK1+B0oQiAYBMk2JBAEOzBiM3mkuwdaUcjKasqgcplVmVdZhZAzO2dvPfee++999577733ujudTif33/8/XGZkAWz2zkrayZ4hgKrIHz9+fB8/IvZ/4+T+b5zs/sbJ3m+c7I/vj3fHe+n3Pr27d3dvZ/f+93/jJD1brOrqMk9fZtO3eZueZKt2XedpsVhVdeu+n6Vny2aVT9uqbujTn8zqolo36WR9cV68y+kjA34n/d7+3T36Xwh/lr6pqrJJj9Jvf/n6zWv64vV6hS7Sl3X10wQ3fb3K6jZb0jf0Cn2RLVsPfDpv29Wju3cnZXXRjNu8zOvi7XhaLe6eF7MZ/XV3VTVtc3f3/vbO/vbeg7tX86zdbraX+dV2sdzWRtv72/e3iRi/cfJ7fvf0+cmXX5z+nr9x8maep6/zabWcpaezoi2qZVqdpy19Oqmqt+lHT3NC46JYXqRXRTtPnwmoj9KiSZfVVZpdZkWZTcp8/Bsnz/OsXqaLigiYTap1y1BW2SqvJ0TeNKMunr76Yvu8zvM0Z+hZa0amKOJTjOv/AeF3j4a5AQAA

Full Summary  把web session列表中顯示的資訊複製到剪貼簿。如下：

資訊如下：

#     Result     Protocol Host       URL Body      Caching  Content-Type       Process   Comments     Custom 

1     200 HTTP      www.telerik.com   /UpdateCheck.aspx?isBeta=False      447 private    text/plain; charset=utf-8       fiddler:6500

Save子功能表中包含了用於把流量儲存到檔案中的一些選項；如下所示：

Selected Sessions中的In ArchiveZip 選項是把 Web Session列表中選中的session儲存到SAZ檔案中；如下所示：

Selected Sessions中的 As Text是把選中的所有session一起儲存到一個文字檔中；如下：

Selected Sessions中的As Text(Headers only) 把選中session的要求標頭和回應標頭一起儲存到一個文字檔中；下面還有很多選項，我這邊就不一一介紹，等用到某一項的時候，我們再來介紹；

回到頂部

Fiddler如何捕獲firefox中的會話

Fiddler啟動時預設是IE代理設定127.0.0.1:8888,其他瀏覽器需要手動設定；

Firefox手動設定如下：工具 –》選項 –》進階 –》網路 –》設定

即可生效；不過上面的設定比較麻煩，我們可以安裝一個外掛程式，如下：

Firefox中安裝FiddlerHook外掛程式

當我們安裝好fiddler後，就已經安裝好了FiddlerHook外掛程式了，我們需要去firefox中啟用這個外掛程式；工具—》附加組件—》擴充—》fiddlerHook啟用

啟用即可！！然後我們需要在firefox中進行設定即可；

我們再來看一下Firefox手動設定如下：工具 –》選項 –》進階 –》網路 –》設定

我們可以再來安裝一個hostAdmin外掛程式即可方便查看。

回到頂部

Fiddler如何捕獲Https會話

預設下，Fiddler不會捕獲HTTPS會話，需要你設定下, 開啟Fiddler  Tool->Fiddler Options->HTTPS tab

 

彈出框後一直點擊Yes即可；

回到頂部

Fiddler的HTTP統計視圖（可以最佳化請求和頁面）

    Fiddler的統計選項卡中顯示了當前Session的基本資料，在選項卡的最上方顯示的是文本資訊，最下方是個餅圖，按MIME類型顯示流量。使用Statistics頁簽，使用者可以通過選擇多個會話來得來這幾個會話的總的資訊統計，比如多個請求和傳輸的位元組數。

選擇第一個請求和最後一個請求，可獲得整個頁面載入所消耗的總體時間。從橫條圖表中還可以分別出哪些請求耗時最多，從而對頁面的訪問進行訪問速度最佳化。

如下所示：

 

餅圖如下：

 

統計選項卡的一些資訊含義如下解釋：

Request Count： 選中的session數；

Unique Hosts： 流量流向的獨立目標主機數。如果所有選中的流量都發送到相同的伺服器上，則不會顯示該欄位。

Bytes sent:  HTTP要求標頭和請求體中向外發送的位元組總數。後面括弧中分別給出了頭和body各自的位元組數。

Bytes received: HTTP要求標頭和請求體中接收到的所有位元組數。在全部計數後面的括弧中給出了要求標頭和請求體各自的位元組數。

Requests started at: Fiddler接收到的第一個請求的第一個位元組的時間點。

Responses completed at: Fiddler發送到用戶端的最後一個響應的最後一個位元組的時間點。

Sequence(clock) duration:  第一個請求開始到最後一個響應結束之間的 “時鐘時間”。

Aggregate session duration: 所有選中的session從請求到響應之間的時間的和。

DNS Lookup time: 所有選中的session解析DNS所花費的時間的總和。

TCP/IP Connect duration: 所有選中session建立TCP/IP串連所花費的時間總和。

HTTPS Handshake duration： 所有選中session在HTTPS握手上所花費的時間總和。

Response Codes： 選中session中各個HTTP響應碼的計數。

Response Bytes by content-type: 選中session中響應的各個Content-Type的位元組數。

Estimated Performance: 選中的流量在不同語種(local)地區和串連方式下所需時間的初步估計。

回到頂部

移動開發如何使用fiddler調式代碼

 1.  首先電腦和手機要使用同一個無線網。

 2.  配置Fiddler，點擊 Tools  -->  Fiddler  Options 

 3.  手機端的配置，我這邊是Android手機(IOS也一樣)，點擊設定進去，選擇無線網，如下：

點擊代理設定進去後，如下：

接下來可以看看我的ip地址如下：

如上設定後，我們就可以使用手機訪問網頁後，可以使用fiddler來監控請求或者替換js或者css檔案了；

注意：有時候我訪問的頁面提示  “Proxy 伺服器串連失敗”，那麼這種情況下，很有可能是防火牆或者一些360類似的殺毒軟體，我們可以在防火牆下設定為fiddler通過，如下所示：

4.  修改HOST

    如上設定我們可以監聽頁面請求了，但是如果我想要監聽本地的伺服器端的代碼，就訪問不了（我本地使用的伺服器是php環境），比如上我在本地做demo，如果一切好的話，我上傳到伺服器端去，首先我們需要啟動php伺服器；啟動好後，我們來使用原生ip來訪問下；如下所示：

1.  我們需要在fiddler裡面修改配置，Tools –》 HOSTS，如下：

點擊儲存按鈕後，我們接著再訪問頁面，就可以訪問了，如下：

頁面可以訪問後，有時候我們想替換下js或者css檔案，我們就可以使用右側的tab選項欄中的AutoResponder了，如下：

在最下面的可以替換一些js或者css檔案即可了；這裡就不多介紹了~

如上是目前總結的一些基本fiddler基本知識點， 在接下來的業餘時間會多去總結Fiddler相關調式方面的知識點~  如果總結的不好的話，希望大家多多指教~~

    總結：Fiddler基本知識點總結如上一些，在接下來的時間會全面總結Fiddler相關的含義，我們平時用到的Fiddler一些方面，但是我們還需要多去理解其他各個方面的含義，為以後使用代理http請求或者最佳化頁面有更好的理解，因此我覺得有必要的多去學習下Fiddler知識點~ 所以Fiddler一直會有下文總結的~~

Fiddler實戰請點擊

(轉載）Fiddler調式使用知多少(一)深入研究