相信很多從事Web開(kāi)發(fā)工作的開(kāi)發(fā)者都聽(tīng)說(shuō)和使用過(guò)Firebug，但可能大部分人還不知道，其實(shí)它是一個(gè)在網(wǎng)頁(yè)設(shè)計(jì)方面功能相當(dāng)強(qiáng)大的編輯器，它可以對(duì)HTML、DOM、CSS、HTTP和Javascript進(jìn)行全面的跟蹤和調(diào)試。它是Firefox瀏覽器的一個(gè)插件，所以建議各位Web開(kāi)發(fā)者，要充分利用FireFox瀏覽器和Firebug插件進(jìn)行日常的調(diào)試工作。本文選取了12個(gè)Web開(kāi)發(fā)者應(yīng)該掌握的Firebug的初級(jí)使用技巧，介紹給大家。

專(zhuān)業(yè)成都網(wǎng)站建設(shè)公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來(lái)客戶(hù)和效益!創(chuàng)新互聯(lián)公司為您提供成都網(wǎng)站建設(shè)，五站合一網(wǎng)站設(shè)計(jì)制作，服務(wù)好的網(wǎng)站設(shè)計(jì)公司，成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)負(fù)責(zé)任的成都網(wǎng)站制作公司!

1、使用Firebug可以找到頁(yè)面中的任何內(nèi)容

不知道各位有無(wú)遇到過(guò)這樣的情況，在一個(gè)復(fù)雜的HTML頁(yè)面中，當(dāng)你想找某個(gè)頁(yè)面元素的實(shí)際對(duì)應(yīng)的HTML時(shí)，你不得不在一大堆HTML代碼中去查找，十分麻煩。有了Firebug，現(xiàn)在你只需要在頁(yè)面中，用鼠標(biāo)右鍵選中某個(gè)元素，然后在彈出的菜單中，選擇“查看元素”，馬上就會(huì)在HTML頁(yè)面代碼中找到該元素對(duì)應(yīng)的代碼了，十分方便，如下圖所示：

同樣，也提供了更快速的方法：只需要點(diǎn)Firebug插件左上方的箭頭，如下圖所示，則每當(dāng)鼠標(biāo)在頁(yè)面中移動(dòng)時(shí)，在Firebug控制臺(tái)中就馬上顯示移動(dòng)時(shí)經(jīng)過(guò)的HTML元素的代碼：

2、可以使用Firebug修改HTML和CSS

通過(guò)Firebug，可以直接修改HTML，增加HTML的屬性，刪除元素，增加CSS樣式及實(shí)現(xiàn)更多功能，如下圖：

在上圖的菜單中可以清楚看到，你可以對(duì)HTML元素進(jìn)行各樣的修改操作，方法是先點(diǎn)擊HTML部分的代碼，然后鼠標(biāo)右鍵即可在彈出的菜單中進(jìn)行操作。

3、可以通過(guò)Firebug查看DOM元素和對(duì)XML進(jìn)行操作

當(dāng)打開(kāi)一個(gè)HTML頁(yè)通過(guò)Firebug查看HTML代碼時(shí)，你可以同時(shí)點(diǎn)在控制面板中的DOM樹(shù)，就會(huì)以DOM的樹(shù)型結(jié)構(gòu)方式看到整個(gè)HTML的結(jié)構(gòu)。而如果你是打開(kāi)了一個(gè)XML文件，那么鼠標(biāo)右鍵點(diǎn)XML文件中的任何一個(gè)元素，在彈出的菜單中同樣可以選擇對(duì)XML進(jìn)行相關(guān)操作，如下圖：

4、使用Firebug調(diào)試Javascript代碼

