Web開發(fā)者應(yīng)該掌握的12個Firebug技巧
絕大多數(shù)從事Web開發(fā)工作的開發(fā)者都聽說和使用過Firebug，但可能大部分人還不知道，其實(shí)它是一個在網(wǎng)頁設(shè)計(jì)方面功能相當(dāng)強(qiáng)大的編輯器，它可以對HTML、DOM、CSS、HTTP和Javascript進(jìn)行全面的跟蹤和調(diào)試。它是Firefox瀏覽器的一個插件，所以建議各位Web開發(fā)者，要充分利用FireFox瀏覽器和Firebug插件進(jìn)行日常的調(diào)試工作。下面我給大家介紹Web開發(fā)者應(yīng)該掌握的初級使用技巧。
1、使用Firebug可以找到頁面中的任何內(nèi)容
不知道各位有無遇到過這樣的情況，在一個復(fù)雜的HTML頁面中，當(dāng)你想找某個頁面元素的實(shí)際對應(yīng)的HTML時，你不得不在一大堆HTML代碼中去查找，十分麻煩。有了Firebug，現(xiàn)在你只需要在頁面中，用鼠標(biāo)右鍵選中某個元素，然后在彈出的菜單中，選擇“查看元素”，馬上就會在HTML頁面代碼中找到該元素對應(yīng)的代碼了，十分方便，如下圖所示：
同樣，也提供了更快速的方法：只需要點(diǎn)Firebug插件左上方的箭頭，如下圖所示，則每當(dāng)鼠標(biāo)在頁面中移動時，在Firebug控制臺中就馬上顯示移動時經(jīng)過的HTML元素的代碼：
2、可以使用Firebug修改HTML和CSS
通過Firebug，可以直接修改HTML，增加HTML的屬性，刪除元素，增加CSS樣式及實(shí)現(xiàn)更多功能，如下圖：
在上圖的菜單中可以清楚看到，你可以對HTML元素進(jìn)行各樣的修改操作，方法是先點(diǎn)擊HTML部分的代碼，然后鼠標(biāo)右鍵即可在彈出的菜單中進(jìn)行操作。
3、可以通過Firebug查看DOM元素和對XML進(jìn)行操作
當(dāng)打開一個HTML頁通過Firebug查看HTML代碼時，你可以同時點(diǎn)在控制面板中的DOM樹，就會以DOM的樹型結(jié)構(gòu)方式看到整個HTML的結(jié)構(gòu)。而如果你是打開了一個XML文件，那么鼠標(biāo)右鍵點(diǎn)XML文件中的任何一個元素，在彈出的菜單中同樣可以選擇對XML進(jìn)行相關(guān)操作，如下圖：
4、使用Firebug調(diào)試Javascript代碼
在Firebug控制臺中，如果要執(zhí)行調(diào)試Javascript代碼，只需要首先將Script控制面版啟動，然后在點(diǎn)擊Console按鈕，在下拉菜單中選擇顯示Javascipt及HTML錯誤(還可以讓用戶選擇顯示更多的錯誤)，接著在底部會發(fā)現(xiàn)出現(xiàn)>>>的箭頭，在這里，你可以輸入Javascipt代碼，輸入后，馬上按回車鍵，就可以執(zhí)行了，十分方便，如下圖：
一個小技巧是，在輸入Javascipt的時候，還支持使用tab鍵的自動完成提醒功能，比如對于一個很長的Javascipt函數(shù)，在沒輸入完的時候只要按tab鍵firebug就會幫助你自動補(bǔ)充完整。 5、多次加載頁面后Firebug會記得加載前的位置
無論你重復(fù)加載多少次頁面，F(xiàn)irebug在每次加載頁面后總會自己記得加載前頁面所在的位置(比如你已經(jīng)在瀏覽頁面的底部，此時再加載頁面，則新的頁面加載后，依然把你帶到頁面底部)。
6、使用$標(biāo)記去方便訪問變量
在上面的第4點(diǎn)中，我們提到了在>>>這個命令行下可以進(jìn)行Javascript的調(diào)試，而另外一個技巧是可以使用如$1去訪問曾經(jīng)訪問過的變量中的最后一個，如此類推，可以使用$2訪問曾經(jīng)訪問過的變量中的倒數(shù)第二個。如下圖：
7、Firebug會高亮度顯示修改過的內(nèi)容
在Firebug中，只要你修改過頁面中的內(nèi)容，就會以黃色高亮度顯示曾經(jīng)修改過的內(nèi)容，如下圖：
8、監(jiān)視Javascript的運(yùn)行性能
在Firebug中，你可以點(diǎn)控制臺中的“profile(概況)”選項(xiàng)，這將開啟Firebug的性能監(jiān)視功能，之后你可以進(jìn)行頁面的一系列操作，當(dāng)再次點(diǎn)profile按鈕后，將停止對性能的監(jiān)測活動，接著Firebug會顯示一個列表，其中會清楚列明操作過程中所涉及的函數(shù)，調(diào)用次數(shù)，占用時間、平均時間，最小時間，最大時間等，如下圖所示：
9、Firebug強(qiáng)大的網(wǎng)絡(luò)數(shù)據(jù)監(jiān)視功能
Firebug還提供了十分功能強(qiáng)大的網(wǎng)絡(luò)數(shù)據(jù)監(jiān)功能。開發(fā)者在開發(fā)web應(yīng)用時，經(jīng)常要觀察各類HTTP請求和回應(yīng)，在這方面Firebug的功能十分強(qiáng)大。首先，只需要開啟控制面板中的網(wǎng)絡(luò)功能，然后在每次運(yùn)行頁面時，都可以清楚看到每個HTTP的請求和HTTP回應(yīng)的具體細(xì)節(jié)。如下圖：
在上圖中，只要點(diǎn)每一個請求旁邊的+號，就可以看到該請求的具體細(xì)節(jié)，如下圖：
可以看到，能看到HTTP的頭部的各種信息。同樣，如果要看當(dāng)前頁面中的比如圖片，F(xiàn)LASH等元素的信息等，也可以通過上圖去點(diǎn)不同的選項(xiàng)卡去篩選查看，十分方便。
10、使用Firebug的Log功能
在設(shè)計(jì)頁面時，經(jīng)常要記錄下頁面的一些信息，這個時候，可以使用Firebug中的log日志功能，把一些信息輸出到firebug的控制臺中，這樣就方便調(diào)試了。Firebug提供了一個console對象，在插件加載的時候就注冊到Javascript的運(yùn)行環(huán)境中去了，可以在程序中直接使用。console對象提供了一個log方法，舉例說明如下：
在Firefox中執(zhí)行如下代碼，會看到Firebug的控制臺中出現(xiàn)如下信息：
可以看到，各個級別的日志輸出，都帶有一個彩色的圖標(biāo)，能給用戶很醒目的提醒。同時，console.log 還支持格式化字符串的輸出，你可以用類似C語言中printf的語法來調(diào)用這個函數(shù)：console.log(“%s is %d years old.”, “Bob”, 42)。
11、可以在Firebug中調(diào)試程序
在Firebug控制臺的的Javascript控制面板中，可以對頁面中的Javascript進(jìn)行調(diào)試，方法很簡單，只需要在要調(diào)試的行的左邊單擊，就會出現(xiàn)斷點(diǎn)了，之后請記住下面常件的快捷鍵：
(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)，如下圖：
總結(jié)
Firefox搭配Firebug在web開發(fā)程序設(shè)計(jì)中，可謂是“雙劍合壁”，功能強(qiáng)大，我只是選取其中的一些僅供大家參考，要想更多的了解的請參考Firebug官方網(wǎng)站的介紹。
【編輯推薦】
