前端開發利器—FIDDLER

文章目錄

• 1.Fiddler相對其他調試工具的優勢
• 2.Fiddler安裝和FireFox配置
• 3.Fiddler中各種表徵圖的含義
• 4. Fiddler使用細則

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

HttpWatch 和 Firebug絕大多數前端開發人員都比較熟悉，但是HttpWatch雖然可以抓到每個 HTTP 請求的全部資料，但無法修改返回的資料；儘管Firebug可以修改 HTML和CSS，但是在調試CGI介面時無法幹預HTTP請求的參數值和CGI返回的資料。而 Fiddler作一個 HTTP 調試代理，不但能夠記錄用戶端同伺服器之間的所有 HTTP 通訊資料，還能夠修改請求資料和返回資料，也叫做“構造請求”和“類比響應”。除此之外， 添加了willow外掛程式的Fiddler 還可以：統計資料包、修改Host、請求重新導向、編碼轉換、低網速類比、斷點調試以及過濾HTTP請求…Fiddler包含了一個強大的基於事件指令碼的子系統，並且能夠使用.net架構語言擴充。相信你已經迫不及待安裝它了。

2.Fiddler安裝和FireFox配置

Fiddler2官方：http://www.fiddler2.com/Fiddler2/version.asp，安裝程式600KB左右，目前一直都免費。Fiddler安裝非常簡單，雙擊.exe檔案然後直接下一步就可以，如果首次運行報錯那很可能是因為當前電腦沒有與之匹配的.NetFrameWork，由於Fiddler是由C#語言編寫而C#軟體的運行環境就是微軟的.NetFrameWork，所以還要下載安裝，仍然為：http://www.fiddler2.com/Fiddler2/version.asp，如果首次運行Fiddler沒有報錯，那麼很幸運你的電腦之前就已經有.NetFrameWork。

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

3.Fiddler中各種表徵圖的含義

4. Fiddler使用細則① 資料包統計

運行Fiddler並開啟左下角的“Capturing”，在瀏覽器地址欄或者Fiddler命令列處隨便輸入一個網址：http://tid.tenpay.com

斷行符號後Fiddler就會把用戶端同伺服器之間所有的資料包都記錄下來，此時選擇多條請求後點擊“Statistics”即可查看到詳盡的資料報統計資訊：

(1) 請求總數、請求包大小、響應包大小；
(2) 請求起始時間、響應結束時間、握手時間、等待時間、路由時間、TCP/IP傳輸時間；
(3) HTTP狀態代碼統計；
(4) 返回的各種類型資料的大小統計以及餅圖展現。

②監聽範圍設定

Fiddler不僅能監聽HTTP請求而且預設情況下也能捕獲到HTTPS請求，但如果要進一步瞭解用戶端同伺服器之間的HTTPS通訊細節還要到Tool -> Fiddler Option -> HTTPS下面進行設定，勾選上“Decrypt HTTPS traffic”，如果不必監聽伺服器端得認證錯誤可以勾上“Ignore server certification errors”，也可以跳過幾個指定的HOST來縮小或者擴大監聽範圍。

③ HOST 修改

安裝了willow外掛程式的Fiddler使用起來會方便很多。比如Host的修改不必再去系統硬碟尋找host檔案了，我們只需在willow視窗下，建立一個項目，然後在裡面加入該項目涉及到的所有host。具體方法：右鍵選擇“Add Project”，按右鍵這個建立的project選擇“add host”，在彈出的對話方塊中分別填入IP和對應的Domain即可。

建好後的Host對以後的調試使用十分方便，需要使用時勾上對勾，不需要時取消，而且控制之分靈活，Host的修改可以網域名稱(單個Host)為單位也可以具體項目為單位。：

④ 請求重新導向（類比響應）

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

1. 你可以將前台伺服器的諸多或者某個CGI在本地做個副本，如果正常網路訪問環境下該CGI出現了BUG而導致開發環境崩潰時，可以先將這個CGI的請求重新導向到本機複本，這樣就可以繼續進行開發調試你的頁面，從而大量節省CGI維護的等待時間。
2. 你也可以將多人同時維護的某個JS檔案複製一份出來在本地，當你的開發調試收到他人調試代碼幹擾時，可以將這個JS的調用重新導向到本地無幹擾的JS檔案，進行無幹擾開發，功能開發完成並調試OK之後再將你的代碼小心合入到開發環境中，這樣就可以避免受到他人幹擾專心搞你的模組開發，也就是說能夠將JS檔案脫離開發環境卻不影響線上調試。
3. 你還可以將樣式檔案或者圖片指向本地如果需要的話。開發過程中的很多頁面其實都是慘不忍睹的，究其原因很大程度上是因為缺少對應的樣式檔案或者沒有圖片資源，所以樣式檔案和圖片的重新導向會對美感稍有要求的開發人員帶來福音。

此外，你還可以藉此神器搞些有取的事，比如換換百度首頁的圖片歡樂一下。

