Fiddler前端開(kāi)發(fā)值得擁有

作者：聶微東 2011-10-08 10:15:29

Fiddler是一個(gè)web調(diào)試代理。它能夠記錄所有客戶端和服務(wù)器間的http請(qǐng)求，允許你監(jiān)視，設(shè)置斷點(diǎn)，甚至修改輸入輸出數(shù)據(jù)，fiddler包含了一個(gè)強(qiáng)大的基于事件腳本的子系統(tǒng)，并且能夠使用.net框架語(yǔ)言擴(kuò)展。

寫這篇文章的目的何在：

1.本人還算喜歡看書，JavaScript的相關(guān)書看過(guò)一些，書本上總能看見(jiàn)對(duì)JavaScript類似的評(píng)語(yǔ)或者評(píng)價(jià) - “JavaScript調(diào)試?yán)щy”。可是事實(shí)卻是隨著互聯(lián)網(wǎng)行業(yè)的的飛速發(fā)展，JavaScript調(diào)試難的問(wèn)題已不像早年那樣麻煩了，這里先不說(shuō)各種IDE對(duì)JavaScript強(qiáng)力的支持，剛好因?yàn)楣ぷ餍枰枰{(diào)試產(chǎn)品在主流瀏覽器中兼容問(wèn)題，所以乘機(jī)做了點(diǎn)功課，來(lái)為大伙介紹這個(gè)在前端開(kāi)發(fā)過(guò)程中異常給力的工具。

2.***次已介紹一款軟件為目的寫文章，希望大家看完文章能有收獲。而且說(shuō)到底這個(gè)也是一個(gè)工具，大家如果有用過(guò)更好的調(diào)試工具也歡迎推廣一下，大家好才是真的好，哈哈。

3.這款工具本人已經(jīng)使用快兩年時(shí)間了，在實(shí)際工作確實(shí)得到不少幫助，所以雖然已有介紹此工具的文章，還是決定自己寫一篇，讓更多的朋友了解這個(gè)工具。

4.這個(gè)月對(duì)本人來(lái)說(shuō)是一個(gè)嶄新的開(kāi)始，新的生活，新的工作，新的環(huán)境...上個(gè)月發(fā)生了太多太多事情，好事壞事煩心事，感覺(jué)一切都很漫長(zhǎng)，不過(guò)堅(jiān)持過(guò)后更加堅(jiān)定自己努力的決心，自己強(qiáng)大起來(lái)才是硬道理。

5.文章的前部分介紹工具的具體細(xì)節(jié)，后部分介紹工具的使用技巧和具體的方法，針對(duì)個(gè)人需求選擇閱讀。

6.歡迎轉(zhuǎn)載，不過(guò)請(qǐng)注明出處，謝謝。

Fiddler是啥?

百度百科里是這樣介紹它的 - “Fiddler是一個(gè)web調(diào)試代理。它能夠記錄所有客戶端和服務(wù)器間的http請(qǐng)求，允許你監(jiān)視，設(shè)置斷點(diǎn)，甚至修改輸入輸出數(shù)據(jù)，fiddler包含了一個(gè)強(qiáng)大的基于事件腳本的子系統(tǒng)，并且能夠使用.net框架語(yǔ)言擴(kuò)展。”

所以無(wú)論你是從事什么開(kāi)發(fā)，哪種語(yǔ)言，只要你想了解HTTP，這個(gè)工具就值得你去了解，而且更重要的一點(diǎn)，這個(gè)工具是免費(fèi)的。

Fiddler就是以代理服務(wù)器的方式，監(jiān)聽(tīng)系統(tǒng)的網(wǎng)絡(luò)數(shù)據(jù)流動(dòng)。

啟動(dòng)Fiddler后，所發(fā)生的網(wǎng)絡(luò)數(shù)據(jù)流通過(guò)Fiddler進(jìn)行中轉(zhuǎn)，就可以看到HTTP/HTTPS數(shù)據(jù)流的信息，我們就可以通過(guò)對(duì)這些信息加以分析。Fiddler還提供了清除IE緩存、請(qǐng)求構(gòu)造器、文本轉(zhuǎn)換工具等等一系列工具，對(duì)前端開(kāi)發(fā)工作很有價(jià)值。

Fiddler的安裝與下載：

Fiddler下載地址：http://www.fiddler2.com/fiddler2/

假如你是早期的XP版本的系統(tǒng)在安裝的過(guò)程中會(huì)提示你下載.net framework 2.0或以上版本。安裝過(guò)程很簡(jiǎn)單，就不介紹了。

Fiddler的使用界面和功能介紹：

監(jiān)聽(tīng)開(kāi)關(guān) - 只有兩種狀態(tài)，用的時(shí)候就開(kāi)著，不用就讓丫休息。capturing表示捕捉狀態(tài)

監(jiān)聽(tīng)類型 - 四種狀態(tài)分別對(duì)應(yīng) 監(jiān)聽(tīng)所有請(qǐng)求;監(jiān)聽(tīng)瀏覽器請(qǐng)求，監(jiān)聽(tīng)非瀏覽器請(qǐng)求，和全部隱藏(Hide All)

命令行 - 就不作介紹了，難者不會(huì)，會(huì)者不難。我就屬于前者，悲劇呀...

請(qǐng)求列表 - 請(qǐng)求列表的信息分別有結(jié)果(Result)，協(xié)議(Protocol)，主機(jī)名(Host)，網(wǎng)頁(yè)地址(URL)，內(nèi)容大小(Body)，緩存(Caching)，響應(yīng)的HTTP內(nèi)容類型(Content-Type)，請(qǐng)求所運(yùn)行的程序(Process)，注釋(Comments)，自定義(Custom)

請(qǐng)求相關(guān)信息 - 右邊這一大片都是數(shù)據(jù)流的相關(guān)信息的查看器，這些查看器提供很多查看形式，可以查看數(shù)據(jù)流的內(nèi)容。

Fiddler請(qǐng)求列表的icon對(duì)應(yīng)具體的數(shù)據(jù)類型和狀態(tài)，其含義是：

icon對(duì)應(yīng)的數(shù)據(jù)請(qǐng)求的含義

#p#

Fiddler請(qǐng)求相關(guān)信息對(duì)應(yīng)的主要功能：

工具最右方的是請(qǐng)求相關(guān)信息的查看器，提供了數(shù)據(jù)多方面的查看方式。想了解?看圖片。

統(tǒng)計(jì)資料信息(Statistics)

強(qiáng)大的檢查器(Inspectors) - 功能很多，等待你慢慢挖掘。

時(shí)間軸(Timeline)

自動(dòng)回復(fù)器(autoResponder) - 一會(huì)就是介紹它的具體使用方法

說(shuō)說(shuō)我在工作中為什么使用Fiddler，如何使用Fiddler。

前端工程師在工作中總會(huì)有那么一些要求，要求書寫的代碼具有優(yōu)良的兼容性，要求考慮代碼的高性能，要求方法要面向?qū)ο螅?..前端工程師總是和瀏覽器兼容有很多不得不說(shuō)的事。

