Firebug 幫網頁稱重量、測速度,抓出拖慢網站的元兇!

作者:

網站開啟速度快或慢要怎麼測試呢?一般人大概都是「憑感覺」,但個人感覺都不一樣,也說不準。如果你想知道你的部落格或網站開啟速度多快,或者想知道到底是哪個圖檔或JavaScript拖慢了網頁顯示速度,那該怎麼測量呢?

以下介紹Firefox中非常知名的擴充套件Firebug,它是網頁設計師的好幫手,不但可以測速度、顯示CSS標籤、框架與各種網頁程式碼的內容,更可幫我們測試網頁下載速度與、除錯等,對於有這類需求的人來說,真的相當好用唷。

 

▇ 軟體小檔案 ▇

軟體名稱:Firebug
軟體版本:1.4.0b1 (另有1.3.3版,給Firefox 3.0.x專用)
軟體語言:英文
軟體性質:免費
檔案大小:257KB
系統支援:Firefox瀏覽器專用擴充套件
官方網站:http://www.getfirebug.com/
軟體下載:Firefox 2.x版專用、  Firefox 3.0.x版專用Firefox 3.5b4以上版本專用

 

以下簡單介紹Firebug在檢測網頁瀏覽速度方面的功能,其實Firebug這東西對寫網頁的人來說是個非常好用的除錯工具,面對一堆複雜的JavaScript、AJAX程式碼...等一堆有的沒的網頁程式碼,都可以透過Firebug很輕鬆的分門別類、抓出錯誤。另可參考「A Firebug Tutorial(英文)」。

如何檢測網頁瀏覽速度卡在哪邊?

第1步  在Firefox瀏覽器安裝好Firebug擴充套件後,視窗右下角會出現一個小蟲的圖示,請按一下那隻小蟲。

20-29-53

 

第2步  開啟Firefub的檢測頁面後,請先點一下上方工具列的〔Console〕,然後勾選你要在這網站中啟用的檢測功能,測速度的話請勾「Net」就好,勾選完畢後,請按一下〔Enable selected panels for briian.com〕網站。

20-31-14

 

第3步  接著請按一下工具列中的〔Net〕然後再按一下Firefox瀏覽器中的重新整理頁面按鈕(或按F5),讓瀏覽器重新讀取網頁資料。〔Net〕頁面中便會顯示已讀取的圖檔、元件、Javascript...等等項目。

灰色長條指的是該項目下載完成所花的時間長短,「1.51s」指的是「1.51秒」,「69ms」指的是「69毫秒」,也就是「0.069秒」(1秒=1000毫秒)。如果你的網站掛了越多有的沒的東西,這個清單就會越長,右下方的整體耗時的數字就會越大。我們可以依照檢測結果抓出哪個圖檔或元件耗時較長,方便我們進一步改善這問題。

20-33-19 

另外中間最下面有個「18KB」的數字,這就是這個網頁的「重量」,數字越大表示頁面中所包含的資料、圖檔、影片…的size越大。一般來說網頁的「重量」越輕越好,網友瀏覽時比較不會有拖泥帶水、等候太久的問題。(Yahoo!奇摩首頁228KB、Google首頁15KB)

 

 

第4步  其他還有很多Firebug獨有的網頁檢測、除錯功能,我們可以按一下〔Inspect〕按鈕,再去選去頁面中的框架、圖片或項目,下方便會顯示出他的原始碼與所使用的CSS、標籤...等,相當好用唷!

20-34-12



无觅相关文章插件,快速提升流量

非經授權,請勿全文轉載,本文網址:
→ 免費訂閱最新文章:  (如何訂閱?)
作者: | 發佈日期: |
注意事項:本站所介紹之軟體、設定或網站服務,經實際安裝測試並通過防毒軟體掃毒。但因為不同電腦環境與軟體設定可能都各有差異,建議您僅在非工作用的電腦安裝、測試,避免因為不可預知的錯誤、當機或軟硬體衝突,影響您的工作或電腦運作。另外,在進行任何重要的操作與設定之前,記得先行備份電腦中的重要資料,避免因為未依指示的不當操作或其他疏失造成資料毀損。當您依照本文所提供之訊息執行各種操作,表示您已閱讀此注意事項並同意自行承擔可能之風險與責任。

 

