Firebug是Firefox下的一款開發類插件，現屬於Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制檯、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。這是一款讓人愛不釋手的插件，如果你以前沒有接觸過它，也許在閱讀互聯力量的這篇博文之後，會有一試的想法。
菜單工具，附加組件，通過搜索欄找到firebug，直接安裝，如圖
圖1
安裝firebug
提示安裝完成後，要重啓Firefox，之後你可以從菜單“工具”看到FireBug了，如圖：
圖2
安裝成功
下面開始使用Firebug的常見功能，先輸入網站地址：http://www.foxitjob.com,按下F12，或從菜單“工具”啓動Firebug，可以看到firebug對頁面結構的分析，如圖：
圖3
頁面結構
你注意到Firebug有6個主要的Tab按鈕，分別是“控制檯”，HTML，CSS，“腳本”，“DOM”，“網絡”，如果你的Firebug這幾個Tab按鈕是灰色的，表示爲禁用，這是爲了節約資源，你可以點擊“小三角圖標”啓用它們。下面分別描述這個關鍵按鈕的作用：
控制檯
控制檯能夠顯示當前頁面中的javascript錯誤以及警告，並提示出錯的文件和行號，方便調試，這些錯誤提示比起瀏覽器本身提供的錯誤提示更加詳細且具有參考價值。而且在調試Ajax應用的時候也是特別有用，你能夠在控制檯裏看到每一個XMLHttpRequests請求post出去的參數、URL，http頭以及回饋的內容，原本似乎在幕後黑匣子裏運作的程序被清清楚楚地展示在你面前。
HTML
首先你看到的是已經經過格式化的HTML代碼，它有清晰的層次，你能夠方便地分辨出每一個標籤之間的從屬並行關係，標籤的摺疊功能能夠幫助你集中精力分析代碼。源代碼上方還標記出了DOM的層次，它清楚地列出了一個hml元素的parent、child以及root元素，配合Firebug自帶的CSS查看器使用，會給div+css頁面分析編寫帶來很大的好處。你還可以在HTML查看器中直接修改HTML源代碼，並在瀏覽器中第一時間看到修改後的效果，光憑這一點就會讓許多頁面設計師死心塌地地成爲Firebug的粉絲了。
有時候頁面中的javascript會根據用戶的動作如鼠標的onmouseover來動態改變一些HTML元素的樣式表或背景色，HTML查看器會將頁面上改變的內容也抓下來，並以黃色高亮標記，讓網頁的暗箱操作徹底成爲歷史。
利用Inspect檢查功能，我們還可以用鼠標在頁面中直接選擇一些區塊，查看相應的HTML源代碼和CSS樣式表，真正的做到所見即所得，如果你使用了外部編輯器修改了當前網頁，可以點擊Firebug的reload圖片重新載入網頁，它會繼續跟蹤你之前用Inspect選中的區塊，方便調試。
CSS調試
Firebug的CSS調試器是專爲網頁設計師們量身定做的。Firebug的CSS查看器不僅自下向上列出每一個 CSS樣式表的從屬繼承關係，還列出了每一個樣式在哪個樣式文件中定義。你可以在這個查看器中直接添加、修改、刪除一些CSS樣式表屬性，並在當前頁面中直接看到修改後的結果。一個典型的應用就是頁面中的一個區塊位置顯得有些不太恰當，它需要挪動幾個象素。這時候用CSS調試工具可以輕易編輯它的位置——你可以根據需要隨意挪動象素。
如圖4中正在修改一個區塊的背景色。提示：如果你正在學習CSS樣式表的應用，但是總記不住常用的樣式表有哪些值，可以嘗試在CSS調試器中選中一個樣式表屬性，然後用上下方向鍵來改變它的值，它會把可能的值一個個遍歷給你看。
CSS查看器，能夠直接修改樣式表:
圖4
CSS調試
網絡
也許有一天，你的老闆或者客戶找到你，抱怨你製作的網頁速度奇慢，你該如何應對？你或許會說這可能是網絡問題，或者是電腦配置問題，或者是程序太慢，或者直說是他們的人品問題？不管怎麼說，最後你可能被要求去解決這個有多種可能的問題。
網絡狀況監視器能幫你解決這個棘手問題。Firebug的網絡監視器同樣是功能強大的，它能將頁面中的CSS、javascript以及網頁中引用的圖片載入所消耗的時間以矩狀圖呈現出來，也許在這裏你能一把揪出拖慢了你的網頁的元兇，進而對網頁進行調優，最後老闆滿意客戶歡喜，你的飯碗也因此而牢固。
網絡監視器還有一些其它細節功能，比如預覽圖片，查看每一個外部文件甚至是xmlHttpRequests請求的http頭等等。
圖5
網絡監視
Javascript調試器
這是一個很不錯的javascript腳本調試器，佔用空間不大，但是單步調試、設置斷點、變量查看窗口一個不少。正所謂麻雀雖小，五臟俱全。如果你有一個網站已經建成，然而它的javascript有性能上的問題或者不是太完美，可以通過面板上的Profile來統計每段腳本運行的時間，查看到底是哪些語句執行時間過長，一步步排除問題。打開www.foxitjob.com的menu.js，在switchTab函數打斷點，切換到Firefox，點互聯力量IT職業技能培訓網的“聯繫”菜單,如圖：
圖6
Javascript調試
Firebug的斷點立即觸發，你可以按F11（單步），F10（跳過）來調試代碼
圖7 300*87
斷點
DOM查看器
DOM(Document Object Model)裏頭包含了大量的Object以及函數、事件，在從前，你要想從中查到需要的內容，絕非易事，這好比你去了一個巨大的圖書館，想要找到幾本名字不太確切的小書，衆多的選擇會讓你無所適從。而使用Firebug的DOM查看器卻能方便地瀏覽DOM的內部結構，幫助你快速定位DOM對象。雙擊一個DOM對象，就能夠編輯它的變量或值，編輯的同時，你可能會發現它還有自動完成功能，當你輸入document.get之後，按下tab鍵就能補齊爲document.getElementById，非常方便。如果你認爲補齊得不夠理想，按下shift+tab又會恢復原狀。用了Firebug的DOM查看器，你的javascript從此找到了驅使的對象，Web開發也許就成了一件樂事。
順便說個技巧，FireFox的插件是可以備份的，這樣你下次可以不用在下載安裝一遍。Firefox瀏覽器的配置都被保存在下面的幾個文件夾下，其實方法十分簡單，只要把下面的目錄備份了，再次安裝Firefox之後，將這幾個文件夾覆蓋就可以還原以前的配置了
\Documents and Settings\用戶名\Application Data\Mozilla\Firefox
\Documents and Settings\用戶名\Local Settings\Application Data\Mozilla\Firefox