前段技術,fiddler工具應用介紹

寫這篇文章的目的何在:前端

  1.本人還算喜歡看書,JavaScript的相關書看過一些,書本上總能看見對JavaScript相似的評語或者評價 - 「JavaScript調試困難」。 但是事實倒是隨着互聯網行業的的飛速發展,JavaScript調試難的問題已不像早年那樣麻煩了,這裏先不說各類IDE對JavaScript強力的支 持,恰好由於工做須要,須要調試產品在主流瀏覽器中兼容問題,因此伺機作了點功課,來爲大夥介紹這個在前端開發過程當中異常給力的工具。web

  2.第一次已介紹一款軟件爲目的寫文章,但願你們看完文章能有收穫。並且說到底這個也是一個工具,你們若是有用過更好的調試工具也歡迎推廣一下,你們好纔是真的好,哈哈。瀏覽器

  3.這款工具本人已經使用快兩年時間了,在實際工做確實獲得很多幫助,因此雖然已有介紹此工具的文章,仍是決定本身寫一篇,讓更多的朋友瞭解這個工具。緩存

  4.這個月對本人來講是一個嶄新的開始,新的生活,新的工做,新的環境...上個月發生了太多太多事情,好事壞事煩心事,感受一切都很漫長,不過堅持事後更加堅決本身努力的決心,本身強大起來纔是硬道理。服務器

  5.文章的前部分介紹工具的具體細節,後部分介紹工具的使用技巧和具體的方法,針對我的需求選擇閱讀。網絡

  6.歡迎轉載,不過請註明出處,謝謝。
 前端工程師

  Fiddler是啥?框架

  百度百科裏是這樣介紹它的 - 「Fiddler是一個web調試代理。它可以記錄全部客戶端和服務器間的http請求,容許你監視,設置斷點,甚至修改輸入輸出數據,fiddler包含了一個強大的基於事件腳本的子系統,而且可以使用.net框架語言擴展。」ide

  因此不管你是從事什麼開發,哪一種語言,只要你想了解HTTP,這個工具就值得你去了解,並且更重要的一點,這個工具是免費的。工具

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

  啓動Fiddler後,所發生的網絡數據流經過Fiddler進行中轉,就能夠看到HTTP/HTTPS數據流的信息,咱們就能夠經過對這些信息加以分析。Fiddler還提供了清除IE緩存、請求構造器、文本轉換工具等等一系列工具,對前端開發工做頗有價值。

  

  Fiddler的安裝與下載:

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

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


  Fiddler的使用界面和功能介紹:
fiddler
  監聽開關 - 只有兩種狀態,用的時候就開着,不用就讓丫休息。capturing表示捕捉狀態

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

  命令行 - 就不做介紹了,難者不會,會者不難。我就屬於前者,悲劇呀...

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

  請求相關信息 - 右邊這一大片都是數據流的相關信息的查看器,這些查看器提供不少查看形式,能夠查看數據流的內容。



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

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

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

  統計資料信息(Statistics)

  Statistics

  強大的檢查器(Inspectors) - 功能不少,等待你慢慢挖掘。

  Inspectors

  Inspectors

  時間軸(Timeline)

  Timeline

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

  autoResponder


  說說我在工做中爲何使用Fiddler,如何使用Fiddler。

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

  條件1:在咱們前端工程師開發的工做中,要調試服務器上某個HTML/CSS/JavaScript文件。通常狀況下,咱們都是將文件直接進行 修改,而後從新發布再去作驗證,這樣就容易影響到測試環境或者生成環境的穩定性。更好的作法是,咱們在本地開發環境中直接修改文件並進行驗證,而後發佈到 測試環境,這樣能保證測試環境的穩定,但是又比較繁瑣。

  條件2:如今個人狀況是須要調試上線產品的瀏覽器兼容性問題,且我沒有本地環境或者生成環境去測試。假若有Bug發生在Firefox或者 Chrome這種有控制檯支持調試的瀏覽器下一切都好說,但是假如bug只發生在遨遊,TT,世界之窗,搜狗...這種的沒有調試功能的瀏覽器下,並且你 還遇見了我目前的狀況,那麼若是沒有Fiddler這種工具,只能說這就是一場災難。

  Fiddler工具能夠修改HTTP數據的特性,咱們就很是便捷地基於生產環境修改並驗證,確認後再發布。

  第一步,先定位調試文件且下載。假設發現頁面中的某個文件有問題(HTML/CSS/JavaScript都行),那麼咱們須要作的是就把他先下載到本地(若是本地有這個本地那麼能夠跳過此步驟),下載到本地的文件偶爾會有亂碼的狀況,建議你先清理瀏覽器緩存或者調整註冊表(Fiddler2中文亂碼問題)。使用細節以下:

  save

  第二步,Fiddler - autoResponder出場,開啓此功能。打開AutoResponder標籤設置。能夠看到界面上有三個選擇框,第一個的做用是開啓或禁用自動重定向功能,咱們就能夠在下面添加劇定向規則了;第二個選擇框被勾上時,不匹配的請求能夠經過,不影響那些沒知足咱們處理條件的請求。

  自動回覆器

  第三步,建立重定向規則,將目標是這個js的HTTP請求重定向到本地文件。選中剛剛定位的文件,經過「Add…」按鈕增長規則,也能夠直接拖動過來。

  selectResponder

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

  selectFile

  第五步,你調試或者不調試,它就在那裏 - 只會請求你本地的選擇的那個文件。因此,想怎麼修改都隨便你了。刷新頁面,就能夠看見這個alert了。

  alert

相關文章
相關標籤/搜索