CONAN ZONE

簡(jiǎn)介

Firebug 是 Mozilla Firefox 瀏覽器的開(kāi)源擴(kuò)展，提供了很多工具，可以監(jiān)視、編輯和調(diào)試任何 Web 站點(diǎn)的級(jí)聯(lián)樣式表（CSS）、HTML、文檔對(duì)象模型（DOM）和 JavaScript。Firebug 包括一個(gè) JavaScript 控制臺(tái)、一個(gè)日志記錄 API 以及一種有用的網(wǎng)絡(luò)監(jiān)視器。借助 Firebug，可以很輕松地調(diào)試和優(yōu)化 Web 和 Ajax 應(yīng)用程序。

本文將幫助您熟悉所如下的 Firebug 特性：

• 編輯活動(dòng) Web 頁(yè)面的 HTML、CSS 和 JavaScript
• 調(diào)試和剖析報(bào)告
• 進(jìn)行日志記錄以測(cè)試執(zhí)行時(shí)間
• 使用 Network Monitor 分析 Web 頁(yè)面的加載時(shí)間
• 錯(cuò)誤報(bào)告

立即開(kāi)始

使用 Firefox，下載 Firebug。通過(guò)單擊頁(yè)面右側(cè)的橙色按鈕 Install Firebug 安裝此擴(kuò)展。

Firefox 安裝了此擴(kuò)展后，重啟瀏覽器。要使用 Firebug：

1. 轉(zhuǎn)到任何一個(gè) Web 頁(yè)面并按 F12 在瀏覽器窗口打開(kāi) Firebug。
2. 按 CTRL-F12 在另一個(gè)窗口打開(kāi) Firebug（如果有兩個(gè)監(jiān)視器，這是一個(gè)很好的特性）。

   本文使用了第一種方法在相同的瀏覽器窗口中打開(kāi) Firebug，如圖 1 所示：

安裝后，F(xiàn)irebug 是禁用的。單擊 Enable Firebug 啟用它，如圖 2 所示：

本文的后面的內(nèi)容將討論 Firebug 的特性。

HTML 和 CSS 工具

HTML 和 CSS 工具包括：HTML 檢查和編輯、CSS 編輯和 CSS 可視化。

檢查和編輯 HTML

可以使用 HTML 檢查特性在源代碼中定位可視 HTML。

1. 在 Firebug 窗口，單擊 Inspect。
2. 將鼠標(biāo)移到任何一個(gè) HTML 組件之上。這樣就可以在 Firebug 窗口上看到該 HTML 元素（被藍(lán)色方框圍繞）和 HTML 源代碼。如圖 3 的示例：
   
   圖 3. 在 Firebug 檢查 HTML
   
   
   
3. 單擊選中的 HTML 元素。有趣的是這會(huì)使此次檢查“鎖定”到所選定的元素。
4. 可以轉(zhuǎn)到 Firebug 窗口并單擊 Edit 編輯選定的元素。

   圖 4 給出了 Firebug 編輯窗口以及瀏覽器窗口中已編輯的文本。“Editing with Firebug” 已經(jīng)代替了原先的 Ajax 標(biāo)題。

   
   
   圖 4. 編輯 HTML
   
   
   

在檢查元素時(shí)，將會(huì)看到 Firebug 窗口內(nèi)的元素嵌套，如圖 5 所示：

編輯 CSS

還可以通過(guò)檢查這個(gè) Web 頁(yè)面進(jìn)行 CSS 編輯。Inspection 視圖會(huì)顯示相關(guān)的 CSS 條目，包括繼承樣式。如圖 6 的示例：

CSS 工具還可用來(lái)編輯 CSS 即時(shí)屬性、禁用屬性、自動(dòng)完成和圖片預(yù)覽，如圖 7 所示：

CSS 的可視化

CSS 的可視化在檢查 HTML（回顧 圖 3 中的藍(lán)色邊框）已經(jīng)展示過(guò)了。Firebug Layout 選項(xiàng)卡顯示了更多的信息，比如間隙、 偏移和其他相關(guān)的量度。圖 8 中的布局窗口則顯示了一個(gè)導(dǎo)航元素的量度：

圖 9 展示了能即時(shí)編輯 CSS 盒的奇妙的 Firebug 特性：

JavaScript 工具

現(xiàn)在，JavaScript 工具是 Web 開(kāi)發(fā)中最有用的工具之一。Firebug 提供了調(diào)試、剖析、日志記錄和命令行控制臺(tái)特性。

調(diào)試和剖析

Firebug JavaScript 工具包括斷點(diǎn)、監(jiān)視表達(dá)式和典型調(diào)試器中常見(jiàn)的其他一些工具。圖 10 展示了斷點(diǎn)和逐步調(diào)試的實(shí)際例子。請(qǐng)注意作為工具提示的主機(jī)變量的值。

有用的調(diào)試工具能：

