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的圖...