在Firebug控制臺(tái)中，如果要執(zhí)行調(diào)試Javascript代碼，只需要首先將Script控制面版啟動(dòng)，然后在點(diǎn)擊Console按鈕，在下拉菜單中選擇顯示Javascipt及HTML錯(cuò)誤(還可以讓用戶(hù)選擇顯示更多的錯(cuò)誤)，接著在底部會(huì)發(fā)現(xiàn)出現(xiàn)>>>的箭頭，在這里，你可以輸入Javascipt代碼，輸入后，馬上按回車(chē)鍵，就可以執(zhí)行了，十分方便，如下圖：

一個(gè)小技巧是，在輸入Javascipt的時(shí)候，還支持使用tab鍵的自動(dòng)完成提醒功能，比如對(duì)于一個(gè)很長(zhǎng)的Javascipt函數(shù)，在沒(méi)輸入完的時(shí)候只要按tab鍵firebug就會(huì)幫助你自動(dòng)補(bǔ)充完整。

5、多次加載頁(yè)面后Firebug會(huì)記得加載前的位置

無(wú)論你重復(fù)加載多少次頁(yè)面，F(xiàn)irebug在每次加載頁(yè)面后總會(huì)自己記得加載前頁(yè)面所在的位置(比如你已經(jīng)在瀏覽頁(yè)面的底部，此時(shí)再加載頁(yè)面，則新的頁(yè)面加載后，依然把你帶到頁(yè)面底部)。

#p#

6、使用$標(biāo)記去方便訪(fǎng)問(wèn)變量

在上面的第4點(diǎn)中，我們提到了在>>>這個(gè)命令行下可以進(jìn)行Javascript的調(diào)試，而另外一個(gè)技巧是可以使用如$1去訪(fǎng)問(wèn)曾經(jīng)訪(fǎng)問(wèn)過(guò)的變量中的最后一個(gè)，如此類(lèi)推，可以使用$2訪(fǎng)問(wèn)曾經(jīng)訪(fǎng)問(wèn)過(guò)的變量中的倒數(shù)第二個(gè)。如下圖：

7、Firebug會(huì)高亮度顯示修改過(guò)的內(nèi)容

在Firebug中，只要你修改過(guò)頁(yè)面中的內(nèi)容，就會(huì)以黃色高亮度顯示曾經(jīng)修改過(guò)的內(nèi)容，如下圖：

8、監(jiān)視Javascript的運(yùn)行性能

在Firebug中，你可以點(diǎn)控制臺(tái)中的“profile(概況)”選項(xiàng)，這將開(kāi)啟Firebug的性能監(jiān)視功能，之后你可以進(jìn)行頁(yè)面的一系列操作，當(dāng)再次點(diǎn)profile按鈕后，將停止對(duì)性能的監(jiān)測(cè)活動(dòng)，接著Firebug會(huì)顯示一個(gè)列表，其中會(huì)清楚列明操作過(guò)程中所涉及的函數(shù)，調(diào)用次數(shù)，占用時(shí)間、平均時(shí)間，最小時(shí)間，最大時(shí)間等，如下圖所示：

9、Firebug強(qiáng)大的網(wǎng)絡(luò)數(shù)據(jù)監(jiān)視功能

Firebug還提供了十分功能強(qiáng)大的網(wǎng)絡(luò)數(shù)據(jù)監(jiān)功能。開(kāi)發(fā)者在開(kāi)發(fā)web應(yīng)用時(shí)，經(jīng)常要觀察各類(lèi)HTTP請(qǐng)求和回應(yīng)，在這方面Firebug的功能十分強(qiáng)大。首先，只需要開(kāi)啟控制面板中的網(wǎng)絡(luò)功能，然后在每次運(yùn)行頁(yè)面時(shí)，都可以清楚看到每個(gè)HTTP的請(qǐng)求和HTTP回應(yīng)的具體細(xì)節(jié)。如下圖：

 在上圖中，只要點(diǎn)每一個(gè)請(qǐng)求旁邊的+號(hào)，就可以看到該請(qǐng)求的具體細(xì)節(jié)，如下圖：

