javascript console 函数详解 js开发调试的利器

Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象 可以输出信息到 Console 窗口中。

使用 alert 不是一样可以显示信息，调试程序吗？alert 弹出窗口会中断程序， 如果要在循环中显示信息，手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好，看完后面 console 的介绍就知道了。

方法/步骤

1.  

   控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要作用是显示网页加载过程中产生各类信息。

   一、显示信息的命令

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

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

   
2.  

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

   比如，在网页脚本中插入下面四行：

   　　console.info("这是info");

   　　console.debug("这是debug");

   　　console.warn("这是warn");

   　　console.error("这是error");

   
3.  

   占位符

   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);

   

   
4.  

   分组显示

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

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

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

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

   　　console.groupEnd();

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

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

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

   　　console.groupEnd();

   

   
5.  

   console.dir()

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

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

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

   然后，显示该对象的内容，

   　　console.dir(dog);

   
6.  

   console.dirxml()

   console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

   比如，先获取一个表格节点，

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

   然后，显示该节点包含的代码。

   　　console.dirxml(table);

   
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();

   控制台会显示一张性能分析表，如下图。