fireBug使用指南

聽說，對於網頁開發人員來講，Firebug是Firefox瀏覽器中最好的插件之一。

我最近就在學習怎麼使用Firebug，網上找到一篇針對初學者的教程，感受比較有用，就翻譯了出來。

=================

Firebug入門指南

做者：Estelle Weyl

原文網址：http://www.evotech.net/blog/2007/06/introduction-to-firebug/

譯者：阮一峯

本文是Firebug的一個概覽，並不對它的全部特性進行詳盡解釋。不過，本文的內容對一個新手來講，應該是足夠了。

目錄

1、安裝Firebug
2、打開和關閉Firebug
3、Firebug窗口概覽
4、隨時編輯頁面
5、用Firebug處理CSS
6、盒狀模型
7、評估下載速度
8、DOM
9、Javascript調試
10、AJAX
11、附註

1、安裝Firebug

Firebug在Firefox瀏覽器中運行。另外有一個Firebug lite版本，能夠經過javascript調用，包含在頁面中，從而在其餘非Firefox瀏覽器中使用。本文不涉及這個版本。

安裝Firebug，請訪問Firebug下載頁面。點擊該頁面右邊欄中部巨大的橙黃色按鈕便可。你也能夠在Mozilla的FireFox Add-ons站點下載它。安裝後只要從新啓動FireFox，就可使用了。

若是你已經安裝過了，那麼請檢查是否更新到了最新版本。打開Firefox的"Tools"菜單，選擇"Add-ons"命令，而後在彈出窗口中點擊左下角的"Find Updates"按鈕。

2、打開和關閉Firebug

在Firebug網站上，能夠找到它的快捷鍵設置。我最常使用如下三種方法：

* 打開Firebug：按F12，或者點擊瀏覽器狀態欄右邊的綠色標誌。

* 關閉Firebug：按F12，或者點擊瀏覽器狀態欄右邊的綠色標誌，或者點擊Firebug窗口右上角的紅色關閉標誌。

* 在單獨窗口中打開Firebug：點擊firebug窗口右上角的紅色箭頭標識，或者使用Ctrl+F12/⌘+F12按鈕。

Firebug的相關設置：

* 固定Firebug在新窗口打開：先打開firebug，點擊左上角的bug標誌，選擇options菜單中的"Always Open in New Window"設置。

* 增長/縮小字體大小：先打開firebug，點擊左上角的bug標誌，選擇"Text Size"命令。每次字體變化的幅度很是小，你可能須要使用屢次。

* 限制只對某些站點使用Firebug：先右擊瀏覽器狀態上的green check mark標誌，選擇"disable Firebug"命令。而後，再右擊這個已經變灰的標誌，選擇"Allowed Sites..."命令，增長容許Firebug生效的域名。

3、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調試頗有用。

4、隨時編輯頁面

在HTML標籤中，點擊窗口上方的"inspect"命令，而後再選擇頁面中的文本節點，你能夠對其進行修改，修改結果會立刻反應在頁面中。

Firebug同時是源碼瀏覽器和編輯器。全部HTML、CSS和Javascript文件中的對象，均可以用單擊或雙擊進行編輯。當你輸入完畢，瀏覽器中的頁面馬上會發生相應變化，你能夠獲得瞬時反饋。DOM瀏覽器容許你對文檔結構進行完全的編輯，不侷限於文本節點。在HTML標籤中，點擊窗口上部"inspect"命令旁邊的"edit"命令，下方的窗口就會馬上變成一個黑白的文本編輯窗口，你能夠對HTML源代碼進行任意編輯。在CSS標籤中，Firebug會自動補全你的輸入。在DOM標籤中，當你按Tab鍵時，Firebug會自動補全屬性名。

5、用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，而後就會出現一個空白的屬性名輸入框，完成輸入後則會出現一個空白的屬性值。

6、盒狀模型

當你在HTML標籤中，點擊一個元素時，左面窗口顯示HTML代碼，右面窗口顯示該元素的CSS。在CSS窗口上方，有一個layout按鈕，點擊後會展現與該元素相關的方塊模型，包括padding、margin和border的值。要查看每個元素的這三項值，只需點擊"inspect"按鈕，而後用鼠標懸停在頁面中該元素的上方。

7、評估下載速度

Net標籤中圖形化了頁面中全部http請求所用的時間。使用這個功能，必須打開Network monitoring，默認設置就是打開，可是你能夠在"options"下拉菜單中關閉這個選項。你能夠用這項功能評估javascript文件下載，佔用整個頁面顯示的時間。

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

在1.0.5版之後，你能夠單獨查看HTML文件、CSS文件、圖像文件等各自下載的時間。

8、DOM

DOM標籤提供頁面上全部物體的全部屬性的信息。Firebug最酷的功能之一是，它能夠動態修改頁面，反映在瀏覽器窗口，可是若是使用瀏覽器自帶的查看源碼功能，你會發現源碼並無改變。

9、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窗口，能夠查看當前變量的值。

10、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處理函數應該如何編寫。

 

---

 

 

 

控制檯（Console）是Firebug的第一個面板，也是最重要的面板，主要做用是顯示網頁加載過程當中產生各種信息。

