Fiddler 學習筆記

Fiddler是啥。

　　百度百科裡是這樣介紹它的 - “Fiddler是一個web調試代理。它能夠記錄所有用戶端和伺服器間的http請求，允許你監視，設定斷點，甚至修改輸入輸出資料，fiddler包含了一個強大的基於事件指令碼的子系統，並且能夠使用.net架構語言擴充。”

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

　　Fiddler就是以Proxy 伺服器的方式，監聽系統的網路資料流動。

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

　　 Fiddler的安裝與下載：

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

根據本機安裝的.net framework2.0還是4.0決定是下哪個版本。 .net framework 2.0對應下載fiddler2　　 .net framework ４.0　對應下載　fiddler 4

　假如你是早期的XP版本的系統在安裝的過程中會提示你下載.net framework 2.0或以上版本 。安裝過程很簡單，直接下一步就好了，記得一定要先安裝好.net framework　，再安裝　fiddler ，就不再詳細介紹了。 監聽開關 - 只有兩種狀態，用的時候就開著，不用就讓丫休息。capturing表示捕捉狀態

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

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

　　請求列表 - 請求列表的資訊分別有 結果（Result），協議（Protocol），主機名稱（Host），網頁地址（URL），內容大小（Body），緩衝（Caching），響應的HTTP內容類型（Content-Type），請求所啟動並執行程式（Process），注釋（Comments），自訂（Custom）

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

說說我在工作中為什麼使用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個步驟，其實只要用習慣了很隨意就可以調試了。快速前端調試其實很簡單。
Fiddler2中文亂碼問題

       作者Eric Lawrence後來推出了一個威力加強版--Fiddler，大概是目前最好用的HTTP分析軟體了。作為免費軟體，很多方面比收費的HttpWatch、HTTP Analyzer還出色。當然商業軟體也有Fiddler不具備的好處，本文主旨不是比較優劣。只說Fiddler，優點主要是： 除了能篡改request，還能篡改response； 能設定各種過濾器； 以獨立的方式運行，不僅能用於IE； 有很好的擴充性，支援指令碼和外掛程式。

 

       網上的介紹文章很多，在這不多說了。但是這些文章都沒提到一個問題：對於有些中文網站，POST請求中的中文參數不能被Fiddler正確處理。具體表現是：這些網站是用GB2312/GBK/GB18030編碼的，比如POST請求中含有"中文"二字，在Fiddler的TextView Inspector中顯示為“����”（"中文"的GBK編碼），到了WebForms Inspector中就顯示為亂碼了，因為Fiddler把它們按照UTF-8解碼。反過來，在WebForms Inspector中將參數設定為中文值，會被Fiddler用UTF-8編碼發送出去導致錯誤。其實這不是Fiddler的錯，是這些土鱉網站沒有在 HEADER中指定字元集。

 

      給作者發信詢問，很快得到了回覆：開啟登錄編輯程式，找到HKCU\Software\Microsoft\Fiddler2\，在裡面添加一個字串值，名叫HeaderEncoding，值設定為預設編碼。建議設成GB18030。然後要記得重啟Fiddler才會生效。

 

win7 

1、windows按鈕+R 

2、輸入regedit  +斷行符號+是

3、HKEY_CURRENT_USER\Software\Microsoft\Fiddler2

4、右鍵建立，選字串值  加上HeaderEncoding  然後值輸入  GBK