教學湯部落

自從架站之後，每天除了努力的寫文，就是在研究網頁那邊可以再瘦一點，再快一點

那要怎麼知道哪邊佔了多大，讀取多久呢？其實線上也有很多可以檢測的工具，不過

丫湯都是用Firefox的外掛【Firebug】來檢測網頁，或是觀看別人的網頁結構，藉此

學習並累積經驗，對於網頁設計是個不可或缺的小幫手喔～

Firebug（螢火蟲）：

官方網站：https://addons.mozilla.org/zh-TW/firefox/addon/1843

軟體版本：1.3.3（繁中）

軟體簡介：Firefox的擴充套件，用以檢測網頁結構及讀取速度。

一、安裝方法：

至官方網站點擊〝安裝到Firefox〞

點擊〝立即安裝〞

再〝重新啟動Firefox〞即完成安裝

二、檢測網站開啟速度：

在安裝完畢後，在右下角會出現一支小小的〝螢火蟲〞，輕輕的點他一下吧！

在主控台的地方將３個選項都勾選，按下〝Enable selected panels for steachs.com〞

等待檢測完畢後，再點擊〝網路〞，就可以觀看到網站每一細項的讀取速度以及

所佔檔案大小，如此一來就可以針對檔案較大或讀取較慢的檔案去做修改囉。

三、檢視網頁架構：

接下來我們按下〝觀察〞，再將滑鼠移到任一物件或文字上

在左下的地方會顯示該物件的語法，則右邊是顯示CSS，這對於研究別人的佈景

求進步有很大的幫助，可以看看別人是怎麼設計的哦～或是在修改佈景時，不知

道CSS是哪一段時，也可以這樣尋找。

四、Firebug擴充套件：

除了Firebug預設的功能之外，還可以再加裝以下套件來擴充功能

YSlow：提供各種網頁分析數據

Firecookie：檢視且管理網頁所用的cookies

FirePHP：PHP除錯用

Pixel Perfect：直接新增網頁元件在頁面上做模擬測試，並直接取得編碼參考

以上四個額外的套件站長就不多說明囉，如果你常常在設計網頁，相信這對你有很

大的幫助哦，趕緊試看看吧！平常不用的時候，就記得去把套件停用吧～