轉前端開發利器—FIDDLER

時間 2019-11-12

標籤前端開發利器 fiddler 简体版

原文原文鏈接

http://tid.tenpay.com/?p=3011
javascript

前端開發利器—FIDDLER

BY: 石竹 / DATE: 2012-02-17 / POSTED IN: 前端開發 / VIEWS: 36132 / COMMENTS: 13 css

1.Fiddler相對其餘調試工具的優點

HttpWatch 和 Firebug絕大多數前端開發人員都比較熟悉，可是HttpWatch雖然能夠抓到每一個 HTTP 請求的所有數據，但沒法修改返回的數據；儘管Firebug能夠修改 HTML和CSS，可是在調試CGI接口時沒法干預HTTP請求的參數值和CGI返回的數據。而 Fiddler做一個 HTTP 調試代理，不但可以記錄客戶端同服務器之間的全部 HTTP 通信數據，還可以修改請求數據和返回數據，也叫作「構造請求」和「模擬響應」。除此以外，添加了willow插件的Fiddler 還能夠：統計數據包、修改Host、請求重定向、編碼轉換、低網速模擬、斷點調試以及過濾HTTP請求…Fiddler包含了一個強大的基於事件腳本的子系統，而且可以使用.net框架語言擴展。相信你已經火燒眉毛安裝它了。html

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能正常鏈接網絡應該取消上面設置的代理。java

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便可。session

建好後的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

TAGS: 前端開發，調試工具，Fiddler，神器

< 上一篇調皮的javascript 響應式網頁設計與應用下一篇 >