firebug如何使用以及firebug安裝的圖文步驟

Firebug是網(wǎng)頁(yè)瀏覽器 Mozilla firefox下的一款開(kāi)發(fā)類(lèi)插件， 現(xiàn)屬于Firefox的五星級(jí)強(qiáng)力推薦插件之一。它集HTML查看和編輯、Javascript控制臺(tái)、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開(kāi)發(fā) JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個(gè)不同的角度剖析Web頁(yè)面內(nèi)部的細(xì)節(jié)層面， 給Web開(kāi)發(fā)者帶來(lái)很大的便利。

對(duì)于網(wǎng)頁(yè)開(kāi)發(fā)人員來(lái)說(shuō)，F(xiàn)irebug是Firefox瀏覽器中最好的插件之一，也可以說(shuō)Firebug的CSS調(diào)試器是專(zhuān)為網(wǎng)頁(yè)設(shè)計(jì)師們量身定做的！

firebug怎么安裝？

1、首先下載Firefox瀏覽器 點(diǎn)擊下載

2、找到“工具（T）”，下拉列表中選擇“附加組件”。

3、“獲取附加組件”

4、在搜索里輸入“firebug”，稍等即可。

5、安裝firebug插件，安裝完成后的圖標(biāo)如圖所示：

6、查看頁(yè)面元素并對(duì)頁(yè)面進(jìn)行修改。

firebug怎么用？

一、安裝Firebug

Firebug在Firefox瀏覽器中運(yùn)行。另外有一個(gè)Firebug lite版本，可以通過(guò)javascript調(diào)用，包含在頁(yè)面中，從而在其他非Firefox瀏覽器中使用。本文不涉及這個(gè)版本。

安裝Firebug，請(qǐng)?jiān)L問(wèn)Firebug下載頁(yè)面。點(diǎn)擊該頁(yè)面右邊欄中部巨大的橙黃色按鈕即可。你也可以在Mozilla的FireFox Add-ons站點(diǎn)下載它。安裝后只要重新啟動(dòng)FireFox，就可以使用了。

如果你已經(jīng)安裝過(guò)了，那么請(qǐng)檢查是否更新到了最新版本。打開(kāi)Firefox的"Tools"菜單，選擇"Add-ons"命令，然后在彈出窗口中點(diǎn)擊左下角的"Find Updates"按鈕。

二、打開(kāi)和關(guān)閉Firebug

在Firebug網(wǎng)站上，可以找到它的快捷鍵設(shè)置。我最常使用以下三種方法：

* 打開(kāi)Firebug：按F12，或者點(diǎn)擊瀏覽器狀態(tài)欄右邊的綠色標(biāo)志。

* 關(guān)閉Firebug：按F12，或者點(diǎn)擊瀏覽器狀態(tài)欄右邊的綠色標(biāo)志，或者點(diǎn)擊Firebug窗口右上角的紅色關(guān)閉標(biāo)志。

* 在單獨(dú)窗口中打開(kāi)Firebug：點(diǎn)擊firebug窗口右上角的紅色箭頭標(biāo)識(shí)，或者使用Ctrl+F12/⌘+F12按鈕。

Firebug的相關(guān)設(shè)置：

* 固定Firebug在新窗口打開(kāi)：先打開(kāi)firebug，點(diǎn)擊左上角的bug標(biāo)志，選擇options菜單中的"Always Open in New Window"設(shè)置。

* 增加/縮小字體大小：先打開(kāi)firebug，點(diǎn)擊左上角的bug標(biāo)志，選擇"Text Size"命令。每次字體變化的幅度非常小，你可能需要使用多次。

* 限制只對(duì)某些站點(diǎn)使用Firebug：先右擊瀏覽器狀態(tài)上的green check mark標(biāo)志，選擇"disable Firebug"命令。然后，再右擊這個(gè)已經(jīng)變灰的標(biāo)志，選擇"Allowed Sites..."命令，增加允許Firebug生效的域名。

三、Firebug窗口概覽

