js调试工具console方法详解-优快云博客

本文介绍JavaScript中使用console进行日志记录的各种技巧，包括基本的日志输出、占位符使用、信息分组展示、对象信息查看、节点内容显示、变量真值判断、函数调用追踪、计时功能以及性能分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、显示信息的方法

最常用的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();

效果：