JS调试console控制台命令

最新推荐文章于 2025-07-25 11:45:06 发布

原创最新推荐文章于 2025-07-25 11:45:06 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#firebug #控制台 #javascript

Web前端专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了JavaScript调试中的console控制台命令，包括显示信息、使用占位符、分组显示、查看对象信息、显示节点内容、判断变量真伪及计时功能等，帮助开发者更高效地进行代码调试。

console其实就是控制台，是Firebug的第一个面板，主要的作用就是在网页加载过程中产生各类信息。

常用的 console.log() 方法，可以替代 alert() 和 document.write() 方法，来测试某段代码是否运行或者赋值是否正确。本文就控制台的其它方法做一个简单的解释

1、显示信息

显示信息最常用的就是前面提到的console.log()方法，它的作用就是将一般的消息传到控制台上

var test001 = 'TEST';
console.log(test001<span style="font-family: Arial, Helvetica, sans-serif;">);</span>

执行后，会在控制台上看到打印出来的字符串TEST。

这个方法还可以打印一个对象或者函数，例如：

function fun(){
  var param = 1;
}
var test002 = new fun();
console.log(test002);

执行之后，控制台会将fun对象的实例打印出来。

除了 console.log(0 ，根据信息性质的不同，还有四种显示信息的方法

console.info('输出信息性的信息');
console.warn('输出警告消息');
console.debug('输出出错信息');
console.error('输出错误提示');

执行之后，效果如图所示

2、占位符

支持的占位符包括，字符（%s）、整数（%d或%i）、浮点数（%f）、对象（%o）四种。

%o对象占位符的事例代码如下：

var test003 = {};
test003.type1 = 'TYPE1';
test003.type2 = 'TYPE2';
console.log('%o', test003);

执行之后，控制台返回对象的内部情况 Object{ type1="TYPE1",type2="TYPE2"}

3、分组显示

如果信息太多，可以利用console.group() 和 consolegroupEnd() 分组显示信息，方便对数据进行分类。

// 第一个分组
console.group('分组A');
   console.log('A1');
   console.log('A2');
   console.log('A3');
console.groupEnd();

// 第二个分组
console.group('分组B');
   console.log('B1');
   console.log('B2');
   console.log('B3');
console.groupEnd();

执行之后，效果如图

点击分组标题，可以折叠或者展开组内信息

4、查看对象的信息

console.dir() 这个命令的作用是输出一个对象内的所有属性

var test004 = {
    type1:'AAA',
    type2:'BBB',
    type3:'CCC'
};
console.dir(test004)

在Chrome中，会显示该Object，展开显示各个属性，一些隐藏的属性也会线束出来

在Firebug中，会直接打印出，代码中设置的三个属性

5、显示某个节点的内容

console.dirxml() 这个命令的作用是显示某个节点所包含的html或者xml代码，例如：

<div id="test005">
    <ul>
        <li>AAA</li>
        <li>BBB</li>
        <li>CCC</li> 
    </ul>
</div>

假如html中有这么一段代码，此时在控制台执行

var test005Id = document.getElementById("test005");
console.dirxml(test005Id);

会输出dom文档书

6、判断变量是否是真

console.assert() 这个命令判断表达式或者变量

如果判断表达式为否，则在控制台显示错误信息。

7、计时功能

console.time() 和 console.timeEnd() 用来显示代码运行的时间

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

执行代码后，在控制台会输出【控制台计时器一: 728.11ms】字样，前面带蓝色叹号