1、顯示信息的命令

Firebug內置一個console對象，提供5種方法，用來顯示信息。

最簡單的方法是console.log()，能夠用來取代alert()或document.write()。好比，在網頁腳本中使用console.log("Hello World")，加載時控制檯就會自動顯示以下內容。

另外，根據信息的不一樣性質，console對象還有4種顯示信息的方法，分別是通常信息console.info()、除錯信息console.debug()、警告提示console.warn()、錯誤提示console.error()。

好比，在網頁腳本中插入下面四行：

　　console.info("這是info");

　　console.debug("這是debug");

　　console.warn("這是warn");

　　console.error("這是error");

加載時，控制檯會顯示以下內容。

能夠看到，不一樣性質的信息前面有不一樣的圖標，而且每條信息後面都有超級連接，點擊後跳轉到網頁源碼的相應行。

2、佔位符

console對象的上面5種方法，均可以使用printf風格的佔位符。不過，佔位符的種類比較少，只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。

好比，

　　console.log("%d年%d月%d日",2011,3,26);

　　console.log("圓周率是%f",3.1415926);

%o佔位符，能夠用來查看一個對象內部狀況。好比，有這樣一個對象：

　　var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黃色";

而後，對它使用o%佔位符。

　　console.log("%o",dog);

3、分組顯示

若是信息太多，能夠分組顯示，用到的方法是console.group()和console.groupEnd()。

　　console.group("第一組信息");

　　　　console.log("第一組第一條");

　　　　console.log("第一組第二條");

　　console.groupEnd();

　　console.group("第二組信息");

　　　　console.log("第二組第一條");

　　　　console.log("第二組第二條");

　　console.groupEnd();

點擊組標題，該組信息會摺疊或展開。

4、console.dir()

console.dir()能夠顯示一個對象全部的屬性和方法。

好比，如今爲第二節的dog對象，添加一個bark()方法。

　　dog.bark = function(){alert("汪汪汪");};

而後，顯示該對象的內容，

　　console.dir(dog);

5、console.dirxml()

console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml代碼。

好比，先獲取一個表格節點，

　　var table = document.getElementById("table1");

而後，顯示該節點包含的代碼。

　　console.dirxml(table);

6、console.assert()

console.assert()用來判斷一個表達式或變量是否爲真。若是結果爲否，則在控制檯輸出一條相應信息，而且拋出一個異常。

好比，下面兩個判斷的結果都爲否。

　　var result = 0;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

7、console.trace()

console.trace()用來追蹤函數的調用軌跡。

好比，有一個加法器函數。

　　function add(a,b){

　　　　return a+b;

　　}

我想知道這個函數是如何被調用的，在其中加入console.trace()方法就能夠了。

　　function add(a,b){

　　　　console.trace();

　　　　return a+b;

　　}

假定這個函數的調用代碼以下：

　　var x = add3(1,1);

　　function add3(a,b){return add2(a,b);}

　　function add2(a,b){return add1(a,b);}

　　function add1(a,b){return add(a,b);}

運行後，會顯示add()的調用軌跡，從上到下依次爲add()、add1()、add2()、add3()。

8、計時功能

console.time()和console.timeEnd()，用來顯示代碼的運行時間。

　　console.time("計時器一");

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd("計時器一");

9、性能分析

性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()。

假定有一個函數Foo()，裏面調用了另外兩個函數funcA()和funcB()，其中funcA()調用10次，funcB()調用1次。

　　function Foo(){

　　　　for(var i=0;i<10;i++){funcA(1000);}

　　　　funcB(10000);

　　}

　　function funcA(count){

　　　　for(var i=0;i<count;i++){}

　　}

　　function funcB(count){

　　　　for(var i=0;i<count;i++){}

　　}

而後，就能夠分析Foo()的運行性能了。

　　console.profile('性能分析器一');

　　Foo();

　　console.profileEnd();

控制檯會顯示一張性能分析表，以下圖。

標題欄提示，一共運行了12個函數，共耗時2.656毫秒。其中funcA()運行10次，耗時1.391毫秒，最短運行時間0.123毫秒，最長0.284毫秒，平均0.139毫秒；funcB()運行1次，耗時1.229ms毫秒。

除了使用console.profile()方法，firebug還提供了一個"概況"（Profiler）按鈕。第一次點擊該按鈕，"性能分析" 開始，你能夠對網頁進行某種操做（好比ajax操做），而後第二次點擊該按鈕，"性能分析"結束，該操做引起的全部運算就會進行性能分析。

10、屬性菜單

控制檯面板的名稱後面，有一個倒三角，點擊後會顯示屬性菜單。

默認狀況下，控制檯只顯示Javascript錯誤。若是選中Javascript警告、CSS錯誤、XML錯誤都送上，則相關的提示信息都會顯示。

這裏比較有用的是"顯示XMLHttpRequests"，也就是顯示ajax請求。選中之後，網頁的全部ajax請求，都會在控制檯面板顯示出來。

好比，點擊一個YUI示例，控制檯就會告訴咱們，它用ajax方式發出了一個GET請求，http請求和響應的頭信息和內容主體，也均可以看到。