歡迎留下你的想法或意見...

  1. 通告: Firefox 開發套件 | Midashuang's Blog

  2. 天使 說道:

    其實有個網站可以幫忙檢測,如此就不用安裝額外元件了,詳細可看這一篇唷:
    http://dreamyeh.pixnet.net/blog/post/24691350

  3. Alan 說道:

    推~~~~。最近有客戶喜歡問一些怪怪的問題,說:我正常情形下開網頁到底是幾秒?沒想到firefox 竟有外掛可以測,good。那不知道有沒有ie專用的呢?謝謝

  4. 最愛吃蘋果 說道:

    我的FireFox 3.0.4版有裝,而且還支援中文界面哦! 真好用

  5. bobju 說道:

    請教一下firebug本身有沒有將其"網路"測試結果呈現出來的長條圖(純數據亦可)存檔的功能? 或是有沒有工具可以幫忙做到? 這可以用來做持續性的測試作業, 做成測試資料庫, 當做是網站效能改善的參考數據.

  6. bobju 說道:

    這工具真好用, 我藉此得到的測試數據, 找到原因改善自製網頁的開啟速度(平均每頁有100張縮圖, 全程秀完從平均7秒縮到2秒), 算是親身感受到的了.

  7. kittyli 說道:

    在雅虎偶都是用下面這個,不來恩是不是在找這個呀??
    測試網頁開版速度:http://tools.pingdom.com/fpt/
    把自己的Blog網址貼在(URL:)框框裡面,再按(Test now)即開始測試,(Total loading time:)就是開版速度。最好開版速度是在5秒以內,超過5秒就要檢討啦。偶是該大大滴檢討啦,今天測試一下竟然是17.5秒,挖勒~ccc~

  8. 通告: 是什麼在拖慢網頁/部落格讀取速度 « 二師兄的筆記部落格

  9. chainchung 說道:

    有沒有續集啊, 其它的功能也請介紹一下吧, 造福一下人群.

發表迴響

你的電子郵件位址並不會被公開。

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

隨機文章

 

本站全部文章分類

PC 個人電腦、Windows 作業系統
Chrome,Firefox,Opera,IE Email 郵件收發、收信軟體 MSN、Yahoo! 即時通訊
Windows 系統設定、功能調整 下載/上傳工具、P2P、FTP 好玩遊戲、休閒益智
影視編輯、轉檔、影音播放 文書編輯、PDF、Office、字典 桌面美化、介面最佳化
檔案管理、壓縮、備份還原 燒錄軟體、光碟燒錄 看圖軟體、繪圖、相片處理
系統維護、設定工具 網路工具、遠端遙控 防毒軟體、防火牆、病毒檢測
音樂編輯、轉檔、播放軟體 好用軟體-未分類
iPad, iPhone 手機、平板電腦
iOS 好玩遊戲、休閒益智 iOS 影視播放、影音編輯轉檔 iOS 拍照攝影特效、繪圖工具
iOS 文書處理、辦公室應用 iOS 桌布美化、系統增強工具 iOS 系統設定、功能調整
iOS 網路瀏覽、其他工具 iOS 美食旅遊、地圖服務 iOS 購物理財、生活應用
iOS 通訊、聊天、社交服務 iOS 音樂播放、音樂編輯轉檔 iPhone、iPad -未分類
Android 手機、平板電腦
  Android 好玩遊戲、休閒益智 Android 影音播放、影視編輯 Android 拍照攝影特效、繪圖
Android 文書處理、編輯應用 Android 桌布美化、系統增強 Android 系統設定、功能調整
Android 網路瀏覽、其他工具 Android 美食旅遊、地圖服務 Android 購物理財、生活應用
Android 通訊、聊天社交服務 Android 音樂播放、編輯轉檔 Android 未分類
免費空間、線上工具、社交網站
Facebook 臉書 Google Plus, Google+ Google 與其他 Google 應用
Plurk 噗浪 Twitter 微網誌 YouTube
網路空間、服務與實用工具
網站架設、網頁編輯、伺服器
Blog 部落格 WordPress 網站架設 網頁編修、網站架設
虛擬主機, VPS, 伺服器租用
硬體3C 其他、不分類
Apple 蘋果電腦 Mac OS X 作業系統
Mac OS X 系統設定、調整 Mac 下載工具、P2P、FTP Mac 好玩遊戲、休閒益智
Mac 影視編輯、轉檔播放軟體 Mac 文書編輯、PDF、字典 Mac 桌面美化、介面最佳化
Mac 檔案管理、壓縮備份還原 Mac 燒錄軟體、光碟燒錄 Mac 看圖軟體、轉檔繪圖美化
Mac 系統維護、設定工具 Mac 網路工具、郵件即時通訊 Mac 防毒、防火牆、病毒檢測
Mac 音樂編輯、轉檔播放軟體 Mac蘋果電腦-未分類