為何您的 Web 頁(yè)面要花這么長(zhǎng)時(shí)間才能加載？您是否也想在瀏覽的同時(shí)檢查或編輯 HTML？想馬上調(diào)試 CSS？在本文中，了解如何使用 Firefox 瀏覽器的免費(fèi)開(kāi)源擴(kuò)展 Firebug，它提供了很多有用的開(kāi)發(fā)特性和工具。 可以使用 Firebug 監(jiān)視、編輯和調(diào)試活動(dòng) Web 頁(yè)面，包括 HTML、CSS、JavaScript 代碼和網(wǎng)絡(luò)流量。此外，學(xué)習(xí)如何使用 Firebug 加快 Web 和 Ajax 應(yīng)用程序的調(diào)試和優(yōu)化。<!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->
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)告
|
|
|
|
|
|
使用 Firefox， 下載 Firebug 。通過(guò)單擊頁(yè)面右側(cè)的橙色按鈕 Install Firebug 安裝此擴(kuò)展。
Firefox 安裝了此擴(kuò)展后，重啟瀏覽器。要使用 Firebug：
- 轉(zhuǎn)到任何一個(gè) Web 頁(yè)面并按 F12 在瀏覽器窗口打開(kāi) Firebug。
-
按
CTRL-F12
在另一個(gè)窗口打開(kāi) Firebug（如果有兩個(gè)監(jiān)視器，這是一個(gè)很好的特性）。
本文使用了第一種方法在相同的瀏覽器窗口中打開(kāi) Firebug，如圖 1 所示：
安裝后，F(xiàn)irebug 是禁用的。單擊 Enable Firebug 啟用它，如圖 2 所示：
圖 2. Firebug 顯示了 developerWorks 的首頁(yè)
本文的后面的內(nèi)容將討論 Firebug 的特性。
|
|
|
HTML 和 CSS 工具包括：HTML 檢查和編輯、CSS 編輯和 CSS 可視化。
可以使用 HTML 檢查特性在源代碼中定位可視 HTML。
- 在 Firebug 窗口，單擊 Inspect 。
-
將鼠標(biāo)移到任何一個(gè) HTML 組件之上。這樣就可以在 Firebug 窗口上看到該 HTML 元素（被藍(lán)色方框圍繞）和 HTML 源代碼。如圖 3 的示例：
圖 3. 在 Firebug 檢查 HTML
- 單擊選中的 HTML 元素。有趣的是這會(huì)使此次檢查“鎖定”到所選定的元素。
-
可以轉(zhuǎn)到 Firebug 窗口并單擊
Edit
編輯選定的元素。
圖 4 給出了 Firebug 編輯窗口以及瀏覽器窗口中已編輯的文本。“Editing with Firebug” 已經(jīng)代替了原先的 Ajax 標(biāo)題。
圖 4. 編輯 HTML
在檢查元素時(shí)，將會(huì)看到 Firebug 窗口內(nèi)的元素嵌套，如圖 5 所示：
還可以通過(guò)檢查這個(gè) Web 頁(yè)面進(jìn)行 CSS 編輯。Inspection 視圖會(huì)顯示相關(guān)的 CSS 條目，包括繼承樣式。如圖 6 的示例：
CSS 工具還可用來(lái)編輯 CSS 即時(shí)屬性、禁用屬性、自動(dòng)完成和圖片預(yù)覽，如圖 7 所示：
CSS 的可視化在檢查 HTML（回顧 圖 3 中的藍(lán)色邊框）已經(jīng)展示過(guò)了。Firebug Layout 選項(xiàng)卡顯示了更多的信息，比如間隙、 偏移和其他相關(guān)的量度。圖 8 中的布局窗口則顯示了一個(gè)導(dǎo)航元素的量度：
圖 9 展示了能即時(shí)編輯 CSS 盒的奇妙的 Firebug 特性：
|
|
|
現(xiàn)在，JavaScript 工具是 Web 開(kāi)發(fā)中最有用的工具之一。Firebug 提供了調(diào)試、剖析、日志記錄和命令行控制臺(tái)特性。
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í)間等等。
對(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ì)象檢查和字符串格式化。
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)類似，命令行也有一個(gè) API，它包含可用于 Firebug 的特殊函數(shù)，比如 $(id) 。該函數(shù)能夠返回帶有給定 id 的元素。
|
|
|
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ò)誤發(fā)生，F(xiàn)irebug 能夠提供有用的：
- 狀態(tài)欄指示器
- 行號(hào)、文件和堆棧跟蹤
- 調(diào)試器集成
- 搜索和過(guò)濾器
Firebug 還會(huì)顯示只與所查看的頁(yè)面相關(guān)的錯(cuò)誤。
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è)人需要更改字體大小的功能。
|
|
|
Firebug 是 Web 開(kāi)發(fā)人員必備的工具。它使測(cè)試和調(diào)試會(huì)話變得更加簡(jiǎn)單。Firebug 還是一個(gè)優(yōu)化 CSS 樣式和 Web 頁(yè)面外觀的優(yōu)秀工具。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
