Darren_聶微東 - 關注前端技術 完成《前端攻略系列》僅僅是第一步...

　　最近換了新工作，搬了新家，換了新室友，一切都在重新開始。因為家里網還沒裝好，工作之余上網都得去網吧，所以園子最近比較少上了，可是博客可不能斷，就為一口氣，堅持就是勝利。好吧，叨叨完了，下面開始正文...

　　寫這篇文章的目的何在：

　　1.本人還算喜歡看書，JavaScript的相關書看過一些，書本上總能看見對JavaScript類似的評語或者評價 - “JavaScript調試困難”。可是事實卻是隨著互聯網行業的的飛速發展，JavaScript調試難的問題已不像早年那樣麻煩了，這里先不說各種IDE對JavaScript強力的支持，剛好因為工作需要，需要調試產品在主流瀏覽器中兼容問題，所以乘機做了點功課，來為大伙介紹這個在前端開發過程中異常給力的工具。

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

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

　　4.這個月對本人來說是一個嶄新的開始，新的生活，新的工作，新的環境...上個月發生了太多太多事情，好事壞事煩心事，感覺一切都很漫長，不過堅持過后更加堅定自己努力的決心，自己強大起來才是硬道理。

　　5.文章的前部分介紹工具的具體細節，后部分介紹工具的使用技巧和具體的方法，針對個人需求選擇閱讀。

　　6.歡迎轉載，不過請注明出處，謝謝。
 

　　Fiddler是啥？

　　百度百科里是這樣介紹它的 - “Fiddler是一個web調試代理。它能夠記錄所有客戶端和服務器間的http請求，允許你監視，設置斷點，甚至修改輸入輸出數據，fiddler包含了一個強大的基于事件腳本的子系統，并且能夠使用.net框架語言擴展。”

　　所以無論你是從事什么開發，哪種語言，只要你想了解HTTP，這個工具就值得你去了解，而且更重要的一點，這個工具是免費的。

　　Fiddler就是以代理服務器的方式，監聽系統的網絡數據流動。

　　啟動Fiddler后，所發生的網絡數據流通過Fiddler進行中轉，就可以看到HTTP/HTTPS數據流的信息，我們就可以通過對這些信息加以分析。Fiddler還提供了清除IE緩存、請求構造器、文本轉換工具等等一系列工具，對前端開發工作很有價值。

　　Fiddler的安裝與下載：

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

　　假如你是早期的XP版本的系統在安裝的過程中會提示你下載.net framework 2.0或以上版本 。安裝過程很簡單，就不介紹了。


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

　　監聽開關 - 只有兩種狀態，用的時候就開著，不用就讓丫休息。capturing表示捕捉狀態

　　監聽類型 - 四種狀態分別對應 監聽所有請求；監聽瀏覽器請求，監聽非瀏覽器請求，和全部隱藏(Hide All)

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

　　請求列表 - 請求列表的信息分別有 結果（Result），協議（Protocol），主機名（Host），網頁地址（URL），內容大小（Body），緩存（Caching），響應的HTTP內容類型（Content-Type），請求所運行的程序（Process），注釋（Comments），自定義（Custom）

　　請求相關信息 - 右邊這一大片都是數據流的相關信息的查看器，這些查看器提供很多查看形式，可以查看數據流的內容。

　　Fiddler請求列表的icon對應具體的數據類型和狀態，其含義是：
　　

　　Fiddler請求相關信息對應的主要功能：

　　工具最右方的是請求相關信息的查看器，提供了數據多方面的查看方式。想了解？看圖片。

　　統計資料信息(Statistics)

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

　　時間軸(Timeline)

　　自動回復器(autoResponder) - 一會就是介紹它的具體使用方法

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

　　前端工程師在工作中總會有那么一些要求，要求書寫的代碼具有優良的兼容性，要求考慮代碼的高性能，要求方法要面向對象，要求...前端工程師總是和瀏覽器兼容有很多不得不說的事。

　　條件1：在我們前端工程師開發的工作中，要調試服務器上某個HTML/CSS/JavaScript文件。一般情況下，我們都是將文件直接進行修改，然后重新發布再去做驗證，這樣就容易影響到測試環境或者生成環境的穩定性。更好的做法是，我們在本地開發環境中直接修改文件并進行驗證，然后發布到測試環境，這樣能保證測試環境的穩定，可是又比較繁瑣。

　　條件2：現在我的情況是需要調試上線產品的瀏覽器兼容性問題，且我沒有本地環境或者生成環境去測試。假如有Bug發生在Firefox或者Chrome這種有控制臺支持調試的瀏覽器下一切都好說，可是假如bug只發生在遨游，TT，世界之窗，搜狗...這種的沒有調試功能的瀏覽器下，而且你還碰見了我目前的情況，那么如果沒有Fiddler這種工具，只能說這就是一場災難。

　　Fiddler工具可以修改HTTP數據的特性，我們就非常便捷地基于生產環境修改并驗證，確認后再發布。

　　第一步，先定位調試文件且下載。假設發現頁面中的某個文件有問題（HTML/CSS/JavaScript都行），那么我們需要做的是就把他先下載到本地（如果本地有這個本地那么可以跳過此步驟），下載到本地的文件偶爾會有亂碼的情況，建議你先清理瀏覽器緩存或者調整注冊表（Fiddler2中文亂碼問題）。使用細節如下：

　　第二步，Fiddler - autoResponder出場，開啟此功能。打開AutoResponder標簽設置。可以看到界面上有三個選擇框，第一個的作用是開啟或禁用自動重定向功能，我們就可以在下面添加重定向規則了；第二個選擇框被勾上時，不匹配的請求可以通過，不影響那些沒滿足我們處理條件的請求。

　　第三步，創建重定向規則，將目標是這個js的HTTP請求重定向到本地文件。選中剛剛定位的文件，通過“Add…”按鈕增加規則，也可以直接拖動過來。

　　第四步，選擇本地剛剛保存的文件或者替換的文件，作為替換這個請求的內容。

　　第五步，你調試或者不調試，它就在那里 - 只會請求你本地的選擇的那個文件。所以，想怎么修改都隨便你了。刷新頁面，就可以看見這個alert了。

　　總結：雖然介紹時一共分為5個步驟，其實只要用習慣了很隨意就可以調試了。快速前端調試其實很簡單，你說類。

　　如果覺得這篇文章還算用心，請勞駕點右下角的推薦。如果有更好的軟件，歡迎留言分享。謝謝。^_^

　　最后提前祝大伙國慶快樂，工作順利，學習進步。