js调试工具console方法详解

一、显示信息的方法

最常用的console.log(),一般用来调试。

console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

效果：

 

二、占位符

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o

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

效果：

三、信息分组

console.group("第一组信息");
    console.log("第一组第一条");
    console.log("第一组第二条");
console.groupEnd();
console.group("第二组信息");
   console.log("第二组第一条");
   console.log("第二组第二条");
console.groupEnd();

效果：

四、查看对象的信息

var obj = {
    name: 'ali',
    age: '20',
    showName: function () {
       alert(this.name);
    }
}
console.dir(obj);

效果：

 

五、显示某个节点的内容

var info = document.getElementById('info');
console.dirxml(info);

效果：

六、判断变量是否是真

var result = 1;
　　 console.assert( result );
　　 var year = 2014;
　　 console.assert(year == 2018 );

效果：

七、追踪函数的调用轨迹

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

效果：

 

八、计时功能

console.time("控制台计时器一");
for(var i=0;i<1000;i++){
　　for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台计时器一");

效果：

九、的性能分析

function All(){
   alert(11);
　 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++){}
}
console.profile('性能分析器');
All();
console.profileEnd();

效果：

chrome貌似不起作用，盗了一张firebug的图...