相信很多從事Web開發工作的開發者都聽說和使用過Firebug，但可能大部分人還不知道，其實它是一個在網頁設計方面功能相當強大的編輯器，它可以對HTML、DOM、CSS、HTTP和Javascript進行全面的跟蹤和調試。它是Firefox瀏覽器的一個插件，所以建議各位Web開發者，要充分利用FireFox瀏覽器和Firebug插件進行日常的調試工作。本篇經驗選取了12個Web開發者應該掌握的Firebug的初級使用技巧，介紹給大家。

1、使用Firebug可以找到頁面中的任何內容

不知道各位有無遇到過這樣的情況，在一個復雜的HTML頁面中，當你想找某個頁面元素的實際對應的HTML時，你不得不在一大堆HTML代碼中去查找，十分麻煩。有了Firebug，現在你只需要在頁面中，用鼠標右鍵選中某個元素，然后在彈出的菜單中，選擇“查看元素”，馬上就會在HTML頁面代碼中找到該元素對應的代碼了，十分方便，如下圖所示：

2、可以使用Firebug修改HTML和CSS

通過Firebug，可以直接修改HTML，增加HTML的屬性，刪除元素，增加CSS樣式及實現更多功能，如下圖所示：

3、可以通過Firebug查看DOM元素和對XML進行操作

當打開一個HTML頁通過Firebug查看HTML代碼時，你可以同時點在控制面板中的DOM樹，就會以DOM的樹型結構方式看到整個HTML的結構。而如果你是打開了一個XML文件，那么鼠標右鍵點XML文件中的任何一個元素，在彈出的菜單中同樣可以選擇對XML進行相關操作，如下圖所示：

4、使用Firebug調試Javascript代碼

在Firebug控制臺中，如果要執行調試Javascript代碼，只需要首先將Script控制面版啟動，然后在點擊Console按鈕，在下拉菜單中選擇顯示Javascipt及HTML錯誤(還可以讓用戶選擇顯示更多的錯誤)，接著在底部會發現出現>>>的箭頭，在這里，你可以輸入Javascipt代碼，輸入后，馬上按回車鍵，就可以執行了，十分方便，如下圖所示：

5、多次加載頁面后Firebug會記得加載前的位置

無論你重復加載多少次頁面，Firebug在每次加載頁面后總會自己記得加載前頁面所在的位置(比如你已經在瀏覽頁面的底部，此時再加載頁面，則新的頁面加載后，依然把你帶到頁面底部)。

6、使用$標記去方便訪問變量

在上面的第4點中，我們提到了在>>>這個命令行下可以進行Javascript的調試，而另外一個技巧是可以使用如$1去訪問曾經訪問過的變量中的最后一個，如此類推，可以使用$2訪問曾經訪問過的變量中的倒數第二個，如下圖所示：

7、Firebug會高亮度顯示修改過的內容

在Firebug中，只要你修改過頁面中的內容，就會以黃色高亮度顯示曾經修改過的內容，如下圖所示：

8、監視Javascript的運行性能

在Firebug中，你可以點控制臺中的“profile(概況)”選項，這將開啟Firebug的性能監視功能，之后你可以進行頁面的一系列操作，當再次點profile按鈕后，將停止對性能的監測活動，接著Firebug會顯示一個列表，其中會清楚列明操作過程中所涉及的函數，調用次數，占用時間、平均時間，最小時間，最大時間等，如下圖所示：

9、Firebug強大的網絡數據監視功能

Firebug還提供了十分功能強大的網絡數據監功能。開發者在開發web應用時，經常要觀察各類HTTP請求和回應，在這方面Firebug的功能十分強大。首先，只需要開啟控制面板中的網絡功能，然后在每次運行頁面時，都可以清楚看到每個HTTP的請求和HTTP回應的具體細節，如下圖所示：

10、使用Firebug的Log功能

在設計頁面時，經常要記錄下頁面的一些信息，這個時候，可以使用Firebug中的log日志功能，把一些信息輸出到firebug的控制臺中，這樣就方便調試了。Firebug提供了一個console對象，在插件加載的時候就注冊到Javascript的運行環境中去了，可以在程序中直接使用。console對象提供了一個log方法。在Firefox中執行如下代碼，會看到Firebug的控制臺中出現如下信息，如下圖所示：

11、可以在Firebug中調試程序

在Firebug控制臺的的Javascript控制面板中，可以對頁面中的Javascript進行調試，方法很簡單，只需要在要調試的行的左邊單擊，就會出現斷點了，之后請記住下面常件的快捷鍵：

(1) F10 進入下一行;

(2) F8繼續調試;

(3) F11進入Javascript中的函數體調試;

(4) Shift+F11跳出函數體。

，如下圖所示：

12、在Firebug中可以設置帶條件的斷點

在Firebug中，還可以設置帶條件判斷的斷點，如下圖所示：

相關推薦：

火狐瀏覽器怎么下載安裝firebug插件?

火狐Firefox開發者工具將整合Firebug功能

怎么使用firebug中firepath功能顯示隱藏元素？