控制台&＃xff08;Console&＃xff09;是Firebug的第一个面板&＃xff0c;也是最重要的面板&＃xff0c;主要作用是显示网页加载过程中产生各类信息。

一、显示信息的命令

Firebug内置一个console对象&＃xff0c;提供5种方法&＃xff0c;用来显示信息。

最简单的方法是console.log()&＃xff0c;可以用来取代alert()或document.write()。比如&＃xff0c;在网页脚本中使用console.log("Hello World")&＃xff0c;加载时控制台就会自动显示如下内容。

另外&＃xff0c;根据信息的不同性质&＃xff0c;console对象还有4种显示信息的方法&＃xff0c;分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

比如&＃xff0c;在网页脚本中插入下面四行&＃xff1a;

　　console.info("这是info");

　　console.debug("这是debug");

　　console.warn("这是warn");

　　console.error("这是error");

占位符

console对象的上面5种方法&＃xff0c;都可以使用printf风格的占位符。不过&＃xff0c;占位符的种类比较少&＃xff0c;只支持字符&＃xff08;%s&＃xff09;、整数&＃xff08;%d或%i&＃xff09;、浮点数&＃xff08;%f&＃xff09;和对象&＃xff08;%o&＃xff09;四种。

比如&＃xff0c;

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

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

%o占位符&＃xff0c;可以用来查看一个对象内部情况。比如&＃xff0c;有这样一个对象&＃xff1a;

　　var dog &＃61; {} ;

　　dog.name &＃61; "大毛" ;

　　dog.color &＃61; "黄色";

然后&＃xff0c;对它使用o%占位符。

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

分组显示

如果信息太多&＃xff0c;可以分组显示&＃xff0c;用到的方法是console.group()和console.groupEnd()。

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

　　　　console.log("第一组第一条");

　　　　console.log("第一组第二条");

　　console.groupEnd();

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

　　　　console.log("第二组第一条");

　　　　console.log("第二组第二条");

　　console.groupEnd();

console.dir()

console.dir()可以显示一个对象所有的属性和方法。

比如&＃xff0c;现在为第二节的dog对象&＃xff0c;添加一个bark()方法。

　　dog.bark &＃61; function(){alert("汪汪汪");};

然后&＃xff0c;显示该对象的内容&＃xff0c;

　　console.dir(dog);

console.dirxml()

console.dirxml()用来显示网页的某个节点&＃xff08;node&＃xff09;所包含的html/xml代码。

比如&＃xff0c;先获取一个表格节点&＃xff0c;

　　var table &＃61; document.getElementById("table1");

然后&＃xff0c;显示该节点包含的代码。

　　console.dirxml(table);

console.trace()

console.trace()用来追踪函数的调用轨迹。

比如&＃xff0c;有一个加法器函数。

　　function add(a,b){

　　　　return a&＃43;b;

　　}

我想知道这个函数是如何被调用的&＃xff0c;在其中加入console.trace()方法就可以了。

　　function add(a,b){

　　　　console.trace();

　　　　return a&＃43;b;

　　}

假定这个函数的调用代码如下&＃xff1a;

　　var x &＃61; 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);}

运行后&＃xff0c;会显示add()的调用轨迹&＃xff0c;从上到下依次为add()、add1()、add2()、add3()。

计时功能

console.time()和console.timeEnd()&＃xff0c;用来显示代码的运行时间。

　　console.time("计时器一");

　　for(var i&＃61;0;i<1000;i&＃43;&＃43;){

　　　　for(var j&＃61;0;j<1000;j&＃43;&＃43;){}

　　}

　　console.timeEnd("计时器一");

性能分析

性能分析&＃xff08;Profiler&＃xff09;就是分析程序各个部分的运行时间&＃xff0c;找出瓶颈所在&＃xff0c;使用的方法是console.profile()。

假定有一个函数Foo()&＃xff0c;里面调用了另外两个函数funcA()和funcB()&＃xff0c;其中funcA()调用10次&＃xff0c;funcB()调用1次。

　　function Foo(){

　　　　for(var i&＃61;0;i<10;i&＃43;&＃43;){funcA(1000);}

　　　　funcB(10000);

　　}

　　function funcA(count){

　　　　for(var i&＃61;0;i

　　}

　　function funcB(count){

　　　　for(var i&＃61;0;i

　　}

然后&＃xff0c;就可以分析Foo()的运行性能了。

　　console.profile(&＃39;性能分析器一&＃39;);

　　Foo();

　　console.profileEnd();

控制台会显示一张性能分析表&＃xff0c;如下图。