本文是Firebug的一個概覽,，firebug是firefox瀏覽器網(wǎng)頁設(shè)計制作調(diào)試的好幫手，這里并不對它的所有特性進(jìn)行詳盡解釋,。不過,，本文的內(nèi)容對一個新手來說，應(yīng)該是足夠了,。

目錄

1. 安裝Firebug
2. 打開和關(guān)閉Firebug
3. Firebug窗口概覽
4. 隨時編輯頁面
5. 用Firebug處理CSS
6. Firebug的盒狀模型
7. 使用Firebug評估下載速度
8. DOM與Firebug
9. Javascript在Firebug中的調(diào)試
10. AJAX與Firebug
11. Firebug附注

一,、安裝Firebug

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

安裝Firebug，請訪問Firebug下載頁面,。點擊該頁面右邊欄中部巨大的橙黃色按鈕即可,。你也可以在Mozilla的FireFox Add-ons站點下載它。安裝后只要重新啟動FireFox,，就可以使用了,。

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

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

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

1. 打開Firebug：按F12,，或者點擊瀏覽器狀態(tài)欄右邊的greencheck.gif綠色標(biāo)志,。

   

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

3. 在單獨窗口中打開Firebug：點擊firebug窗口右上角的uparrow.gif紅色箭頭標(biāo)識，或者使用Ctrl+F12按鈕,。

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

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

增加/縮小字體大?。合却蜷_firebug，點擊左上角的bug標(biāo)志,，選擇”Text Size”命令,。每次字體變化的幅度非常小，你可能需要使用多次,。

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

Firebug窗口概覽

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

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

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

   

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

5. DOM標(biāo)簽： 顯示所有的頁面對象和window物體的屬性,。因為在javascript中，所有變量都是window物體的屬性,，所以Firebug會顯示所有變量和它們的值,。

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

隨時編輯頁面

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

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

用Firebug處理CSS

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

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

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

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

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

盒狀模型

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

評估下載速度

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

在每個HTTP請求的左面點擊,，會顯示該次請求的頭信息,。

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

DOM

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

Javascript調(diào)試

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

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

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

AJAX

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

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

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

• Params: 顯示請求URL中所包含的name/value對,。

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

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

• Post：顯示從通過POST請求,，送到服務(wù)器的信息,。（此項GET請求不包括。）

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

十一、附注

1. Firebug 1.05 及以前版本,，與Firefox 3.0不兼容,。
2. Firebug的作者Joe Hewitt免費提供了這個軟件，為了顯示我們對他的愛,，你可以考慮對他進(jìn)行捐助,。
3. Firebug的一些高級應(yīng)用，敬請關(guān)注四川易搜今后的前端設(shè)計文章,。