Fiddler 網頁除錯工具(一)

哈囉!!! 大家好!!!
這一節要介紹給大家的是一種可以監控網頁流量、內容甚至可以改變網頁內容的工具。
講到監控網頁流量，相信各位都有聽過大名鼎鼎的「Wireshark」，這個流量監控工具，相信已經很普遍運用在業界上。但是這跟我們這一節要介紹的 「Fiddler」又有點不太一樣，不管是架構、還是監控的方法，都還是有些許的不太一樣。

Fiddler 可以說是瀏覽器(Browser)與伺服器(Server)之間的通訊分析的一種工具，此話怎麼說？我們從它的工作原理就可以略窺一二。

Fiddler 利用 Proxy 的技術，收集到瀏覽器與 Server 之間的傳輸內容(如：HTTP)。而當 Fiddler 啟動時瀏覽器的 Proxy 設定，會被更改為 127.0.0.1 Port 8888。這表示所有傳輸內容，都會經過 Fiddler 再傳給瀏覽器，最後顯示給使用者。

那接下來我們就開始介紹今天的內容，下圖是這一節的圖解大綱：

Step 1: 下載 Fiddler
請到以下的官網連結下載，或點選 fiddler2setup.exe 直接下載
http://www.telerik.com/download/fiddler

Step 2: 安裝 Fiddler
按兩下 fiddler2setup.exe 開始安裝

Step 3: 執行 Fiddler
按一下 Fiddler 開始執行

Step 4: Fiddler 功能介紹
這一區是屬於 Web Session 的分析：

#：Web HTTP協定，依序進入網頁後，所讀取的檔案
Result：HTTP協定的回應碼 (200：Normal、304：Redirect、404：Lost File、500：Server Error)
Protocol：載入檔案所使用的通訊協定
Host：載入檔案的來源 Server
URL：載入檔案的完整路徑
Body：載入檔案的大小，以 Byte 為單位
Caching：快取的狀態
Content-Type：載入檔案內容的屬性
Process：接收載入檔案的程式 (例如：瀏覽器)                                                             

這一區是 Statistics 的說明：

Request Count：反應秒數
Bytes Sent：傳送檔案大小
Bytes Received：接收檔案大小
Collapse Chart：將文字敘述轉成圖表

這一區是 Inspectors 的說明：

此區可以到更詳細的資料可以分析，例如 Request Headers：
Get SyntaxView：可以特別表示 HTML、Script、CSS、XML各種語法
Headers：顯示標頭內容
TextView：顯示 HTML 內容
ImageView：顯示圖檔內容
HexView：用16進制表示內容
Raw：顯示 Raw 原始內容
JSON：顯示 JSON語法內容
XML：顯示 XML語法內容

這一區是 AutoResponder 的說明：
此區一般都運用在修改網頁內容使用，例如下圖經過 AutoResponder改變圖檔後如第2張圖

修改方法如下：

第1步先在 Web session區選擇將要修改的圖檔

第2步點選「AutoResponder」接著點選「Add Rule」

第3步選擇要替代的圖檔「7-11.jpg」接著按「Save」

第4步重新更新網頁

第5步就會看到網頁圖檔被7-11替代

這一區是 Composer 的說明：

這一區主要是可以檢查網頁互動式語法，Web Server 設定有無正確

這一區是 Log 的說明：

這區顧名思義就是紀錄 Log，如果需要搜尋可以利用下方的「Search Log...」方便尋找

這一區是 Filters 的說明：

這一區主要是透過設定過濾條件做分析，例如透過只過濾正確的 Session 可以更清楚的顯示錯誤訊息以方便分析

這一區是 Timeline 的說明：

用長條圖顯示時間軸上面物件或檔案的處理時間，可以更清楚的檢查出網頁處理速度過慢的 Bottleneck

這節將先介紹到這邊，希望大家對於 Fiddler 都能有初步的認識，這個分析工具功能很多、設定也不少，透過區塊的說明，讓各位能對工具的主要功能有全盤的瞭解。

下一節我們再利用實例做詳細的說明，我們下次見，掰掰！

~ See you ~

參考出處：
http://www.telerik.com/fiddler
http://sunmr.blogspot.tw/