Web開發(fā)者可能不知道的12個Firebug技巧
相信很多從事Web開發(fā)工作的開發(fā)者都聽說和使用過Firebug,但可能大部分人還不知道,其實它是一個在網(wǎng)頁設(shè)計方面功能相當(dāng)強大的編輯器,它可以對HTML、DOM、CSS、HTTP和Javascript進行全面的跟蹤和調(diào)試。它是Firefox瀏覽器的一個插件,所以建議各位Web開發(fā)者,要充分利用FireFox瀏覽器和Firebug插件進行日常的調(diào)試工作。本文選取了12個Web開發(fā)者應(yīng)該掌握的Firebug的初級使用技巧,介紹給大家。
1、使用Firebug可以找到頁面中的任何內(nèi)容
不知道各位有無遇到過這樣的情況,在一個復(fù)雜的HTML頁面中,當(dāng)你想找某個頁面元素的實際對應(yīng)的HTML時,你不得不在一大堆HTML代碼中去查找,十分麻煩。有了Firebug,現(xiàn)在你只需要在頁面中,用鼠標右鍵選中某個元素,然后在彈出的菜單中,選擇“查看元素”,馬上就會在HTML頁面代碼中找到該元素對應(yīng)的代碼了,十分方便,如下圖所示:

同樣,也提供了更快速的方法:只需要點Firebug插件左上方的箭頭,如下圖所示,則每當(dāng)鼠標在頁面中移動時,在Firebug控制臺中就馬上顯示移動時經(jīng)過的HTML元素的代碼:
2、可以使用Firebug修改HTML和CSS
通過Firebug,可以直接修改HTML,增加HTML的屬性,刪除元素,增加CSS樣式及實現(xiàn)更多功能,如下圖:

在上圖的菜單中可以清楚看到,你可以對HTML元素進行各樣的修改操作,方法是先點擊HTML部分的代碼,然后鼠標右鍵即可在彈出的菜單中進行操作。
3、可以通過Firebug查看DOM元素和對XML進行操作
當(dāng)打開一個HTML頁通過Firebug查看HTML代碼時,你可以同時點在控制面板中的DOM樹,就會以DOM的樹型結(jié)構(gòu)方式看到整個HTML的結(jié)構(gòu)。而如果你是打開了一個XML文件,那么鼠標右鍵點XML文件中的任何一個元素,在彈出的菜單中同樣可以選擇對XML進行相關(guān)操作,如下圖:

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

一個小技巧是,在輸入Javascipt的時候,還支持使用tab鍵的自動完成提醒功能,比如對于一個很長的Javascipt函數(shù),在沒輸入完的時候只要按tab鍵firebug就會幫助你自動補充完整。
5、多次加載頁面后Firebug會記得加載前的位置
無論你重復(fù)加載多少次頁面,F(xiàn)irebug在每次加載頁面后總會自己記得加載前頁面所在的位置(比如你已經(jīng)在瀏覽頁面的底部,此時再加載頁面,則新的頁面加載后,依然把你帶到頁面底部)。
#p#
6、使用$標記去方便訪問變量
在上面的第4點中,我們提到了在>>>這個命令行下可以進行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的運行性能
在Firebug中,你可以點控制臺中的“profile(概況)”選項,這將開啟Firebug的性能監(jiān)視功能,之后你可以進行頁面的一系列操作,當(dāng)再次點profile按鈕后,將停止對性能的監(jiān)測活動,接著Firebug會顯示一個列表,其中會清楚列明操作過程中所涉及的函數(shù),調(diào)用次數(shù),占用時間、平均時間,最小時間,最大時間等,如下圖所示:

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

在上圖中,只要點每一個請求旁邊的+號,就可以看到該請求的具體細節(jié),如下圖:

可以看到,能看到HTTP的頭部的各種信息。同樣,如果要看當(dāng)前頁面中的比如圖片,F(xiàn)LASH等元素的信息等,也可以通過上圖去點不同的選項卡去篩選查看,十分方便。
10、使用Firebug的Log功能
在設(shè)計頁面時,經(jīng)常要記錄下頁面的一些信息,這個時候,可以使用Firebug中的log日志功能,把一些信息輸出到firebug的控制臺中,這樣就方便調(diào)試了。Firebug提供了一個console對象,在插件加載的時候就注冊到Javascript的運行環(huán)境中去了,可以在程序中直接使用。console對象提供了一個log方法,舉例說明如下:
在Firefox中執(zhí)行如下代碼,會看到Firebug的控制臺中出現(xiàn)如下信息:

可以看到,各個級別的日志輸出,都帶有一個彩色的圖標,能給用戶很醒目的提醒。同時,console.log 還支持格式化字符串的輸出,你可以用類似C語言中printf的語法來調(diào)用這個函數(shù):console.log(“%s is %d years old.”, “Bob”, 42)。
11、可以在Firebug中調(diào)試程序
在Firebug控制臺的的Javascript控制面板中,可以對頁面中的Javascript進行調(diào)試,方法很簡單,只需要在要調(diào)試的行的左邊單擊,就會出現(xiàn)斷點了,之后請記住下面常件的快捷鍵:
(1) F10 進入下一行;
(2) F8繼續(xù)調(diào)試;
(3) F11進入Javascript中的函數(shù)體調(diào)試;
(4) Shift+F11跳出函數(shù)體。

12、在Firebug中可以設(shè)置帶條件的斷點
在Firebug中,還可以設(shè)置帶條件判斷的斷點,如下圖:

FireBug
Firebug 是網(wǎng)頁瀏覽器 Mozilla Firefox 下的一款開發(fā)類插件,現(xiàn)屬于Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制臺、網(wǎng)絡(luò)狀況監(jiān)視器于一體,是開發(fā)JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀,從各個不同的角度剖析Web頁面內(nèi)部的細節(jié)層面,給Web開發(fā)者帶來很大的便利。例如 Yahoo! 的網(wǎng)頁速度優(yōu)化建議工具 YSlow。
Firebug 也是一個除錯工具。用戶可以利用它除錯、編輯、甚至刪改任何網(wǎng)站的 CSS、HTML、DOM、與 JavaScript 代碼。
原文鏈接:http://tech.it168.com/a2011/0217/1158/000001158261_all.shtml
【編輯推薦】

