* Console標(biāo)簽： 主要使用javascript命令行操作，顯示javascript錯(cuò)誤信息，在底部的>>>提示符后，你可以自己鍵入javascript命令。

* HTML標(biāo)簽： 顯示HTML源碼，并且像DOM等級(jí)結(jié)構(gòu)那樣，每行之前有縮進(jìn)。你可以選擇顯示或不顯示某個(gè)子節(jié)點(diǎn)。

* CSS標(biāo)簽：瀏覽所有已經(jīng)裝入的樣式表，可以當(dāng)場(chǎng)對(duì)其修改。在Firebug窗口上部，"edit"命令的旁邊，有一個(gè)本頁(yè)面中所有樣式表的下拉列表，你可以選擇一個(gè)樣式表進(jìn)行瀏覽。

* Script標(biāo)簽： 顯示javascript文件及其所在頁(yè)面。在Firebug窗口上部，"inspect"命令的旁邊，有一個(gè)本頁(yè)面中所有Javascript文件的下拉列表，你可以選擇一個(gè)進(jìn)行瀏覽。你可以在javascript命令中，設(shè)置斷點(diǎn)（breakpoint）及其出現(xiàn)的條件。

* DOM標(biāo)簽： 顯示所有的頁(yè)面對(duì)象和window物體的屬性。因?yàn)樵趈avascript中，所有變量都是window物體的屬性，所以Firebug會(huì)顯示所有變量和它們的值。

* Net標(biāo)簽：顯示本頁(yè)面涉及的所有下載，以及它們各自花費(fèi)的時(shí)間，各自的HTTP請(qǐng)求頭信息和服務(wù)器響應(yīng)的頭信息。XHR標(biāo)簽對(duì)AJAX調(diào)試很有用。

四、隨時(shí)編輯頁(yè)面

在HTML標(biāo)簽中，點(diǎn)擊窗口上方的"inspect"命令，然后再選擇頁(yè)面中的文本節(jié)點(diǎn)，你可以對(duì)其進(jìn)行修改，修改結(jié)果會(huì)馬上反應(yīng)在頁(yè)面中。

Firebug同時(shí)是源碼瀏覽器和編輯器。所有HTML、CSS和Javascript文件中的對(duì)象，都可以用單擊或雙擊進(jìn)行編輯。當(dāng)你輸入完畢，瀏覽器中的頁(yè)面立刻會(huì)發(fā)生相應(yīng)變化，你可以得到瞬時(shí)反饋。DOM瀏覽器允許你對(duì)文檔結(jié)構(gòu)進(jìn)行徹底的編輯，不局限于文本節(jié)點(diǎn)。在HTML標(biāo)簽中，點(diǎn)擊窗口上部"inspect"命令旁邊的"edit"命令，下方的窗口就會(huì)立刻變成一個(gè)黑白的文本編輯窗口，你可以對(duì)HTML源代碼進(jìn)行任意編輯。在CSS標(biāo)簽中，F(xiàn)irebug會(huì)自動(dòng)補(bǔ)全你的輸入。在DOM標(biāo)簽中，當(dāng)你按Tab鍵時(shí)，F(xiàn)irebug會(huì)自動(dòng)補(bǔ)全屬性名。

五、用Firebug處理CSS

在DOM標(biāo)簽中，每個(gè)HTML元素的style屬性揭示了該元素的所有CSS設(shè)置。你可以雙擊對(duì)這些設(shè)置進(jìn)行編輯。