可以看到，能看到HTTP的頭部的各種信息。同樣，如果要看當(dāng)前頁(yè)面中的比如圖片，F(xiàn)LASH等元素的信息等，也可以通過(guò)上圖去點(diǎn)不同的選項(xiàng)卡去篩選查看，十分方便。

10、使用Firebug的Log功能

在設(shè)計(jì)頁(yè)面時(shí)，經(jīng)常要記錄下頁(yè)面的一些信息，這個(gè)時(shí)候，可以使用Firebug中的log日志功能，把一些信息輸出到firebug的控制臺(tái)中，這樣就方便調(diào)試了。Firebug提供了一個(gè)console對(duì)象，在插件加載的時(shí)候就注冊(cè)到Javascript的運(yùn)行環(huán)境中去了，可以在程序中直接使用。console對(duì)象提供了一個(gè)log方法，舉例說(shuō)明如下：

在Firefox中執(zhí)行如下代碼，會(huì)看到Firebug的控制臺(tái)中出現(xiàn)如下信息：

可以看到，各個(gè)級(jí)別的日志輸出，都帶有一個(gè)彩色的圖標(biāo)，能給用戶(hù)很醒目的提醒。同時(shí)，console.log 還支持格式化字符串的輸出，你可以用類(lèi)似C語(yǔ)言中printf的語(yǔ)法來(lái)調(diào)用這個(gè)函數(shù)：console.log(“%s is %d years old.”, “Bob”, 42)。

11、可以在Firebug中調(diào)試程序

在Firebug控制臺(tái)的的Javascript控制面板中，可以對(duì)頁(yè)面中的Javascript進(jìn)行調(diào)試，方法很簡(jiǎn)單，只需要在要調(diào)試的行的左邊單擊，就會(huì)出現(xiàn)斷點(diǎn)了，之后請(qǐng)記住下面常件的快捷鍵：

(1) F10 進(jìn)入下一行;

(2) F8繼續(xù)調(diào)試;

(3) F11進(jìn)入Javascript中的函數(shù)體調(diào)試;

(4) Shift+F11跳出函數(shù)體。

12、在Firebug中可以設(shè)置帶條件的斷點(diǎn)

在Firebug中，還可以設(shè)置帶條件判斷的斷點(diǎn)，如下圖：

FireBug

Firebug 是網(wǎng)頁(yè)瀏覽器 Mozilla Firefox 下的一款開(kāi)發(fā)類(lèi)插件，現(xiàn)屬于Firefox的五星級(jí)強(qiáng)力推薦插件之一。它集HTML查看和編輯、Javascript控制臺(tái)、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開(kāi)發(fā)JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個(gè)不同的角度剖析Web頁(yè)面內(nèi)部的細(xì)節(jié)層面，給Web開(kāi)發(fā)者帶來(lái)很大的便利。例如 Yahoo! 的網(wǎng)頁(yè)速度優(yōu)化建議工具 YSlow。
Firebug 也是一個(gè)除錯(cuò)工具。用戶(hù)可以利用它除錯(cuò)、編輯、甚至刪改任何網(wǎng)站的 CSS、HTML、DOM、與 JavaScript 代碼。

原文鏈接：http://tech.it168.com/a2011/0217/1158/000001158261_all.shtml

【編輯推薦】

1. 2011 Web設(shè)計(jì)的10大趨勢(shì)
2. Web開(kāi)發(fā)者愛(ài)不釋手的18款超贊jQuery插件
3. 淺談Web標(biāo)準(zhǔn)、可用性、可訪(fǎng)問(wèn)性
4. Web開(kāi)發(fā)者欣喜若狂的40個(gè)UI設(shè)計(jì)工具和資源
5. 是什么讓一個(gè)Web應(yīng)用程序變得如此偉大？

網(wǎng)頁(yè)標(biāo)題：Web開(kāi)發(fā)者可能不知道的12個(gè)Firebug技巧
URL鏈接：http://uogjgqi.cn/article/dhsecpp.html