FireBug使用總結

FireBug是一個用於網站前端的開發工具,它是Firefox瀏覽器的一個拓展插件,它能夠調試JavaScript、查看DOM、分析CSS、監控網絡流量以及進行Ajax交互等。提供了幾乎前端開發須要的所有功能。

FireBug總共包含6個面板,分別是控制檯,HTML,CSS,腳本,DOM和網絡

1. 控制檯面板

控制檯面板用於記錄日誌,概覽,錯誤提示和執行命令行,同時也用於Ajax的調試。

FireBug提供以下幾個經常使用的記錄日誌的函數。

console.log:簡單的記錄日誌。

console.debug:記錄調試信息,而且附上行號的超連接。

console.error:在消息前面顯示錯誤圖標,而且附上行號的超連接。

console.info:在消息前面顯示信息圖標,而且附上行號的超連接。

console.warn:在消息前面顯示警告圖標,而且附上行號的超連接。

在html的script裏面輸入以下代碼,例子以下:

<script tye="text/javascript">
console.log('This is log message');
console.debug('This is debug message');
console.error('This is error message');
console.info('This is info message');
console.warn('This is warn message');
</script>

執行代碼後在FireBug控制檯看到的效果以下:

控制檯面板內的子菜單:

分別是清除,保持,概況,所有,錯誤,警告,消息,調試信息,Cookies等。

'清除'用於清除控制檯中的內容。'保持'則是把控制檯中的內容保存,即便刷新了還存在。'全部'則是顯示所有的信息。後面的錯誤,警告,消息,調試信息菜單則是對全部進行了一個分類。'概況'菜單用於查看函數的性能。

控制檯面板也能夠用於Ajax調試,在必定程度上能夠取代網絡面板。

2. HTML面板

(1). 查看和修改HTML代碼。

(2). 查看(Inspect)。

(3). 查看DOM中被腳本更改的部分。

(4). 查看和修改元素的樣式。

(5). 查看DOM的信息。

3. CSS面板

CSS面板與HTML右側的面板功能類似,但不如HTML面板靈活,故而用的較少。

CSS面板特有的一個功能是能夠分別詳細查看頁面中內嵌以及動態導入的樣式。

4. 腳本面板

腳本面板不只能夠查看頁面內的腳本,並且還具備強大的調試功能。

在腳本面板的右側有'監控','堆棧'和'斷點'3個面板,利用FireBug提供的設置斷點功能能夠很方便的調試程序。

5. DOM面板

DOM面板與HTML右側的面板功能類似,但不如HTML面板靈活,故而用的較少。

6. 網絡面板

網絡面板能夠監測每一項元素的加載狀況,包括腳本,圖片等的大小以及加載用時等,對於頁面優化有着極其重要的意義。此外頂部還能夠分類查看元素的HTML,CSS,JS等的加載狀況,使分析更加靈活。