簡介
Firebug 是 Mozilla Firefox 瀏覽器的開源擴展，提供了很多工具，可以監視、編輯和調試任何 Web 站點的級聯樣式表（CSS）、HTML、文檔對象模型（DOM）和 JavaScript。Firebug 包括一個 JavaScript 控制臺、一個日志記錄 API 以及一種有用的網絡監視器。借助 Firebug，可以很輕松地調試和優化 Web 和 Ajax 應用程序。
本文將幫助您熟悉所如下的 Firebug 特性：
- 編輯活動 Web 頁面的 HTML、CSS 和 JavaScript
- 調試和剖析報告
- 進行日志記錄以測試執行時間
- 使用 Network Monitor 分析 Web 頁面的加載時間
- 錯誤報告
立即開始
使用 Firefox，下載 Firebug。通過單擊頁面右側的橙色按鈕 Install Firebug 安裝此擴展。
Firefox 安裝了此擴展后，重啟瀏覽器。要使用 Firebug：
- 轉到任何一個 Web 頁面并按 F12 在瀏覽器窗口打開 Firebug。
- 按 CTRL-F12 在另一個窗口打開 Firebug（如果有兩個監視器，這是一個很好的特性）。
本文使用了第一種方法在相同的瀏覽器窗口中打開 Firebug，如圖 1 所示：
圖 1. 安裝后的 Firebug
安裝后，Firebug 是禁用的。單擊 Enable Firebug 啟用它，如圖 2 所示：
圖 2. Firebug 顯示了 developerWorks 的首頁
本文的后面的內容將討論 Firebug 的特性。
HTML 和 CSS 工具
HTML 和 CSS 工具包括：HTML 檢查和編輯、CSS 編輯和 CSS 可視化。
檢查和編輯 HTML
可以使用 HTML 檢查特性在源代碼中定位可視 HTML。
- 在 Firebug 窗口，單擊 Inspect。
- 將鼠標移到任何一個 HTML 組件之上。這樣就可以在 Firebug 窗口上看到該 HTML 元素（被藍色方框圍繞）和 HTML 源代碼。如圖 3 的示例：
圖 3. 在 Firebug 檢查 HTML
- 單擊選中的 HTML 元素。有趣的是這會使此次檢查“鎖定”到所選定的元素。
- 可以轉到 Firebug 窗口并單擊 Edit 編輯選定的元素。
圖 4 給出了 Firebug 編輯窗口以及瀏覽器窗口中已編輯的文本。“Editing with Firebug” 已經代替了原先的 Ajax 標題。
圖 4. 編輯 HTML
在檢查元素時，將會看到 Firebug 窗口內的元素嵌套，如圖 5 所示：
圖 5. 元素嵌套
編輯 CSS
還可以通過檢查這個 Web 頁面進行 CSS 編輯。Inspection 視圖會顯示相關的 CSS 條目，包括繼承樣式。如圖 6 的示例：
圖 6. CSS 檢查
CSS 工具還可用來編輯 CSS 即時屬性、禁用屬性、自動完成和圖片預覽，如圖 7 所示：
圖 7. CSS 圖片預覽
CSS 的可視化
CSS 的可視化在檢查 HTML（回顧 圖 3 中的藍色邊框）已經展示過了。Firebug Layout 選項卡顯示了更多的信息，比如間隙、 偏移和其他相關的量度。圖 8 中的布局窗口則顯示了一個導航元素的量度：
圖 8. CSS 盒的量度
圖 9 展示了能即時編輯 CSS 盒的奇妙的 Firebug 特性：
圖 9. CSS 盒編輯
JavaScript 工具
現在，JavaScript 工具是 Web 開發中最有用的工具之一。Firebug 提供了調試、剖析、日志記錄和命令行控制臺特性。
調試和剖析
Firebug JavaScript 工具包括斷點、監視表達式和典型調試器中常見的其他一些工具。圖 10 展示了斷點和逐步調試的實際例子。請注意作為工具提示的主機變量的值。
圖 10. JavaScript 調試器
有用的調試工具能：
- 直接導航到 JavaScript 中的特定行
- 監視表達式（可以是任意的 JavaScript 表達式）
- 以可視格式調用堆棧
- 條件斷點
- 錯誤后進行調試的能力
JavaScript 剖析非常有用。如 Firebug 中的其他特性一樣，剖析也很容易使用。單擊 Console 選項卡上的 Profile 啟動剖析器，如圖 11 所示：
圖 11. 啟動 JavaScript 剖析器
剖析開始后，可以瀏覽一下此站點。單擊 Profile 獲得剖析報告，如圖 12 所示：
圖 12. JavaScript 剖析器報告
該報告顯示了花在函數上的時間和平均時間等等。
JavaScript 日志記錄
對于更愿意使用老的日志記錄（而非調試）方式的開發人員，Firebug 提供了日志記錄功能。日志記錄使用的是一種 Firebug JavaScript API。最簡單的一種日志條目是 console.log("logging");。
Console API 包含其他一些功能，如清單 1 所示：
清單 1. Firebug Console API 示例
console.time("test timer");
console.log("Hello from ",document.title);
console.info("This is info");
console.warn("This is warning");
console.error("This is error");
console.timeEnd("test timer");
|
可以使用 console.time 和 console.timeEnd 來測量執行時間。在詳細報告中顯示結果的 console.profile() 和 console.profileEnd() （見清單 1）也可用來測量執行時間。
圖 13 顯示了這些結果。JavaScript 控制臺日志測試功能被添加到由 Web 服務器提供服務的頁面中。
圖 13. Console 日志
Console API 內其他有用的特性還有堆棧跟蹤、對象檢查和字符串格式化。
JavaScript 命令行
Firebug 最為強大特性之一就是 JavaScript 命令行。這種命令行的使用方式與其他命令行一樣；它執行您編寫的所有 JavaScript 代碼，好像它們就是頁面的一部分一樣。通過命令行，可以檢查 DOM、獲得屬性等等。所有返回值都顯示在控制臺上。
命令行具有自動完成功能（使用 Tab 鍵）以及完善的文本編輯器（能夠編寫完整的函數而不僅僅是幾行代碼）等等。圖 14 給出了一個簡單的控制臺會話。請注意 Web 頁面左上角的徽標。這里也可以進行即時編輯。
圖 14. 命令行 JavaScript
與控制臺類似，命令行也有一個 API，它包含可用于 Firebug 的特殊函數，比如 $(id)。該函數能夠返回帶有給定 id 的元素。
網絡監控
Firebug Network Monitor 特性可用來監視加載 Web 頁面所花費的時間。使用 Net 選項卡可以看到進度欄，該進度欄顯示了一個文件相對所有其他文件開始和停止加載的時間。Network Monitor 分開每個文件的流量，因此就可以查看加載圖像、JavaScript、HTML 等各占用了多少時間。此外，還可以查看資源是否從瀏覽器緩存中加載。
對于本例中的 Ajax 開發，Firebug 在 Net 選項卡和 Console 選項卡中均顯示了每個 XMLHttpRequest。
圖 15 顯示了如何利用 Network Monitor 查看 HTTP 請求和響應頭。要查看 HTTP 頭，只需單擊每個請求左側的箭頭將其展開。全部請求、已用時間和內容的大小均顯示在 Firebug 窗口底部。
圖 15. Network Monitor
其他特性
Firebug 的其他特性包括：
錯誤報告
一旦錯誤發生，Firebug 能夠提供有用的：
- 狀態欄指示器
- 行號、文件和堆棧跟蹤
- 調試器集成
- 搜索和過濾器
Firebug 還會顯示只與所查看的頁面相關的錯誤。
DOM
Document Object Model 是 Web 頁面中的對象和函數的等級結構。Firebug DOM 包括所有定制的和標準的對象，而且 DOM explorer 能夠分辨它們。這里同樣可以進行 JavaScript 代碼導航、自動完成和即時編輯。
定制
Firebug 定制特性包括黑名單和白名單以及依據個人需要更改字體大小的功能。