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和圖片等),所謂重定向就是將頁面原本需要調用的資源指向其他資源(你能夠控制的資源或者可以引用到的資源)。
- 你可以將前臺服務器的諸多或者某個CGI在本地做個副本,如果正常網絡訪問環境下該CGI出現了BUG而導致開發環境崩潰時,可以先將這個CGI的請求重定向到本地副本,這樣就可以繼續進行開發調試你的頁面,從而大量節省CGI維護的等待時間。
- 你也可以將多人同時維護的某個JS文件複製一份出來在本地,當你的開發調試收到他人調試代碼干擾時,可以將這個JS的調用重定向到本地無干擾的JS文件,進行無干擾開發,功能開發完成並調試OK之後再將你的代碼小心合入到開發環境中,這樣就可以避免受到他人干擾專心搞你的模塊開發,也就是說能夠將JS文件脫離開發環境卻不影響線上調試。
- 你還可以將樣式文件或者圖片指向本地如果需要的話。開發過程中的很多頁面其實都是慘不忍睹的,究其原因很大程度上是因爲缺少對應的樣式文件或者沒有圖片資源,所以樣式文件和圖片的重定向會對美感稍有要求的開發人員帶來福音。
此外,你還可以藉此神器搞些有取的事,比如換換百度主頁的圖片歡樂一下。
具體方法:在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