具體方法：在AutoResponser視窗下，點擊“Add”添加一個新的重新導向規則在開啟的規則對話方塊的“If URL matches”一欄填入百度首頁的主圖片資源地址：http://www.baidu.com/img/baidu_sylogo1.gif，在對應的“then respond with”一欄填入你所希望看到的本地圖片地址（或者網狀圖片地址）C:\Users\xxx\Desktop\111111.BMP （這圖是我本地圖片有我簽名，你也可以換成你心愛的女友的美圖，給她一個驚喜，說你是花了大價錢才展示一天…）。然後重新整理百度首頁, 你會驚喜的發現百度和Google原來是可以這樣更換節日圖片的啊！：

⑤ 請求構造

請求構造顧名思義就是我們可以類比請求，也就是說我們可以藉助Fiddler的Request Builder 在不改動開發環境實際代碼的情況下修改請求中的參數值並且方便的重新調用一次該請求，然後雙擊這次新調用的請求包查看CGI的返回和上次調用相比較有何具體不同。任何一個請求參數只要是合法的取值再次調用後CGI都會有相應的響應，那麼你想要的任意一個合法請求組合自然也能夠按照你的意願構造出來，然後再次調用以及查看返回資料，十分方便！

下面我舉一個交易查詢請求構造的例子。首先進入交易查詢頁面抓包找到目標請求https://pay.tenpay.com/main/app/v1.0/trans_manage.cgi?OutPutType=JSON，雙擊該包在Inspectors標籤下查看返回資料為JSON格式，而XML格式一欄為空白：

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

雙擊這次請求包在Inspectors標籤下查看返回資料為XML格式，而JSON格式一欄為空白：

另外你還可以點擊左下方的Expand All和Collapse按鈕將返回資料全部展開或收縮。

⑥請求過濾

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

(1) 可以只抓取最近的N個sessions，如果選中此項預設為200個sessions 。

(2) 可以根據host是內網還是外網類型進行過濾，也可指定特定的多個host，並且定義是抓取還是隱藏這些特定的host，也可對其進行標記。

(3) 可以只抓取瀏覽器通訊包，也可只抓取和伺服器進行通訊的包。

(4) 可以根據要求標頭部進行過濾

(5) 還可根據響應的狀態代碼以及類型和大小進行過濾。

⑦編碼轉換

前端開發人員的編碼查看、驗證、轉換、對比等操作也是經常性的，Fiddler還提供了多種編碼轉換整合的一個功能，用起來也是相當方便。在”Tools”的“Text Encode/Decode”下面可以將編碼轉換開啟：

⑧ 低網速類比

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

⑨ 命令列

命令列的使用往往能夠事半功倍，那麼看下面這些實用命令是如何具體使用：

(1) ?sometext

輸入過程中，fiddler會高亮包含輸入內容的url，斷行符號可以選中這些會話。
Eg：?searchtext

(2) >size

選中返回位元組數大於輸入數的會話。
Eg：>40000 <– Select responses over 40kb

(3) <size

選中返回位元組數小於輸入數的會話。
Eg：<5k <– Select responses under 5kb

(4) =statu或=method

選中response status = status 或者 request method = method 的會話。

Eg：=301 <– Select 301 redirect responses

Eg：=POST <– Select POST requests

(5) @host

選擇主機名稱包含輸入內容的會話，斷行符號選中。
Eg：@msn.com <– Select www.msn.com, login.msn.com

(6) bold

將後面出現的包含輸入字元的url標記為粗體。
Eg：bold /bar.aspxbold <– Call with no parameter to clear

(7) bpafter

將所有RequestUTI中包含輸入字元的response 截斷。
Eg：bpafter /favicon.icobpafter <– Call with no parameter to clear

(8) bps

將所有response返回碼與輸入相同的請求截斷。

Eg：bps 404bps <– Call with no parameter to clear

(9) bpv or bpm

在相應的HTTP請求 method上設定斷點，設定這個命令會清空之前的設定，不加參數取消斷點。
Eg：bpv POSTbpv <– Call with no parameter to clear

(10) bpu

在包含參數的request 上設定斷點，設定這個命令會清空之前的設定，不加參數取消斷點。
Eg：bpu /myservice.asmxbpu <– Call with no parameter to clear

(11) cls or clear 清空會話列表 cls 。

(12) dump 打包所有會話為zip檔案並放於C:\ dump 。

(13) g or go 恢複所有中斷的會話 g 。

(14) help 顯示協助頁面 help 。

(15) hide 最小化到系統托盤 hide 。

(16) urlreplace

將URL請求中的字串替換成其他，設定這個命令會清除前面的設定
Eg：urlreplace SeekStr ReplaceWithStrurlreplace

(17) start 註冊為系統代理程式，抓取http協議

(18) stop 關閉抓取 stop

(19) show 從系統托盤中恢複，在指令碼命令中比較有用 show

(20) select MIME

選中response Content-type header包含輸入參數的會話。
Eg：select imageselect css
Eg：select htm
Eg：select ui-bold * <– unless preceded by a slash, * means any value
Eg：select ui-comments \* <– Find comments with a *
Eg：select @Request.Accept html <– Find requests with Accept: html
Eg：select @Response.Set-Cookie domain <- Find responses that Set-Cookie on a domain

(21) allbut or keeponly

隱藏除了Content-Type header 包含輸入參數的其他會話。
Eg：allbut xmlallbut java