高效前端優化工具--Fiddler入門教程

簡介:

Fiddler是用C#編寫的一個免費的HTTP/HTTPS網絡調試器。Fiddler是以代理服務器的方式,監聽系統的網絡數據流動英語中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一樣,可以讓前端開發變得更加優雅。

它可以做什麼?

Fiddler是以代理服務器的方式,監聽系統的網絡數據流動,並在ie, 火狐下都可以安裝哦(這個是最好的特點 呵呵)

  1. 它能 夠記錄所有的你電腦和互聯網之間的http通訊,Fiddler 可以也可以讓你檢查所有的http通訊,設置斷點,以及Fiddle 所有的“進出”的數據(指cookie,html,js,css等文件,這些都可以讓你胡亂修改的意思)
  2. Fiddler還提供了清除IE緩存、請求構造器、文本轉換工具等等一系列工具,對前端開發工作很有價值。

下載和安裝

  1. 官方網站免費下載Fiddler。(英文版)
  2. 下載漢化版本(本人推薦,哥哥英文不好,重點推薦漢化版)點擊下載漢化版:

工作原理:

默認情況下:Fiddler監控客戶端瀏覽器所有http數據流,如果你設置了IE瀏覽器,那麼IE瀏覽器所有的http請求都會被Fiddler監控。

工作原理如下圖:

圖片1

解釋:

作爲系統代理,所有的來自微軟互聯網服務(WinInet)的http請求再到達目標Web服務器的之前都會經過Fiddle,同樣的,所有的Http響應都會在返回客戶端之前流經Fiddler。當你關閉Fidder的時候,它就會自動從系統註冊表中移出,減少資源浪費。當你關閉Fiddler的時候,它就會自動從系統註冊表中移出,減少系統資源浪費(這個功能很好啊 贊一個)

firefox下配置Fiddler

作爲開發web開發人員常使用的瀏覽器肯定非firefox 莫屬了,下面是在火狐下配置fiddler。

  1. fiddler 在安裝和第一次運行之後會的我的文檔中生成配置文件,其中在scripts目錄下有BrowserPAC.js

QQ截圖20111107181126

  1. 2. 配置火狐

打開firefox 在選項/高級/網絡/自動代理配置/填上:file:///C:/Users/caiyou/Documents/Fiddler2/Scripts/BrowserPAC.js

ff

 

***********************************安裝ok了,下面就要測試一下了

fiddler界面

界面列表

1

初次認識一下軟件界面:

內容我就不說了,因爲是漢化版,只要小學畢業,基本上都認識,所以說還是漢化好。

左側是數據列表,以不同的圖標區分數據類型和狀態,以下是圖標對應的含義:

------------------------------------------------------------------------------

 
正在將請求數據發往服務器

 
正在從服務器下載返回數據

 
請求過程中暫停

 
返回過程中暫停

 
請求中使用了HTTP HEAD方法; 返回中應該沒有body內容

 
請求中使用了HTTP CONNECT方法,建立HTTPS連接通道

 
返回的內容類型是HTML

 
返回的內容類型是圖片

 
返回的內容類型是Javascript

 
返回的內容類型是CSS

 
返回的內容類型是XML

 
普通的成功的返回

 
返回內容爲 HTTP/300,301,302,303 or 307 跳轉

 
返回內容爲HTTP/304: 使用本地緩存

 
返回內容爲一個證書請求

 
返回內容是服務器錯誤

 
請求被客戶端、Fiddler或服務器中斷

------------------------------------------------------------------------------------------

統計功能

tj

選中左側http請求,右側會相應的統計出累積信息

還有一些其他功能,漢化版沒有語言障礙,大家可以一個個嘗試。

 

HTTP性能概述

fiddle畢竟只是測試工具,如果要想進行web前端優化,肯定要知道一下專業術語和優化策略,

下面推薦在下的幾篇網頁優化的文章:

  1. 高性能建站之前端優化篇
  2. 網站優化--讓你的網頁飛起來
  3. 讓網站飛起來01---瀏覽器緩存技術

如果你喜歡本博客可以選擇分享,或者支付寶微支付:支付寶擔保交易購買支付寶擔保交易購買


知識共享許可協議本文基於署名-非商業性使用 3.0許可協議發佈,歡迎轉載,演繹,但是必須保留本文的署名:PHP淮北(蔡友):http://www.cnblogs.com/phphuaibei,也可以郵件與我聯繫

發佈了199 篇原創文章 · 獲贊 8 · 訪問量 88萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章