Firebug是火狐瀏覽器上一個集成式的強大調試環境，很多調試應用插件都必須基于Firebug平臺，能夠調試所有網站語言，如Html,Css等，但FireBug最吸引人的就是javascript調試功能，使用起來非常方便，是開發人員們鐘愛火狐瀏覽器的一個重要原因，可以說是每一個Web設計開發人員必備的工具。

火狐Firebug插件功能

1.CSS調試

專為網頁設計師們量身定做的CSS調試器。如今的網頁設計言必稱div+css，如果你是用table套出來的html頁面，就得按這規矩重構一遍，否則顯得你不夠時髦！用div做出來的頁面的確能精簡html代碼，html標簽減肥的結果就是css樣式表的編寫成了頁面制作的重頭戲。

2.js調試器

這是一個很不錯的javascript腳本調試器，占用空間不大，但是單步調試、設置斷點、變量查看窗口一個不少。正所謂麻雀雖小，五臟俱全。

3.Console 控制臺

控制臺能夠顯示當前頁面中的javascript錯誤以及警告，并提示出錯的文件和行號，方便調試，這些錯誤提示比起瀏覽器本身提供的錯誤提示更加詳細且具有參考價值。而且在調試Ajax應用的時候也是特別有用，你能夠在控制臺里看到每一個XMLHttpRequests請求post出去的參數、URL，http頭以及回饋的內容，原本似乎在幕后黑匣子里運作的程序被清清楚楚地展示在你面前。

4.CSS尺標
我們可以利用Firebug來查看頁面中某一區塊的CSS樣式表，如果進一步展開右側Layout tab的話，它會以標尺的形式將當前區塊占用的面積清楚地標識出來，精確到象素，更讓人驚訝的是，你能夠在這個可視化的界面中直接修改各象素的值，頁面上區塊的位置就會隨改動而變化。在頁面中某些元素出現錯位或者面積超出預料值時，該功能能夠提供有效的幫助，你可以籍此分析offset、margin、padding、size之間的關系，從而找出解決問題的辦法。

5.網絡監視器

firebug的網絡監視器同樣是功能強大的，它能將頁面中的css、javascript以及網頁中引用的圖片載入所消耗的時間以矩狀圖呈現出來，也許在這里你能一把揪出拖慢了你的網頁的元兇，進而對網頁進行調優，還有一些其它細節功能，比如預覽圖片，查看每一個外部文件甚至是xmlHttpRequests請求的http頭等等。

6.修改html

第一次看到firebug強大的html代碼查看器，就覺得它與眾不同，相比于firefox自帶的html查看器，它的功能強大了許多。

火狐Firebug插件特色

1、過濾日志消息

firebug提供了兩種方法來過濾日志消息，通過選項菜單和工具欄中的過濾器按鈕。開發者工具控制臺通過其工具欄內的過濾器按鈕提供類似的功能- 集中在一個地方。

2、命令行API

firebug中的命令行API提供了一些特殊功能，以方便您使用。開發工具命令行有一些共同的功能，但也有一些其他的功能，錯過了別人。

3、服務器日志

像FirePHP這樣的firebug擴展允許將服務器端消息記錄到firebug控制臺。該功能已經使用ChromeLogger協議集成到DevTools中，不需要安裝任何擴展。

4、堅持日志

在firebug中，您可以單擊工具欄中的Persist按鈕以保留頁面導航和重新加載之間記錄的消息。在DevTools中，這個選項被稱為啟用日志，并且在“工具箱選項”面板中可用。

5、命令歷史

該命令歷史記錄可通過在firebug的命令行按鈕，可以按↑/ ↓在DevTools命令行中。

6、控制臺API

從網頁內將東西記錄到控制臺firebug 在頁面中提供了一個控制臺API。開發者工具共享相同的API，所以你的console.*語句將繼續工作。

Firebug安裝教程

1.安裝完畢最新版火狐瀏覽器后，點擊左上角firefox菜單

選擇【工具】-->【附加組件】。然后在【搜索所有附加組件】搜索欄中輸入“firebug”關鍵詞，出現firebug搜索結果，點擊安裝后，重啟瀏覽器即可完成安裝過程。

2.firebug的啟動完成安裝，重啟瀏覽器后，即可按“F12”快捷鍵啟動firebug插件，也可點擊firefox地址欄右邊firebug圖標啟動，啟動后，頁面將分欄顯示，firebug各項功能顯示在下方。