爲何您的 Web 頁面要花這麼長時間才能加載？您是否也想在瀏覽的同時檢查或編輯 HTML？想馬上調試 CSS？在本文中，瞭解如何使用 Firefox 瀏覽器的免費開源擴展 Firebug，它提供了很多有用的開發特性和工具。 可以使用 Firebug 監視、編輯和調試活動 Web 頁面，包括 HTML、CSS、JavaScript 代碼和網絡流量。此外，學習如何使用 Firebug 加快 Web 和 Ajax 應用程序的調試和優化。
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 所示：
安裝後，Firebug 是禁用的。單擊 Enable Firebug 啓用它，如圖 2 所示：
圖 2. Firebug 顯示了 developerWorks 的首頁
本文的後面的內容將討論 Firebug 的特性。
|
HTML 和 CSS 工具包括：HTML 檢查和編輯、CSS 編輯和 CSS 可視化。
可以使用 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 所示：
還可以通過檢查這個 Web 頁面進行 CSS 編輯。Inspection 視圖會顯示相關的 CSS 條目，包括繼承樣式。如圖 6 的示例：
CSS 工具還可用來編輯 CSS 即時屬性、禁用屬性、自動完成和圖片預覽，如圖 7 所示：
CSS 的可視化在檢查 HTML（回顧 圖 3 中的藍色邊框）已經展示過了。Firebug Layout 選項卡顯示了更多的信息，比如間隙、 偏移和其他相關的量度。圖 8 中的佈局窗口則顯示了一個導航元素的量度：
圖 9 展示了能即時編輯 CSS 盒的奇妙的 Firebug 特性：
|
現在，JavaScript 工具是 Web 開發中最有用的工具之一。Firebug 提供了調試、剖析、日誌記錄和命令行控制檯特性。
Firebug JavaScript 工具包括斷點、監視表達式和典型調試器中常見的其他一些工具。圖 10 展示了斷點和逐步調試的實際例子。請注意作爲工具提示的主機變量的值。
有用的調試工具能：
- 直接導航到 JavaScript 中的特定行
- 監視表達式（可以是任意的 JavaScript 表達式）
- 以可視格式調用堆棧
- 條件斷點
- 錯誤後進行調試的能力
JavaScript 剖析非常有用。如 Firebug 中的其他特性一樣，剖析也很容易使用。單擊 Console 選項卡上的 Profile 啓動剖析器，如圖 11 所示：
剖析開始後，可以瀏覽一下此站點。單擊 Profile 獲得剖析報告，如圖 12 所示：
該報告顯示了花在函數上的時間和平均時間等等。
對於更願意使用老的日誌記錄（而非調試）方式的開發人員，Firebug 提供了日誌記錄功能。日誌記錄使用的是一種 Firebug JavaScript API。最簡單的一種日誌條目是 console.log("logging");。
Console API 包含其他一些功能，如清單 1 所示：
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 服務器提供服務的頁面中。
Console API 內其他有用的特性還有堆棧跟蹤、對象檢查和字符串格式化。
Firebug 最爲強大特性之一就是 JavaScript 命令行。這種命令行的使用方式與其他命令行一樣；它執行您編寫的所有 JavaScript 代碼，好像它們就是頁面的一部分一樣。通過命令行，可以檢查 DOM、獲得屬性等等。所有返回值都顯示在控制檯上。
命令行具有自動完成功能（使用 Tab 鍵）以及完善的文本編輯器（能夠編寫完整的函數而不僅僅是幾行代碼）等等。圖 14 給出了一個簡單的控制檯會話。請注意 Web 頁面左上角的徽標。這裏也可以進行即時編輯。
與控制檯類似，命令行也有一個 API，它包含可用於 Firebug 的特殊函數，比如 $(id)。該函數能夠返回帶有給定 id 的元素。
|
Firebug Network Monitor 特性可用來監視加載 Web 頁面所花費的時間。使用 Net 選項卡可以看到進度欄，該進度欄顯示了一個文件相對所有其他文件開始和停止加載的時間。Network Monitor 分開每個文件的流量，因此就可以查看加載圖像、JavaScript、HTML 等各佔用了多少時間。此外，還可以查看資源是否從瀏覽器緩存中加載。
對於本例中的 Ajax 開發，Firebug 在 Net 選項卡和 Console 選項卡中均顯示了每個 XMLHttpRequest。
圖 15 顯示瞭如何利用 Network Monitor 查看 HTTP 請求和響應頭。要查看 HTTP 頭，只需單擊每個請求左側的箭頭將其展開。全部請求、已用時間和內容的大小均顯示在 Firebug 窗口底部。
|
Firebug 的其他特性包括：
一旦錯誤發生，Firebug 能夠提供有用的：
- 狀態欄指示器
- 行號、文件和堆棧跟蹤
- 調試器集成
- 搜索和過濾器
Firebug 還會顯示只與所查看的頁面相關的錯誤。
Document Object Model 是 Web 頁面中的對象和函數的等級結構。Firebug DOM 包括所有定製的和標準的對象，而且 DOM explorer 能夠分辨它們。這裏同樣可以進行 JavaScript 代碼導航、自動完成和即時編輯。
Firebug 定製特性包括黑名單和白名單以及依據個人需要更改字體大小的功能。
|
Firebug 是 Web 開發人員必備的工具。它使測試和調試會話變得更加簡單。Firebug 還是一個優化 CSS 樣式和 Web 頁面外觀的優秀工具。