簡(jiǎn)單來(lái)說(shuō)，F(xiàn)irebug是Firefox上用來(lái)監(jiān)視、編輯和調(diào)試站點(diǎn)的CSS、HTML、DOM和JavaScript的擴(kuò)展工具。
我們先到Firebug的主頁(yè)上下載最新的版本裝上，下面開(kāi)始調(diào)試：
1、查看、編輯HTML元素及其CSS
安裝好Firebug之后，你可以通過(guò)點(diǎn)擊瀏覽器右下方的小蟲(chóng)子打開(kāi)Firebug，如圖：
或者直接按F12，如果要以窗口形式打開(kāi)的話，就按下CTRL+F12
打開(kāi)Firebug之后，點(diǎn)擊“查看”，然后選擇頁(yè)面上任何需要編輯的地方，F(xiàn)irebug會(huì)將其選中，并且在HTML結(jié)構(gòu)中將其高亮，如圖：
之后你可以對(duì)該元素的HTML結(jié)構(gòu)、屬性進(jìn)行任意的編輯，修改后的效果都會(huì)實(shí)時(shí)的展現(xiàn)在頁(yè)面當(dāng)中。
同時(shí)在Firebug的右側(cè)是該元素對(duì)應(yīng)的CSS樣式，如下圖：
圖中的樣式，顯示了該元素被重新定義的樣式繼承關(guān)系，比如“繼承自body.CurHome”的“text-align”屬性被“繼承自div.shell”的“text-align”覆蓋，原先的屬性就會(huì)以中橫線的形式表示出來(lái)。如果要查看所有的屬性，請(qǐng)勾選圖中標(biāo)“1”的選項(xiàng)。
單擊“2”可以禁用/打開(kāi)某條CSS屬性；單擊任意一個(gè)屬性或者屬性值可以進(jìn)行CSS的編輯，如“3”；雙擊“4”則可以新建一條CSS屬性。現(xiàn)在我們點(diǎn)擊下“5”來(lái)看看CSS布局面板：
上面這幅圖展現(xiàn)的是一個(gè)HTML結(jié)構(gòu)的標(biāo)準(zhǔn)盒模型，通過(guò)點(diǎn)擊相應(yīng)的數(shù)值可以修改該值，同時(shí)在瀏覽器窗口中顯示出對(duì)應(yīng)的效果來(lái)。
2、查看動(dòng)態(tài)生成的HTML代碼的方法
通過(guò)“查看源代碼”的方法，無(wú)法看到由JS動(dòng)態(tài)生成的HTML結(jié)構(gòu)，這里我們可以通過(guò)Firebug來(lái)查看，如下圖，選中“body”節(jié)點(diǎn)，按下“編輯”，即可輸出頁(yè)面上源文件的代碼以及動(dòng)態(tài)生成的代碼。
還有另外一種簡(jiǎn)單的方法，選中你要查看的頁(yè)面元素，然后在右鍵菜單中選擇“查看選中部分源代碼”
3、查看/測(cè)試頁(yè)面的函數(shù)執(zhí)行效率
查看頁(yè)面上所有函數(shù)執(zhí)行效率可以很容易的找到運(yùn)行最慢的函數(shù)，從而幫助WD有針對(duì)性的進(jìn)行頁(yè)面的JS優(yōu)化。如圖，為需要調(diào)試的頁(yè)面“啟用控制臺(tái)”：
點(diǎn)擊“概況”開(kāi)始收集，再次點(diǎn)擊即可停止，然后進(jìn)行查看。
在firebug控制臺(tái)的最底下是一排命令行，在這里你可以輸入任意JS語(yǔ)句，按下回車鍵即可執(zhí)行：
使用console，還可以測(cè)試一段代碼或者函數(shù)的執(zhí)行時(shí)間，點(diǎn)擊命令行最右側(cè)的紅色按鈕切換到命令行多行模式：
4、使用Firebug查看XMLHttpRequest
使用Firebug查看XMLHttpRequest，對(duì)于調(diào)試AJAX是很有幫助的。如圖：
為需要調(diào)試的站點(diǎn)開(kāi)啟“網(wǎng)絡(luò)”監(jiān)控功能，其實(shí)該功能可以查看頁(yè)面上所有類型的post和get請(qǐng)求，并且還會(huì)顯示出請(qǐng)求消耗的時(shí)間。對(duì)于XMLHttpRequest會(huì)有詳細(xì)的參數(shù)與返回值。
5、查看頁(yè)面上所有的CSS與JS
在頁(yè)面調(diào)試中我們發(fā)現(xiàn)，對(duì)于外部引用的CSS與JS很難進(jìn)行調(diào)試，使用基于Firebug的Yslow擴(kuò)展即可解決該問(wèn)題。首先在Yslow的主頁(yè)上下載一個(gè)最新的版本裝上：http://developer.yahoo.com/yslow/
在Firebug小蟲(chóng)子的右邊就是Yslow，后面的數(shù)值是當(dāng)前頁(yè)面完全加載所消耗的時(shí)間，點(diǎn)擊Yslow即可打開(kāi)（或者通過(guò)Firebug的Yslow面板，運(yùn)行“Performance”進(jìn)行頁(yè)面分析）。
如上圖，選擇“All JS”后，當(dāng)前頁(yè)面的所有內(nèi)部JS和外部JS都會(huì)被顯示在一個(gè)新開(kāi)的頁(yè)面中，這樣查看頁(yè)面上所有的JS源代碼就變得方便多了。
6、查看頁(yè)面上所有的資源列表
其實(shí)前面第四點(diǎn)介紹到的“網(wǎng)絡(luò)”功能就可以查看所有資源列表，而且可以通過(guò)查看狀態(tài)來(lái)進(jìn)行對(duì)應(yīng)的優(yōu)化（例如排查404元素）。這里可以通過(guò)Yslow的components功能看到到包括類型與詳細(xì)路徑的資源列表：
鼠標(biāo)hover可以看到對(duì)應(yīng)的縮略圖，點(diǎn)擊則可在新窗口中打開(kāi)。更多Yslow功能請(qǐng)查看其主頁(yè)。
7、使用Firecookie調(diào)試頁(yè)面cookie
Firecookie是基于Firebug的cookie調(diào)試工具，先到作者的主頁(yè)上了解下詳細(xì)信息，再下載一個(gè)安裝上。
http://www.softwareishard.com/blog/firecookie/
安裝好之后，F(xiàn)irebug中會(huì)多出一個(gè)“cookie”面板，你可以為需要調(diào)試的頁(yè)面添加、刪除、修改cookie信息。
Firebug是一款能夠?yàn)閃D提高效率的調(diào)試?yán)鳎Ｍ蠹叶寄苡蒙稀ｊP(guān)于Firebug的更多信息：