Firebug是網(wǎng)頁開發(fā)的利器，能夠極大地提升工作效率。
但是，它不太容易上手。我曾經(jīng)翻譯過一篇《Firebug入門指南》，介紹了一些基本用法。今天，繼續(xù)介紹它的高級(jí)用法。
===================================
Firebug控制臺(tái)詳解
作者：阮一峰
出處：http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html
控制臺(tái)（Console）是Firebug的第一個(gè)面板，也是最重要的面板，主要作用是顯示網(wǎng)頁加載過程中產(chǎn)生各類信息。
一、顯示信息的命令
Firebug內(nèi)置一個(gè)console對象，提供5種方法，用來顯示信息。
最簡單的方法是console.log()，可以用來取代alert()或document.write()。比如，在網(wǎng)頁腳本中使用console.log("Hello World")，加載時(shí)控制臺(tái)就會(huì)自動(dòng)顯示如下內(nèi)容。
另外，根據(jù)信息的不同性質(zhì)，console對象還有4種顯示信息的方法，分別是一般信息console.info()、除錯(cuò)信息console.debug()、警告提示console.warn()、錯(cuò)誤提示console.error()。
比如，在網(wǎng)頁腳本中插入下面四行：
console.info("這是info");
console.debug("這是debug");
console.warn("這是warn");
console.error("這是error");
加載時(shí)，控制臺(tái)會(huì)顯示如下內(nèi)容。
可以看到，不同性質(zhì)的信息前面有不同的圖標(biāo)，并且每條信息后面都有超級(jí)鏈接，點(diǎn)擊后跳轉(zhuǎn)到網(wǎng)頁源碼的相應(yīng)行。
二、占位符
console對象的上面5種方法，都可以使用printf風(fēng)格的占位符。不過，占位符的種類比較少，只支持字符（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）和對象（%o）四種。
比如，
console.log("%d年%d月%d日",2011,3,26);
console.log("圓周率是%f",3.1415926);
%o占位符，可以用來查看一個(gè)對象內(nèi)部情況。比如，有這樣一個(gè)對象：
var dog = {} ;
dog.name = "大毛" ;
dog.color = "黃色";
然后，對它使用o%占位符。
console.log("%o",dog);
三、分組顯示
如果信息太多，可以分組顯示，用到的方法是console.group()和console.groupEnd()。
console.group("第一組信息");
console.log("第一組第一條");
console.log("第一組第二條");
console.groupEnd();
console.group("第二組信息");
console.log("第二組第一條");
console.log("第二組第二條");
console.groupEnd();
點(diǎn)擊組標(biāo)題，該組信息會(huì)折疊或展開。
四、console.dir()
console.dir()可以顯示一個(gè)對象所有的屬性和方法。
比如，現(xiàn)在為第二節(jié)的dog對象，添加一個(gè)bark()方法。
dog.bark = function(){alert("汪汪汪");};
然后，顯示該對象的內(nèi)容，
console.dir(dog);
五、console.dirxml()
console.dirxml()用來顯示網(wǎng)頁的某個(gè)節(jié)點(diǎn)（node）所包含的html/xml代碼。
比如，先獲取一個(gè)表格節(jié)點(diǎn)，
var table = document.getElementById("table1");
然后，顯示該節(jié)點(diǎn)包含的代碼。
console.dirxml(table);
六、console.assert()
console.assert()用來判斷一個(gè)表達(dá)式或變量是否為真。如果結(jié)果為否，則在控制臺(tái)輸出一條相應(yīng)信息，并且拋出一個(gè)異常。
比如，下面兩個(gè)判斷的結(jié)果都為否。
var result = 0;
console.assert( result );
var year = 2000;
console.assert(year == 2011 );
七、console.trace()
console.trace()用來追蹤函數(shù)的調(diào)用軌跡。
比如，有一個(gè)加法器函數(shù)。
function add(a,b){
return a+b;
}
我想知道這個(gè)函數(shù)是如何被調(diào)用的，在其中加入console.trace()方法就可以了。
function add(a,b){
console.trace();
return a+b;
}
假定這個(gè)函數(shù)的調(diào)用代碼如下：
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);}
運(yùn)行后，會(huì)顯示add()的調(diào)用軌跡，從上到下依次為add()、add1()、add2()、add3()。
八、計(jì)時(shí)功能
console.time()和console.timeEnd()，用來顯示代碼的運(yùn)行時(shí)間。
console.time("計(jì)時(shí)器一");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("計(jì)時(shí)器一");
九、性能分析
性能分析（Profiler）就是分析程序各個(gè)部分的運(yùn)行時(shí)間，找出瓶頸所在，使用的方法是console.profile()。
假定有一個(gè)函數(shù)Foo()，里面調(diào)用了另外兩個(gè)函數(shù)funcA()和funcB()，其中funcA()調(diào)用10次，funcB()調(diào)用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()的運(yùn)行性能了。
console.profile('性能分析器一');
Foo();
console.profileEnd();
控制臺(tái)會(huì)顯示一張性能分析表，如下圖。
標(biāo)題欄提示，一共運(yùn)行了12個(gè)函數(shù)，共耗時(shí)2.656毫秒。其中funcA()運(yùn)行10次，耗時(shí)1.391毫秒，最短運(yùn)行時(shí)間0.123毫秒，最長0.284毫秒，平均0.139毫秒；funcB()運(yùn)行1次，耗時(shí)1.229ms毫秒。
除了使用console.profile()方法，firebug還提供了一個(gè)"概況"（Profiler）按鈕。第一次點(diǎn)擊該按鈕，"性能分析" 開始，你可以對網(wǎng)頁進(jìn)行某種操作（比如ajax操作），然后第二次點(diǎn)擊該按鈕，"性能分析"結(jié)束，該操作引發(fā)的所有運(yùn)算就會(huì)進(jìn)行性能分析。
十、屬性菜單
控制臺(tái)面板的名稱后面，有一個(gè)倒三角，點(diǎn)擊后會(huì)顯示屬性菜單。
默認(rèn)情況下，控制臺(tái)只顯示Javascript錯(cuò)誤。如果選中Javascript警告、CSS錯(cuò)誤、XML錯(cuò)誤都送上，則相關(guān)的提示信息都會(huì)顯示。
這里比較有用的是"顯示XMLHttpRequests"，也就是顯示ajax請求。選中以后，網(wǎng)頁的所有ajax請求，都會(huì)在控制臺(tái)面板顯示出來。
比如，點(diǎn)擊一個(gè)YUI示例，控制臺(tái)就會(huì)告訴我們，它用ajax方式發(fā)出了一個(gè)GET請求，http請求和響應(yīng)的頭信息和內(nèi)容主體，也都可以看到。
[參考文獻(xiàn)]
* Firebug Tutorial - Logging, Profiling and CommandLine (Part I)
* Firebug Tutorial - Logging, Profiling and CommandLine (Part II)
（完）
</script>