Firebug是火狐瀏覽器上一個集成式的強大調(diào)試環(huán)境,很多調(diào)試應(yīng)用插件都必須基于Firebug平臺,能夠調(diào)試所有網(wǎng)站語言,如Html,Css等,但FireBug最吸引人的就是javascript調(diào)試功能,使用起來非常方便,是開發(fā)人員們鐘愛火狐瀏覽器的一個重要原因,可以說是每一個Web設(shè)計開發(fā)人員必備的工具。
火狐Firebug插件功能
1.CSS調(diào)試
專為網(wǎng)頁設(shè)計師們量身定做的CSS調(diào)試器。如今的網(wǎng)頁設(shè)計言必稱div+css,如果你是用table套出來的html頁面,就得按這規(guī)矩重構(gòu)一遍,否則顯得你不夠時髦!用div做出來的頁面的確能精簡html代碼,html標簽減肥的結(jié)果就是css樣式表的編寫成了頁面制作的重頭戲。
2.js調(diào)試器
這是一個很不錯的javascript腳本調(diào)試器,占用空間不大,但是單步調(diào)試、設(shè)置斷點、變量查看窗口一個不少。正所謂麻雀雖小,五臟俱全。
3.Console 控制臺
控制臺能夠顯示當前頁面中的javascript錯誤以及警告,并提示出錯的文件和行號,方便調(diào)試,這些錯誤提示比起瀏覽器本身提供的錯誤提示更加詳細且具有參考價值。而且在調(diào)試Ajax應(yīng)用的時候也是特別有用,你能夠在控制臺里看到每一個XMLHttpRequests請求post出去的參數(shù)、URL,http頭以及回饋的內(nèi)容,原本似乎在幕后黑匣子里運作的程序被清清楚楚地展示在你面前。
4.CSS尺標
我們可以利用Firebug來查看頁面中某一區(qū)塊的CSS樣式表,如果進一步展開右側(cè)Layout tab的話,它會以標尺的形式將當前區(qū)塊占用的面積清楚地標識出來,精確到象素,更讓人驚訝的是,你能夠在這個可視化的界面中直接修改各象素的值,頁面上區(qū)塊的位置就會隨改動而變化。在頁面中某些元素出現(xiàn)錯位或者面積超出預(yù)料值時,該功能能夠提供有效的幫助,你可以籍此分析offset、margin、padding、size之間的關(guān)系,從而找出解決問題的辦法。
5.網(wǎng)絡(luò)監(jiān)視器
firebug的網(wǎng)絡(luò)監(jiān)視器同樣是功能強大的,它能將頁面中的css、javascript以及網(wǎng)頁中引用的圖片載入所消耗的時間以矩狀圖呈現(xiàn)出來,也許在這里你能一把揪出拖慢了你的網(wǎng)頁的元兇,進而對網(wǎng)頁進行調(diào)優(yōu),還有一些其它細節(jié)功能,比如預(yù)覽圖片,查看每一個外部文件甚至是xmlHttpRequests請求的http頭等等。
6.修改html
第一次看到firebug強大的html代碼查看器,就覺得它與眾不同,相比于firefox自帶的html查看器,它的功能強大了許多。
火狐Firebug插件特色
1、過濾日志消息
firebug提供了兩種方法來過濾日志消息,通過選項菜單和工具欄中的過濾器按鈕。開發(fā)者工具控制臺通過其工具欄內(nèi)的過濾器按鈕提供類似的功能- 集中在一個地方。
2、命令行API
firebug中的命令行API提供了一些特殊功能,以方便您使用。開發(fā)工具命令行有一些共同的功能,但也有一些其他的功能,錯過了別人。
3、服務(wù)器日志
像FirePHP這樣的firebug擴展允許將服務(wù)器端消息記錄到firebug控制臺。該功能已經(jīng)使用ChromeLogger協(xié)議集成到DevTools中,不需要安裝任何擴展。
4、堅持日志
在firebug中,您可以單擊工具欄中的Persist按鈕以保留頁面導航和重新加載之間記錄的消息。在DevTools中,這個選項被稱為啟用日志,并且在“工具箱選項”面板中可用。
5、命令歷史
該命令歷史記錄可通過在firebug的命令行按鈕,可以按↑/ ↓在DevTools命令行中。
6、控制臺API
從網(wǎng)頁內(nèi)將東西記錄到控制臺firebug 在頁面中提供了一個控制臺API。開發(fā)者工具共享相同的API,所以你的console.*語句將繼續(xù)工作。
Firebug安裝教程
1.安裝完畢最新版火狐瀏覽器后,點擊左上角firefox菜單
選擇【工具】-->【附加組件】。然后在【搜索所有附加組件】搜索欄中輸入“firebug”關(guān)鍵詞,出現(xiàn)firebug搜索結(jié)果,點擊安裝后,重啟瀏覽器即可完成安裝過程。
2.firebug的啟動完成安裝,重啟瀏覽器后,即可按“F12”快捷鍵啟動firebug插件,也可點擊firefox地址欄右邊f(xié)irebug圖標啟動,啟動后,頁面將分欄顯示,firebug各項功能顯示在下方。