今天來介紹一下Firefox的好用plugin-Firebug，他有好用的HTML/CSS的即時預覽功能，當你在設計網頁的時候，可以利用他直接修改參數，馬上在Firefox中看到修改後的結果，不用每次都要存檔、上傳，才能看到修改後的結果，可以省下大量的時間，準備好要安裝這個好用的工具了嗎?打開你的Firefox，點選下面的直接安裝吧!

 

Firebug的相關資訊：

• 介面：正體中文
• 直接安裝：點我
• 官方網站：http://getfirebug.com/

 安裝完了以後，Firefox右下角工作列就會出現一隻蟑螂！用滑鼠點他，就會跑上來一個區塊，像下面這樣。

 

 

　　點一下蟑螂右邊的按鈕，再用滑鼠去指想要看的東西，會用藍色框框選起來，這時候點一下你要看的元件，他就會在下面顯示出這個元件的原始碼，包含HTML架構還有套用的CSS，

 

 

 

 

　　左邊的部分是HTML的部分，右邊是套用的CSS樣式表，HTML的部分都是一層一層的，你可以點選展開或是收起，來瞭解網頁的架構，在HTML的地方按右鍵，就可以編輯、複製HTML、刪除節點等功能，做了編輯的話網頁上可以即時看到效果。

 

 

　　如果有套用CSS樣式的元件，在右邊的分頁會顯示他套用的樣式，在下面的部分點兩下要修改的樣示，修改完屬性後，上面的頁面會即時的顯示出修改後的效果，就像下面兩張圖，改了顏色代碼，上面畫面的顏色就馬上跟著改變了，如果想先暫時停用這個樣式，在那行的左邊按一下，會出現一個禁止的符號，就可以停止套用這個樣式，當然也是即時可以看到改變，如果想要新增某個屬性的話，就用滑鼠在右邊空白的地方點兩下，就可以新增屬性，在輸入的時候他還會貼心的幫你補完指令，這對每次都記錯一兩個字母的人真是一大福音！(在說你自己吧....)。

 

 

 

　　滑鼠停留在CSS屬性指定的顏色，他還會跳出一個小視窗，顯示這個色碼表示的顏色是哪種顏色。

 

 

　　停在圖片的話，則會顯示出圖片，還順便告訴你這圖片是多大的，讓你方便去修改其他的屬性值。

 

 

　　在CSS分頁裡面屬性的繼承也都表示得很清楚，被刪除線劃掉的，表示這個屬性沒有被繼承到，因此改這個屬性不會對畫面造成影響，可以很明確的知道究竟影響畫面的是哪一行屬性造成的

 

 

　　其他還有很多實用的功能，例如在載入網頁的時候，可以看出載入這個網頁需要多久時間，是哪個檔案花了比較久的時間等，可以用來找出網頁開啟速度緩慢的元兇在哪邊！不用再猜測了。當你修改完後，因為只是讓你檢視效果如何，因此你覺得這樣滿意後，還是要把在伺服器上的CSS樣式表修改完成，才會真的套用到網頁上，可別改完然後很高興的按F5重新整哩，然後就......，不過可以減少改一次屬性要上傳後才能夠看到改變的困擾了，你還在改完CSS存檔->重新整理->看效果->不滿意->再改CSS存檔->再重新整理->看效果->不滿意->再改->再看->再改->再看的迴圈裡嗎?趕快裝這個可以節省不少時間！