控制臺(tái)（Console）是Firebug的第一個(gè)面板，也是最重要的面板，主要作用是顯示網(wǎng)頁加載過程中產(chǎn)生各類信息。

一、顯示信息的命令

Firebug內(nèi)置一個(gè)console對(duì)象，提供5種方法，用來顯示信息。

最簡(jiǎn)單的方法是console.log()，可以用來取代alert()或document.write()。比如，在網(wǎng)頁腳本中使用console.log("Hello World")，加載時(shí)控制臺(tái)就會(huì)自動(dòng)顯示如下內(nèi)容。

另外，根據(jù)信息的不同性質(zhì)，console對(duì)象還有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");

占位符

console對(duì)象的上面5種方法，都可以使用printf風(fēng)格的占位符。不過，占位符的種類比較少，只支持字符（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）和對(duì)象（%o）四種。

比如，

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

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

%o占位符，可以用來查看一個(gè)對(duì)象內(nèi)部情況。比如，有這樣一個(gè)對(duì)象：

　　var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黃色";

然后，對(duì)它使用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();

console.dir()

console.dir()可以顯示一個(gè)對(duì)象所有的屬性和方法。

比如，現(xiàn)在為第二節(jié)的dog對(duì)象，添加一個(gè)bark()方法。

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

然后，顯示該對(duì)象的內(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.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ì)顯示一張性能分析表，如下圖。