據說，對於網頁開發人員來說，Firebug是Firefox瀏覽器中最好的外掛之一。
我最近就在學習怎麼使用Firebug，網上找到一篇針對初學者的教程，感覺比較有用，就翻譯了出來。
=================
Firebug入門指南
作者：Estelle Weyl
原文網址：http://www.evotech.net/blog/2007/06/introduction-to-firebug/
譯者：阮一峰
本文是Firebug的一個概覽，並不對它的所有特性進行詳盡解釋。不過，本文的內容對一個新手來說，應該是足夠了。
目錄
一、安裝Firebug
二、開啟和關閉Firebug
三、Firebug視窗概覽
四、隨時編輯頁面
五、用Firebug處理CSS
六、盒狀模型
七、評估下載速度
八、DOM
九、Javascript除錯
十、AJAX
十一、附註
一、安裝Firebug
Firebug在Firefox瀏覽器中執行。另外有一個Firebug lite版本，可以透過javascript呼叫，包含在頁面中，從而在其他非Firefox瀏覽器中使用。本文不涉及這個版本。
安裝Firebug，請訪問Firebug下載頁面。點選該頁面右邊欄中部巨大的橙黃色按鈕即可。你也可以在Mozilla的FireFox Add-ons站點下載它。安裝後只要重新啟動FireFox，就可以使用了。
如果你已經安裝過了，那麼請檢查是否更新到了最新版本。開啟Firefox的"Tools"選單，選擇"Add-ons"命令，然後在彈出視窗中點選左下角的"Find Updates"按鈕。
二、開啟和關閉Firebug
在Firebug網站上，可以找到它的快捷鍵設定。我最常使用以下三種方法：
Firebug的相關設定：* 開啟Firebug：按F12，或者點選瀏覽器狀態列右邊的
綠色標誌。
* 關閉Firebug：按F12，或者點選瀏覽器狀態列右邊的
紅色關閉標誌。
* 在單獨視窗中開啟Firebug：點選firebug視窗右上角的
紅色箭頭標識，或者使用Ctrl+F12/⌘+F12按鈕。
* 固定Firebug在新視窗開啟：先開啟firebug，點選左上角的bug標誌，選擇options選單中的"Always Open in New Window"設定。
* 增加/縮小字型大小：先開啟firebug，點選左上角的bug標誌，選擇"Text Size"命令。每次字型變化的幅度非常小，你可能需要使用多次。
* 限制只對某些站點使用Firebug：先右擊瀏覽器狀態上的green check mark標誌，選擇"disable Firebug"命令。然後，再右擊這個已經變灰的標誌，選擇"Allowed Sites..."命令，增加允許Firebug生效的域名。
三、Firebug視窗概覽
四、隨時編輯頁面* Console標籤： 主要使用javascript命令列操作，顯示javascript錯誤資訊，在底部的>>>提示符後，你可以自己鍵入javascript命令。
* HTML標籤： 顯示HTML原始碼，並且像DOM等級結構那樣，每行之前有縮排。你可以選擇顯示或不顯示某個子節點。
* CSS標籤：瀏覽所有已經裝入的樣式表，可以當場對其修改。在Firebug視窗上部，"edit"命令的旁邊，有一個本頁面中所有樣式表的下拉選單，你可以選擇一個樣式表進行瀏覽。
* Script標籤： 顯示javascript檔案及其所在頁面。在Firebug視窗上部，"inspect"命令的旁邊，有一個本頁面中所有Javascript檔案的下拉選單，你可以選擇一個進行瀏覽。你可以在javascript命令中，設定斷點（breakpoint）及其出現的條件。
* DOM標籤： 顯示所有的頁面物件和window物體的屬性。因為在javascript中，所有變數都是window物體的屬性，所以Firebug會顯示所有變數和它們的值。
* Net標籤：顯示本頁面涉及的所有下載，以及它們各自花費的時間，各自的HTTP請求頭資訊和伺服器響應的頭資訊。XHR標籤對AJAX除錯很有用。
在HTML標籤中，點選視窗上方的"inspect"命令，然後再選擇頁面中的文字節點，你可以對其進行修改，修改結果會馬上反應在頁面中。
Firebug同時是原始碼瀏覽器和編輯器。所有HTML、CSS和Javascript檔案中的物件，都可以用單擊或雙擊進行編輯。當你輸入完畢，瀏覽器中的頁面立刻會發生相應變化，你可以得到瞬時反饋。DOM瀏覽器允許你對文件結構進行徹底的編輯，不侷限於文字節點。在HTML標籤中，點選視窗上部"inspect"命令旁邊的"edit"命令，下方的視窗就會立刻變成一個黑白的文字編輯視窗，你可以對HTML原始碼進行任意編輯。在CSS標籤中，Firebug會自動補全你的輸入。在DOM標籤中，當你按Tab鍵時，Firebug會自動補全屬性名。
五、用Firebug處理CSS
在DOM標籤中，每個HTML元素的style屬性揭示了該元素的所有CSS設定。你可以雙擊對這些設定進行編輯。
對於那些Firefox不支援的CSS規則，Firebug會自動隱藏。比如，Firebug會隱藏針對某些瀏覽器的CSS特定設定，以及一些它不支援的CSS3規則。所以，它會隱藏_height:25px;（下劃線是一個針對IE6的設定）和p:first-of-type {color: #ff0000;} (:first-of-type是一個CSS3規定的偽類，目前只有Safari 3支援）。但是，這也意味著，如果你恰巧發生了打字錯誤，導致某些規則無法顯示，那麼你只有使用其他編輯器顯示全部CSS內容，找到你的錯誤。
Firebug允許你關閉CSS中的某些語句，頁面會立刻反映相應變化，你可以立刻檢視效果。"關閉"一條語句的方法是，在該語句的左邊點選，會出現一個紅色的
禁止標誌。該語句就會變灰。再次點選，該語句就會恢復。
Firebug允許你編輯CSS的屬性和屬性值。你只要對它們點選，就能編輯。修改後的效果會立刻在瀏覽器視窗中顯示出來。這個特性最好的運用，是在確定準確定位的padding和margin時，firebug允許你用方向鍵逐單位的增加。
Firebug允許你增加新的屬性和屬性值。增加方法是雙擊現有的selector，然後就會出現一個空白的屬性名輸入框，完成輸入後則會出現一個空白的屬性值。
六、盒狀模型
當你在HTML標籤中，點選一個元素時，左面視窗顯示HTML程式碼，右面視窗顯示該元素的CSS。在CSS視窗上方，有一個layout按鈕，點選後會展示與該元素相關的方塊模型，包括padding、margin和border的值。要檢視每一個元素的這三項值，只需點選"inspect"按鈕，然後用滑鼠懸停在頁面中該元素的上方。
七、評估下載速度
Net標籤中圖形化了頁面中所有http請求所用的時間。使用這個功能，必須開啟Network monitoring，預設設定就是開啟，但是你可以在"options"下拉選單中關閉這個選項。你可以用這項功能評估javascript檔案下載，佔用整個頁面顯示的時間。
在每個HTTP請求的左面點選，會顯示該次請求的頭資訊。
在1.0.5版以後，你可以單獨檢視HTML檔案、CSS檔案、影像檔案等各自下載的時間。
八、DOM
DOM標籤提供頁面上所有物體的所有屬性的資訊。Firebug最酷的功能之一是，它可以動態修改頁面，反映在瀏覽器視窗，但是如果使用瀏覽器自帶的檢視原始碼功能，你會發現原始碼並沒有改變。
九、Javascript除錯
JavaScript profiler可以報告你的Javascript函式執行所花的時間，因此你可以檢視不同函式對速度的影響。使用這個功能的方法是，開啟console標籤，然後點選上面的Profile按鈕（上部的按鈕順序是"Inspect |Clear | Profile"）。Firebug列出呼叫的所有函式，及其所花的時間。你可以針對要測試的某個函式，在其前部加上console.profile([title])，在其後部加上console.profileEnd()。
console標籤的底部是命令列輸入，它以">>>"開頭。如果命令列輸入有結果輸出，那麼它會展示在上部的視窗。有一個詳細的命令列輸入API值得看一下。Firebug內建console物件有幾種有用的方法可供呼叫，包括console.debug、console.info、console.warning、console.error等。如果這些方法產生了輸出結果，Firebug會提供一個連結，讓你檢視相應的程式碼。
除錯的另一個方法是設定斷點。Script標籤允許你在任意行暫停執行。單擊行號，就會設定一個斷點。右擊行號，就可以設定一個斷點出現的條件，只有當條件為真時，程式才會暫停執行。右面還有一個watch視窗，可以檢視當前變數的值。
十、AJAX
前面已經提到，Firebug可以捕捉頁面的動態內容和其他DOM變化。如果你開啟這個示例檔案，點選頁面上的連結後，在瀏覽器中檢視原始碼，你會發現什麼也沒有改變，原始碼中依然包含那個連結。但是，如果你在Firebug中檢視原始碼，你會發現DOM已經發生了變化，"Hello World"已經被包括在內了。這就是Firebug的核心功能之一，沒有它，AJAX的請求和回應就是不可見的。有了它，你可以看到送出的和收到的文字，已經相應的頭資訊。在Net標籤中，你還能監控每個請求/回應各自所花費的時間。
Net標籤中的XHR功能，對檢視AJAX操作特別有用。如果你點選每個伺服器端回應前的加號，你就會看到伺服器端回應的頭資訊和內容。
當透過XMLHttpRequest物件向伺服器端發出一個請求時，Firebug會記錄請求的POST或GET內容，以及回應的頭資訊和內容。使用Net標籤中的XHR功能，就可以看到這些內容。它會列出所有伺服器的回應，以及所花費的時間。點選前面的+號，如果是GET請求，會顯示三個標籤；如果是POST請求，會顯示4個標籤：
Params: 顯示請求URL中所包含的name/value對。
Headers: 顯示請求和回應的頭資訊。
Response: 顯示實際從伺服器收到的資訊。
Post：顯示從透過POST請求，送到伺服器的資訊。（此項GET請求不包括。）
這四個標籤對編寫和除錯程式很有用。檢查POST和Params標籤，確定你的請求被正確地發出了。檢查Response標籤檢視返回的格式，確定相應的Javascript處理函式應該如何編寫。
十一、附註
（完）