條件1：在我們前端工程師開(kāi)發(fā)的工作中，要調(diào)試服務(wù)器上某個(gè)HTML/CSS/JavaScript文件。一般情況下，我們都是將文件直接進(jìn)行修改，然后重新發(fā)布再去做驗(yàn)證，這樣就容易影響到測(cè)試環(huán)境或者生成環(huán)境的穩(wěn)定性。更好的做法是，我們?cè)诒镜亻_(kāi)發(fā)環(huán)境中直接修改文件并進(jìn)行驗(yàn)證，然后發(fā)布到測(cè)試環(huán)境，這樣能保證測(cè)試環(huán)境的穩(wěn)定，可是又比較繁瑣。

條件2：現(xiàn)在我的情況是需要調(diào)試上線產(chǎn)品的瀏覽器兼容性問(wèn)題，且我沒(méi)有本地環(huán)境或者生成環(huán)境去測(cè)試。假如有Bug發(fā)生在Firefox或者Chrome這種有控制臺(tái)支持調(diào)試的瀏覽器下一切都好說(shuō)，可是假如bug只發(fā)生在遨游，TT，世界之窗，搜狗...這種的沒(méi)有調(diào)試功能的瀏覽器下，而且你還碰見(jiàn)了我目前的情況，那么如果沒(méi)有Fiddler這種工具，只能說(shuō)這就是一場(chǎng)災(zāi)難。

#p#

Fiddler工具可以修改HTTP數(shù)據(jù)的特性，我們就非常便捷地基于生產(chǎn)環(huán)境修改并驗(yàn)證，確認(rèn)后再發(fā)布。

***步，先定位調(diào)試文件且下載。假設(shè)發(fā)現(xiàn)頁(yè)面中的某個(gè)文件有問(wèn)題(HTML/CSS/JavaScript都行)，那么我們需要做的是就把他先下載到本地(如果本地有這個(gè)本地那么可以跳過(guò)此步驟)，下載到本地的文件偶爾會(huì)有亂碼的情況，建議你先清理瀏覽器緩存或者調(diào)整注冊(cè)表(Fiddler2中文亂碼問(wèn)題)。使用細(xì)節(jié)如下：

第二步，F(xiàn)iddler - autoResponder出場(chǎng)，開(kāi)啟此功能。打開(kāi)AutoResponder標(biāo)簽設(shè)置。可以看到界面上有三個(gè)選擇框，***個(gè)的作用是開(kāi)啟或禁用自動(dòng)重定向功能，我們就可以在下面添加重定向規(guī)則了;第二個(gè)選擇框被勾上時(shí)，不匹配的請(qǐng)求可以通過(guò)，不影響那些沒(méi)滿足我們處理?xiàng)l件的請(qǐng)求。