相信很多從事Web開發工作的開發者都聽說和使用過Firebug,但可能大部分人還不知道,其實它是一個在網頁設計方面功能相當強大的編輯器,它可以對HTML、DOM、CSS、HTTP和Javascript進行全面的跟蹤和調試。它是Firefox瀏覽器的一個插件,所以建議各位Web開發者,要充分利用FireFox瀏覽器和Firebug插件進行日常的調試工作。本文選取了12個Web開發者應該掌握的Firebug的初級使用技巧,介紹給大家。
1、使用Firebug可以找到頁面中的任何內容
不知道各位有無遇到過這樣的情況,在一個復雜的HTML頁面中,當你想找某個頁面元素的實際對應的HTML時,你不得不在一大堆HTML代碼中去查找,十分麻煩。有了Firebug,現在你只需要在頁面中,用鼠標右鍵選中某個元素,然后在彈出的菜單中,選擇“查看元素”,馬上就會在HTML頁面代碼中找到該元素對應的代碼了,十分方便,如下圖所示:
同樣,也提供了更快速的方法:只需要點Firebug插件左上方的箭頭,如下圖所示,則每當鼠標在頁面中移動時,在Firebug控制臺中就馬上顯示移動時經過的HTML元素的代碼:
2、可以使用Firebug修改HTML和CSS
通過Firebug,可以直接修改HTML,增加HTML的屬性,刪除元素,增加CSS樣式及實現更多功能,如下圖:
在上圖的菜單中可以清楚看到,你可以對HTML元素進行各樣的修改操作,方法是先點擊HTML部分的代碼,然后鼠標右鍵即可在彈出的菜單中進行操作。
3、可以通過Firebug查看DOM元素和對XML進行操作
當打開一個HTML頁通過Firebug查看HTML代碼時,你可以同時點在控制面板中的DOM樹,就會以DOM的樹型結構方式看到整個HTML的結構。而如果你是打開了一個XML文件,那么鼠標右鍵點XML文件中的任何一個元素,在彈出的菜單中同樣可以選擇對XML進行相關操作,如下圖:
4、使用Firebug調試Javascript代碼
在Firebug控制臺中,如果要執行調試Javascript代碼,只需要首先將Script控制面版啟動,然后在點擊Console按鈕,在下拉菜單中選擇顯示Javascipt及HTML錯誤(還可以讓用戶選擇顯示更多的錯誤),接著在底部會發現出現>>>的箭頭,在這里,你可以輸入Javascipt代碼,輸入后,馬上按回車鍵,就可以執行了,十分方便,如下圖:
一個小技巧是,在輸入Javascipt的時候,還支持使用tab鍵的自動完成提醒功能,比如對于一個很長的Javascipt函數,在沒輸入完的時候只要按tab鍵firebug就會幫助你自動補充完整。
5、多次加載頁面后Firebug會記得加載前的位置
無論你重復加載多少次頁面,Firebug在每次加載頁面后總會自己記得加載前頁面所在的位置(比如你已經在瀏覽頁面的底部,此時再加載頁面,則新的頁面加載后,依然把你帶到頁面底部)。
新聞熱點
疑難解答