用 Firebug 動态調試和優化應用程式(轉載)

• 【本文章來自developerWorks 中國】

• 簡介： 為何您的 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 應用程式。

編輯活動 Web 頁面的 HTML、CSS 和 JavaScript本文将幫助您熟悉所如下的 Firebug 特性：

• 調試和剖析報告
• 進行日志記錄以測試執行時間
• 使用 Network Monitor 分析 Web 頁面的加載時間
• 錯誤報告

立即開始

Firefox 安裝了此擴充後，重新開機浏覽器。要使用 Firebug：使用 Firefox，下載下傳 Firebug。通過單擊頁面右側的橙色按鈕 Install Firebug 安裝此擴充。

1. 轉到任何一個 Web 頁面并按 F12 在浏覽器視窗打開 Firebug。

2. 按 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。

1. 在 Firebug 視窗，單擊 Inspect。

2. 将滑鼠移到任何一個 HTML 元件之上。這樣就可以在 Firebug 視窗上看到該 HTML 元素（被藍色方框圍繞）和 HTML 源代碼。如圖 3 的示例： 

   圖 3. 在 Firebug 檢查 HTML

   

3. 單擊選中的 HTML 元素。有趣的是這會使此次檢查“鎖定”到所標明的元素。

4. 可以轉到 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 定制特性包括黑名單和白名單以及依據個人需要更改字型大小的功能。

結束語

Firebug 是 Web 開發人員必備的工具。它使測試和調試會話變得更加簡單。Firebug 還是一個優化 CSS 樣式和 Web 頁面外觀的優秀工具。

參考資料

學習

• 您可以參閱本文在 developerWorks 全球站點上的 英文原文 。
• “Ajax 性能分析”（developerWorks，2008 年 5 月 19 日）：讨論如何使用 Firefox 的 Firebug 擴充和 YSlow 插件分析 Web 應用程式。 
• 閱讀以了解針對 Internet Explorer、Opera 和 Safari 的 Firebug Lite。 
• 浏覽 技術書店 獲得關于本文的主題以及其他主題的書籍。 

關于作者

Sami Salkosuo 從 1999 年起一直在 IBM 工作。

他是 Sun 認證的 Java 程式員，IBM 認證的 WebSphere Message

Broker 解決方案開發人員，還是 IBM 認證的 WebSphere MQ 的解決方案設計師。