對(duì)于那些Firefox不支持的CSS規(guī)則，F(xiàn)irebug會(huì)自動(dòng)隱藏。比如，F(xiàn)irebug會(huì)隱藏針對(duì)某些瀏覽器的CSS特定設(shè)置，以及一些它不支持的CSS3規(guī)則。所以，它會(huì)隱藏_height:25px;（下劃線是一個(gè)針對(duì)IE6的設(shè)置）和p:first-of-type {color: #ff0000;} (:first-of-type是一個(gè)CSS3規(guī)定的偽類(lèi)，目前只有Safari 3支持）。但是，這也意味著，如果你恰巧發(fā)生了打字錯(cuò)誤，導(dǎo)致某些規(guī)則無(wú)法顯示，那么你只有使用其他編輯器顯示全部CSS內(nèi)容，找到你的錯(cuò)誤。

Firebug允許你關(guān)閉CSS中的某些語(yǔ)句，頁(yè)面會(huì)立刻反映相應(yīng)變化，你可以立刻查看效果。"關(guān)閉"一條語(yǔ)句的方法是，在該語(yǔ)句的左邊點(diǎn)擊，會(huì)出現(xiàn)一個(gè)紅色的禁止標(biāo)志。該語(yǔ)句就會(huì)變灰。再次點(diǎn)擊，該語(yǔ)句就會(huì)恢復(fù)。

Firebug允許你編輯CSS的屬性和屬性值。你只要對(duì)它們點(diǎn)擊，就能編輯。修改后的效果會(huì)立刻在瀏覽器窗口中顯示出來(lái)。這個(gè)特性最好的運(yùn)用，是在確定準(zhǔn)確定位的padding和margin時(shí)，firebug允許你用方向鍵逐單位的增加。

Firebug允許你增加新的屬性和屬性值。增加方法是雙擊現(xiàn)有的selector，然后就會(huì)出現(xiàn)一個(gè)空白的屬性名輸入框，完成輸入后則會(huì)出現(xiàn)一個(gè)空白的屬性值。

六、盒狀模型

當(dāng)你在HTML標(biāo)簽中，點(diǎn)擊一個(gè)元素時(shí)，左面窗口顯示HTML代碼，右面窗口顯示該元素的CSS。在CSS窗口上方，有一個(gè)layout按鈕，點(diǎn)擊后會(huì)展示與該元素相關(guān)的方塊模型，包括padding、margin和border的值。要查看每一個(gè)元素的這三項(xiàng)值，只需點(diǎn)擊"inspect"按鈕，然后用鼠標(biāo)懸停在頁(yè)面中該元素的上方。

七、評(píng)估下載速度

Net標(biāo)簽中圖形化了頁(yè)面中所有http請(qǐng)求所用的時(shí)間。使用這個(gè)功能，必須打開(kāi)Network monitoring，默認(rèn)設(shè)置就是打開(kāi)，但是你可以在"options"下拉菜單中關(guān)閉這個(gè)選項(xiàng)。你可以用這項(xiàng)功能評(píng)估javascript文件下載，占用整個(gè)頁(yè)面顯示的時(shí)間。

在每個(gè)HTTP請(qǐng)求的左面點(diǎn)擊，會(huì)顯示該次請(qǐng)求的頭信息。

在1.0.5版以后，你可以單獨(dú)查看HTML文件、CSS文件、圖像文件等各自下載的時(shí)間。

八、DOM

DOM標(biāo)簽提供頁(yè)面上所有物體的所有屬性的信息。Firebug最酷的功能之一是，它可以動(dòng)態(tài)修改頁(yè)面，反映在瀏覽器窗口，但是如果使用瀏覽器自帶的查看源碼功能，你會(huì)發(fā)現(xiàn)源碼并沒(méi)有改變。

九、Javascript調(diào)試

JavaScript profiler可以報(bào)告你的Javascript函數(shù)執(zhí)行所花的時(shí)間，因此你可以查看不同函數(shù)對(duì)速度的影響。使用這個(gè)功能的方法是，打開(kāi)console標(biāo)簽，然后點(diǎn)擊上面的Profile按鈕（上部的按鈕順序是"Inspect |Clear | Profile"）。Firebug列出調(diào)用的所有函數(shù)，及其所花的時(shí)間。你可以針對(duì)要測(cè)試的某個(gè)函數(shù)，在其前部加上console.profile([title])，在其后部加上console.profileEnd()。

console標(biāo)簽的底部是命令行輸入，它以">>>"開(kāi)頭。如果命令行輸入有結(jié)果輸出，那么它會(huì)展示在上部的窗口。有一個(gè)詳細(xì)的命令行輸入API值得看一下。Firebug內(nèi)置console對(duì)象有幾種有用的方法可供調(diào)用，包括console.debug、console.info、console.warning、console.error等。如果這些方法產(chǎn)生了輸出結(jié)果，F(xiàn)irebug會(huì)提供一個(gè)鏈接，讓你查看相應(yīng)的代碼。

調(diào)試的另一個(gè)方法是設(shè)置斷點(diǎn)。Script標(biāo)簽允許你在任意行暫停執(zhí)行。單擊行號(hào)，就會(huì)設(shè)置一個(gè)斷點(diǎn)。右擊行號(hào)，就可以設(shè)置一個(gè)斷點(diǎn)出現(xiàn)的條件，只有當(dāng)條件為真時(shí)，程序才會(huì)暫停執(zhí)行。右面還有一個(gè)watch窗口，可以查看當(dāng)前變量的值。

十、AJAX

前面已經(jīng)提到，F(xiàn)irebug可以捕捉頁(yè)面的動(dòng)態(tài)內(nèi)容和其他DOM變化。如果你打開(kāi)這個(gè)示例文件，點(diǎn)擊頁(yè)面上的鏈接后，在瀏覽器中查看源碼，你會(huì)發(fā)現(xiàn)什么也沒(méi)有改變，源碼中依然包含那個(gè)鏈接。但是，如果你在Firebug中查看源碼，你會(huì)發(fā)現(xiàn)DOM已經(jīng)發(fā)生了變化，"Hello World"已經(jīng)被包括在內(nèi)了。這就是Firebug的核心功能之一，沒(méi)有它，AJAX的請(qǐng)求和回應(yīng)就是不可見(jiàn)的。有了它，你可以看到送出的和收到的文本，已經(jīng)相應(yīng)的頭信息。在Net標(biāo)簽中，你還能監(jiān)控每個(gè)請(qǐng)求/回應(yīng)各自所花費(fèi)的時(shí)間。

Net標(biāo)簽中的XHR功能，對(duì)查看AJAX操作特別有用。如果你點(diǎn)擊每個(gè)服務(wù)器端回應(yīng)前的加號(hào)，你就會(huì)看到服務(wù)器端回應(yīng)的頭信息和內(nèi)容。

當(dāng)通過(guò)XMLHttpRequest對(duì)象向服務(wù)器端發(fā)出一個(gè)請(qǐng)求時(shí)，F(xiàn)irebug會(huì)記錄請(qǐng)求的POST或GET內(nèi)容，以及回應(yīng)的頭信息和內(nèi)容。使用Net標(biāo)簽中的XHR功能，就可以看到這些內(nèi)容。它會(huì)列出所有服務(wù)器的回應(yīng)，以及所花費(fèi)的時(shí)間。點(diǎn)擊前面的+號(hào)，如果是GET請(qǐng)求，會(huì)顯示三個(gè)標(biāo)簽；如果是POST請(qǐng)求，會(huì)顯示4個(gè)標(biāo)簽：

Params: 顯示請(qǐng)求URL中所包含的name/value對(duì)。

Headers: 顯示請(qǐng)求和回應(yīng)的頭信息。

Response: 顯示實(shí)際從服務(wù)器收到的信息。

Post：顯示從通過(guò)POST請(qǐng)求，送到服務(wù)器的信息。（此項(xiàng)GET請(qǐng)求不包括。）

這四個(gè)標(biāo)簽對(duì)編寫(xiě)和調(diào)試程序很有用。檢查POST和Params標(biāo)簽，確定你的請(qǐng)求被正確地發(fā)出了。檢查Response標(biāo)簽查看返回的格式，確定相應(yīng)的Javascript處理函數(shù)應(yīng)該如何編寫(xiě)。

關(guān)鍵詞： firebug