B.1 概述
Firebug是一個用於網站前端開發的工具，它是Firefox瀏覽器的一個擴展插件。它可以調試JavaScript、查看DOM、分析CSS、監控網絡流量以及進行Ajax交互等。它提供了幾乎前端開發需要的全部功能。官方網站是www.getfirebug.com/。
1．Firebug特色
查看和編輯HTML。
動態修改CSS樣式。
可視化的CSS距離調整。
監控網絡行為。
分析與調試JavaScript。
快速發現錯誤。
查看DOM。
即時執行JavaScript代碼。
記錄JavaScript日誌。
2．如何獲取Firebug
因為它是Firefox瀏覽器的一個擴展插件，所以首先需要下載Firefox瀏覽器，讀者可以訪問www.mozilla.com下載並安裝Firefox瀏覽器。本書以Firefox 11.0為例。在安裝完Firefox瀏覽器之後，用它訪問https://addons.mozilla.org/zh-CN/firefox/addon/1843，進入圖B-1所示的頁面。點擊「添加到Firefox」按鈕，會彈出圖B-2所示的對話框，然後單擊「立即安裝」按鈕，最後重新啟動Firefox瀏覽器即可完成安裝。
圖B-1 Firebug下載
圖B-2 Firebug安裝
B.2 主面板簡介
安裝完成後，在Firefox瀏覽器的地址後方就會有一個小蟲子的圖標
。單擊該圖標後即可展開Firebug的控制台，也可以通過快捷鍵<F12>來打開控制台。如果有多個顯示器或者屏幕比較大，需要Firebug能夠獨立打開一個窗口而不佔用Firefox頁面底部的空間，可以用通過快捷鍵Ctrl+F12來呼出獨立的Firebug窗口。如圖B-3所示。
圖B-3 Firebug面板
從圖B-3中可以看出，Firebug總共包含6個面板，分別是控制台、HTML、CSS、腳本、DOM和網絡。
控制檯面板
用於記錄日誌、概覽、錯誤提示和執行命令行，同時也用於Ajax的調試。
HTML面板
用於查看HTML元素，可以實時地編輯HTML和改變CSS樣式。它包含3個子面板，分別是樣式、佈局和DOM面板。
CSS面板
用於查看所有頁面上的CSS文件，可以動態地修改CSS樣式。由於HTML面板中已經包含了一個CSS面板，因此該面板將很少用到。
腳本面板
用於顯示JavaScript文件及其所在的頁面。也可以用來顯示JavaScript的Debug調試，包含3個子面板，分別是監控、堆棧和斷點。
DOM面板
用於顯示頁面上的所有對象。
網絡面板
用於監視網絡活動。可以幫助查看一個頁面的載入情況，包括文件下載佔用的時間和文件下載出錯等信息，也可以用於監視Ajax行為。
B.2.1 控制檯面板
1．控制檯面板概覽
此面板可以用於記錄日誌，也可以用於輸入腳本的命令行。
2．記錄日誌
Firebug提供如下幾個常用的記錄日誌的函數。
console.log：簡單的記錄日誌。
console.debug：記錄調試信息，並且附上行號的超鏈接。
console.error：在消息前顯示錯誤圖標，並且附上行號的超鏈接。
console.info：在消息前顯示信息圖標，並且附上行號的超鏈接。
console.warn：在消息前顯示警告圖標，並且附上行號的超鏈接。
在空白的html頁面中，向<body>標籤裡加入<script>標籤，代碼如下：
執行代碼後可以在Firebug中看到圖B-4所示的效果。
圖B-4 執行後的效果
以前習慣了使用alert來調試程序，然而在Firebug下可以使用console。
3．格式化字符串輸出和多變量輸出
這個功能類似於C語言中的語法，可以在console記錄日誌的方法裡使用。
%s：字符串。%d, %i：數字。%f：浮點數。%o：鏈接對象。同時，這幾個函數支持多個變量。代碼如下：
運行代碼後，效果如圖B-5所示。
圖B-5 console.log運行效果
Firebug控制台還提供了其他功能，例如檢測函數執行時間、消息分組、測試驅動、跟蹤、計數以及查看JavaScript概況等。更多資料可以訪問網址：http://getfirebug.com/logging。
4．面板內的子菜單
在圖B-5中，在控制檯面板內有一排子菜單，分別是清除、保持、概況、所有等。
「清除」用於清除控制台中的內容。「保持」則是把控制台中的內容保存，即使刷新了還在。「所有」則是顯示全部的信息。後面的「錯誤」，「警告」，「消息」，「調試信息」菜單則是對所有進行了一個分類。
「概況」菜單用於查看函數的性能。通過一個例子來演示這個功能，HTML代碼如下：
打開頁面後，先啟用Firebug控制檯面板，然後單擊「概況」菜單，如圖B-6所示。
圖B-6 單擊「概況」菜單後
從上圖中可以看到，Firebug中出現一行字，即「概況收集中。再次單擊「概況」查看結果。」接著，單擊「執行循環1」按鈕1次，「執行循環2」按鈕2次，「執行循環3」按鈕3次，並再次單擊「概況」菜單，即可看到圖B-7所示的效果。
圖B-7 再次單擊「概況」菜單後
可以看到Firebug顯示出了非常詳細的報告。包括每個函數的函數名、調用次數，佔用時間的百分比、佔用時間、時間、平均時間、最小時間、最大時間以及所在文件的行數等信息。
5．Ajax調試
控制檯面板也可用於Ajax的調試，在一定程度上可以取代網絡面板。這一段涉及Ajax交互，故引入了jQuery庫。同時由於本地環境下Ajax創建的XMLHttpRequest對像無法跨域訪問到網絡的資源，因此需要搭建服務器環境。代碼如下：
直接單擊「進行Ajax傳遞」按鈕，即可在Firebug的控制台中看到本次Ajax的HTTP請求頭信息和服務器響應的頭信息，如圖B-8所示。它會顯示出本次使用Ajax的GET方法、地址、耗時以及調用Ajax請求的代碼行數。最重要的是有4個標籤頁，即參數、頭信息、響應、HTML。第1個標籤用於查看傳遞給服務器的參數；第2個標籤用於查看響應頭信息和請求頭信息；第3個標籤用於查看服務器返回的內容。第4個標籤則是查看服務器返回的HTML結構。進行Ajax交互編程時，以上功能是非常有用的。讀者可以嘗試改變文本框中傳遞的參數，再次單擊「進行Ajax傳遞」按鈕，觀察Firebug中的變化。
如果看不到任何信息出現，可能是將此功能關閉了，可以單擊「控制台」旁邊的下拉箭頭，將「顯示XMLHttpRequests」前面的勾勾選上，如圖B-9所示。
圖B-8 Ajax請求信息
圖B-9 顯示XMLHttpRequests
B.2.2 HTML面板
1．查看和修改HTML代碼
HTML面板的強大之處就是能查看和修改HTML代碼，而且這些代碼都是經過格式化的。編寫如下的代碼來講解該面板。
在Firebug中切換到HTML面板，可以看到圖B-10所示的頁面。
圖B-10 初始化效果
在HTML控制台的左側可以看到整個頁面當前的文檔結構，可以通過單擊「+」來展開。當單擊相應的元素時，右側面板中就會顯示出當前元素的樣式、佈局以及DOM信息。而當光標移動到HTML樹中相應元素上時，上面頁面中相應的元素將會被高亮顯示。例如將光標移動到<form>標籤上時，顯示效果如圖B-11所示。
圖B-11 將光標移動到form元素上後
在頁面中藍色部分表示元素本身，紫色表示padding部分，而黃色表示margin部分。同時可以實時地添加、修改和刪除HTML節點以及屬性，如圖B-12所示。另外，單擊script節點還可以直接查看腳本，此處的腳本無論是內嵌在HTML中還是外部導入的，都可以查看到。同樣這也適用於<style>標籤內嵌或者導入的CSS樣式和動態創建的HTML代碼。
2．查看（Inspect）
利用查看（Inspect）功能，可以快速地尋找到某個元素的HTML結構，如圖B-13所示。
圖B-12 實時編輯HTML元素
圖B-13 查看（Inspect）功能
例如當單擊「Inspect」按鈕後，用鼠標在網頁中選中一個元素時，元素會被一個藍色的框框住，同時下面的HTML面板中相應的HTML樹也會展開並且高亮顯示。再次單擊後即可退出該模式，並且底部的HTML樹也保持在這個狀態。通過這個功能，可以快速尋找頁面內的元素，調試和查找相應代碼非常方便。刷新網頁後，頁面顯示的仍然是用Inspect選中的區域。
HTML面板下方的「編輯」按鈕可以用於直接編輯選中的HTML代碼，而後面顯示的是當前元素在整個DOM中的結構路徑。
3．查看DOM中被腳本更改的部分
通過JavaScript來改變樣式屬性的值可以完成一些動畫效果。例如提供例子中的暗箱操作例子，打開頁面後，可以利用查看（Inspect）功能來選擇相應的HTML代碼。例如選中例子的中間區域，如圖B-14所示。
圖B-14 選擇頁面中的元素
單擊代碼前面的「+」號，可以將代碼展開。展開代碼如圖B-15所示。
當第1次單擊向右的按鈕後，會出現圖B-16所示的效果。
通過上圖可以看出，HTML查看器會將頁面上改變的內容也記錄下來，並以黃色高亮標記。有了這個功能，網頁的暗箱操作將徹底成為歷史。筆者經常利用該功能查看其他網站的動畫效果是如何實現的。
4．查看和修改元素的樣式
在右側的樣式面板中，展示了此元素當前所有的樣式。所有樣式都可以實時地禁用以及修改，如圖B-17所示。通過在「padding:10px 8px」前單擊就可以禁用此規則，通過直接在樣式上value值上單擊就可以修改。
單擊「佈局」面板即可看到此元素具體的佈局屬性，這是一個標準的盒模型。通過「佈局」面板，可以很容易地看到元素的偏移量、外邊距、邊框、內邊距和元素的高度、寬度等信息，如圖B-18所示。
圖B-15 展開的代碼
圖B-16 單擊向右按鈕後
圖B-17 在「樣式」面板中可以禁用、修改和添加樣式
5．查看DOM的信息
單擊「DOM」面板後可以看到此元素的詳細的DOM信息以及函數和事件，如圖B-19所示。
圖B-18 在「佈局」面板中可以查看某元素具體的佈局屬性
圖B-19 在「DOM」面板中可以查看某元素的詳細DOM信息
B.2.3 CSS、DOM和網絡面板
這3個面板相對於前面2個面板比較次要，CSS和DOM面板與HTML面板中右側的面板功能相似，但不如HTML面板靈活，因此一般使用得很少。
CSS面板特有的一個功能就是可以分別詳細查看頁面中內嵌以及動態導入的樣式。例如firebug6.html，可以在Firebug中看到圖B-20所示的效果。
單擊CSS面板後就可以分別查看相應的樣式。此處展示的樣式都是經過格式化的，適合於學習CSS的代碼格式和規範。
而在網絡面板中，相對有一些強大的功能。例如打開Google網站中國首頁，Firebug顯示效果如圖B-21所示。
圖B-20 在CSS面板中選擇樣式
圖B-21 網絡面板概覽
該頁面可以監視每一項元素的加載情況，包括腳本，圖片等的大小以及加載用時等，對於頁面優化有著極其重要的意義。
此外頂部還可以分類查看元素的HTML、CSS、JS等的加載情況，使分析更加靈活。
B.2.4 腳本面板
腳本面板不僅可以查看頁面內的腳本，而且還有強大的調試功能。
圖B-22 腳本面板右側的3個面板
在腳本面板的右側有「監控」、「堆棧」和「斷點」3個面板，利用Firebug提供的設置斷點的功能，可以很方便的調試程序。如圖B-22所示。
1．靜態斷點
例如firebug7.html，其HTML代碼如下：
運行代碼後可以看到圖B-23所示的效果。圖中加粗並有顏色的行號表示此處為JavaScript代碼，可以在此處設置斷點。
圖B-23 腳本面板
比如，我們在第7行這句代碼前面單擊一下，那麼它前面就會出現一個紅褐色的原點，表示此處已經被設置了斷點。此時，在右側斷點面板中的斷點列表中，就出現了剛才設置的斷點。如果想暫時禁用某個斷點，可以在斷點列表中去掉某個斷點前面的復選框裡的鉤，那麼此時左側面板中相應的斷點就從紅褐色變成了紅灰褐色。如圖B-24所示。
圖B-24 設置斷點
設置完斷點後，我們就可以開始調試程序了。單擊頁面中的「Click Me!」按鈕，可以看到腳本停止在用淡黃色底色標出的那一行上。此時用鼠標移動到某個變量上即可顯示此時這個變量的值。顯示效果如圖B-25所示。
此時JavaScript內容上方的
這4個按鈕已經變得可用了。它們分別代表「繼續執行」、「單步進入」、「單步跳過」和「單步退出」。
繼續執行<F8>：當通過斷點來停止執行腳本時，單擊<F8>則會恢復執行腳本。
單步進入<F11>：允許跳到頁面中的其他函數內部。
單步跳過<F10>：單擊<F10>來直接跳過函數的調用即跳到return之後。
單步退出<Shift+F11>：允許恢復腳本的執行，直到下一個斷點為止。
單擊第2個按鈕「單步進入」，代碼會跳到下一行。顯示效果如圖B-26所示。
圖B-25 程序停在斷點上
圖B-26 單步進入
從上圖可以看到，當鼠標移動到變量「lbl」上時，就可以顯示出它的內容是一個DOM元素即「p# messageLabel」。
圖B-27 「監控」面板
此時將右側面板切換到「監控」面板，這裡列出了幾個變量，包括「this」的指向以及「lbl」的變量。單擊「+」就可以看到詳細信息。顯示效果如圖B-27所示。
2．條件斷點
例如firebug8.html，其HTML代碼如下：
在「lbl.innerHTML+=arr+"<br/>"」這行代碼前面的序號上單擊鼠標右鍵，就可以出現設置條件斷點的輸入框。在該框內輸入「arr==5」，然後按回車鍵確認，顯示效果如圖B-28所示。
圖B-28 設置條件斷點
最後單擊頁面中的「Click Me!」按鈕。可以發現，腳本在「arr==5」這個表達式為真時停下了，因此「5」以及之後的數字沒有顯示到頁面中。圖B-29和B-30是正常效果和設置條件斷點後的效果的對比。
圖B-29 正常效果
圖B-30 設置條件斷點後的效果
B.3 一些資源
1．快捷鍵
按<F12>鍵可以快速開啟Firebug，如果想要獲取完整的快捷鍵列表，可以訪問http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts。
2．問題
如果安裝過程中遇到了困難，可以查看Firebug的Q&A，網址為http://getfirebug.com/wiki/index.php/FAQ。
3．Firebug插件
Firebug除了本身強大的功能之外，還有基於Firebug的插件，它們用於擴充Firebug的功能。比如Google公司開發Page Speed插件，開發人員可以使用它來評估他們網頁的性能，並獲得有關如何改進性能的建議。Yahoo公司開發的用於檢測頁面整體性能的YSlow和用於調試PHP的FirePHP。還有用於調試Cookie的Firecookie等。
B.4 總結
通過本節的學習，讀者可以掌握Firebug的基本功能，並且能對以後的學習和工作提供一定的幫助。Firebug已經逐漸成為一個調試平台，而不僅僅是一個簡單的Firefox的擴展插件。