Web開發者應掌握的12個Firebug技巧

來源： 廖煜嶸

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

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

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

同樣，也提供了更快速的方法：只需要點Firebug外掛左上方的箭頭，如下圖所示，則每當滑鼠在頁面中移動時，在Firebug控制檯中就馬上顯示移動時經過的HTML元素的程式碼：

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

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

在上圖的選單中可以清楚看到，你可以對HTML元素進行各樣的修改操作，方法是先點選HTML部分的程式碼，然後滑鼠右鍵即可在彈出的選單中進行操作。

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

當開啟一個HTML頁通過Firebug檢視HTML程式碼時，你可以同時點在控制皮膚中的DOM樹，就會以DOM的樹型結構方式看到整個HTML的結 構。而如果你是開啟了一個XML檔案，那麼滑鼠右鍵點XML檔案中的任何一個元素，在彈出的選單中同樣可以選擇對XML進行相關操作，如下圖：

4、使用Firebug除錯Javascript程式碼

在Firebug控制檯中，如果要執行除錯Javascript程式碼，只需要首先將Script控制面版啟動，然後在點選Console按鈕，在下拉菜 單中選擇顯示Javascipt及HTML錯誤(還可以讓使用者選擇顯示更多的錯誤)，接著在底部會發現出現>>>的箭頭，在這裡，你可 以輸入Javascipt程式碼，輸入後，馬上按Enter鍵，就可以執行了，十分方便，如下圖：

一個小技巧是，在輸入Javascipt的時候，還支援使用tab鍵的自動完成提醒功能，比如對於一個很長的Javascipt函式，在沒輸入完的時候只要按tab鍵firebug就會幫助你自動補充完整。

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迴應的具體細節。如下圖：

在上圖中，只要點每一個請求旁邊的+號，就可以看到該請求的具體細節，如下圖：

可以看到，能看到HTTP的頭部的各種資訊。同樣，如果要看當前頁面中的比如圖片，FLASH等元素的資訊等，也可以通過上圖去點不同的選項卡去篩選檢視，十分方便。

10、使用Firebug的Log功能

在設計頁面時，經常要記錄下頁面的一些資訊，這個時候，可以使用Firebug中的log日誌功能，把一些資訊輸出到firebug的控制檯中，這樣就 方便除錯了。Firebug提供了一個console物件，在外掛載入的時候就註冊到Javascript的執行環境中去了，可以在程式中直接使用。 console物件提供了一個log方法，舉例說明如下：

在Firefox中執行如下程式碼，會看到Firebug的控制檯中出現如下資訊：

可以看到，各個級別的日誌輸出，都帶有一個彩色的圖示，能給使用者很醒目的提醒。同時，console.log 還支援格式化字串的輸出，你可以用類似C語言中printf的語法來呼叫這個函式：console.log(“%s is %d years old.”, “Bob”, 42)。

11、可以在Firebug中除錯程式

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

(1)  F10 進入下一行；

(2)  F8繼續除錯；

(3)  F11進入Javascript中的函式體除錯；

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

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

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

總結

Firefox搭配Firebug在web程式設計中，可謂是“雙劍合壁”，功能強大，本文只是選取了其中的一些技巧予以介紹，更多的請參考Firebug官方網站的介紹。