• 直接導(dǎo)航到 JavaScript 中的特定行
• 監(jiān)視表達(dá)式（可以是任意的 JavaScript 表達(dá)式）
• 以可視格式調(diào)用堆棧
• 條件斷點(diǎn)
• 錯(cuò)誤后進(jìn)行調(diào)試的能力

JavaScript 剖析非常有用。如 Firebug 中的其他特性一樣，剖析也很容易使用。單擊 Console 選項(xiàng)卡上的 Profile 啟動(dòng)剖析器，如圖 11 所示：

剖析開(kāi)始后，可以瀏覽一下此站點(diǎn)。單擊 Profile 獲得剖析報(bào)告，如圖 12 所示：

該報(bào)告顯示了花在函數(shù)上的時(shí)間和平均時(shí)間等等。

JavaScript 日志記錄

對(duì)于更愿意使用老的日志記錄（而非調(diào)試）方式的開(kāi)發(fā)人員，F(xiàn)irebug 提供了日志記錄功能。日志記錄使用的是一種 Firebug JavaScript API。最簡(jiǎn)單的一種日志條目是 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 來(lái)測(cè)量執(zhí)行時(shí)間。在詳細(xì)報(bào)告中顯示結(jié)果的 console.profile() 和 console.profileEnd() （見(jiàn)清單 1）也可用來(lái)測(cè)量執(zhí)行時(shí)間。

圖 13 顯示了這些結(jié)果。JavaScript 控制臺(tái)日志測(cè)試功能被添加到由 Web 服務(wù)器提供服務(wù)的頁(yè)面中。

Console API 內(nèi)其他有用的特性還有堆棧跟蹤、對(duì)象檢查和字符串格式化。

JavaScript 命令行

Firebug 最為強(qiáng)大特性之一就是 JavaScript 命令行。這種命令行的使用方式與其他命令行一樣；它執(zhí)行您編寫(xiě)的所有 JavaScript 代碼，好像它們就是頁(yè)面的一部分一樣。通過(guò)命令行，可以檢查 DOM、獲得屬性等等。所有返回值都顯示在控制臺(tái)上。

命令行具有自動(dòng)完成功能（使用 Tab 鍵）以及完善的文本編輯器（能夠編寫(xiě)完整的函數(shù)而不僅僅是幾行代碼）等等。圖 14 給出了一個(gè)簡(jiǎn)單的控制臺(tái)會(huì)話。請(qǐng)注意 Web 頁(yè)面左上角的徽標(biāo)。這里也可以進(jìn)行即時(shí)編輯。

與控制臺(tái)類(lèi)似，命令行也有一個(gè) API，它包含可用于 Firebug 的特殊函數(shù)，比如 $(id)。該函數(shù)能夠返回帶有給定 id 的元素。

網(wǎng)絡(luò)監(jiān)控

Firebug Network Monitor 特性可用來(lái)監(jiān)視加載 Web 頁(yè)面所花費(fèi)的時(shí)間。使用 Net 選項(xiàng)卡可以看到進(jìn)度欄，該進(jìn)度欄顯示了一個(gè)文件相對(duì)所有其他文件開(kāi)始和停止加載的時(shí)間。Network Monitor 分開(kāi)每個(gè)文件的流量，因此就可以查看加載圖像、JavaScript、HTML 等各占用了多少時(shí)間。此外，還可以查看資源是否從瀏覽器緩存中加載。

對(duì)于本例中的 Ajax 開(kāi)發(fā)，F(xiàn)irebug 在 Net 選項(xiàng)卡和 Console 選項(xiàng)卡中均顯示了每個(gè) XMLHttpRequest。

圖 15 顯示了如何利用 Network Monitor 查看 HTTP 請(qǐng)求和響應(yīng)頭。要查看 HTTP 頭，只需單擊每個(gè)請(qǐng)求左側(cè)的箭頭將其展開(kāi)。全部請(qǐng)求、已用時(shí)間和內(nèi)容的大小均顯示在 Firebug 窗口底部。

其他特性

Firebug 的其他特性包括：

錯(cuò)誤報(bào)告

一旦錯(cuò)誤發(fā)生，F(xiàn)irebug 能夠提供有用的：

• 狀態(tài)欄指示器
• 行號(hào)、文件和堆棧跟蹤
• 調(diào)試器集成
• 搜索和過(guò)濾器

Firebug 還會(huì)顯示只與所查看的頁(yè)面相關(guān)的錯(cuò)誤。

DOM

Document Object Model 是 Web 頁(yè)面中的對(duì)象和函數(shù)的等級(jí)結(jié)構(gòu)。Firebug DOM 包括所有定制的和標(biāo)準(zhǔn)的對(duì)象，而且 DOM explorer 能夠分辨它們。這里同樣可以進(jìn)行 JavaScript 代碼導(dǎo)航、自動(dòng)完成和即時(shí)編輯。

定制

Firebug 定制特性包括黑名單和白名單以及依據(jù)個(gè)人需要更改字體大小的功能。