05 关于console对象，你要知道的几件事情

墨蓝 2023-05-21 07:21 2阅读 0赞

### 写在前面 ###

做前端开发已经有一两年了吧，对于console对象你应该不陌生吧，那我猜你经常用的是console.log()方法，对于console其它的方法你还了解多少呢？这篇文章我们一起来看看console这个对象的另外一些方法，增加你的一些小技能。

### console介绍 ###

console对象其实并不是我们JS内置的对象，而是宿主对象，也就是浏览器对象提供给我们的内置对象，我们可以拿这个对象来调试我们的程序，console对象最大的用处就是这个了。但是除了调试程序之外，它还提供了一个命令行接口，用来和网页代码进行互动，但这个用途貌似被我们忽略很久了。

### console对象方法汇总 ###

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>实例</th> 
  </tr> 
  <tr> 
   <td>assert()</td> 
   <td>ssert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。</td> 
   <td> <pre>// 实例
console.assert(true === false, "判断条件不成立")
// Assertion failed: 判断条件不成立</pre> </td> 
  </tr> 
  <tr> 
   <td>clear()</td> 
   <td>清除当前控制台的所有输出，将光标回置到第一行。</td> 
   <td> <pre>console.clear()</pre> </td> 
  </tr> 
  <tr> 
   <td>count()</td> 
   <td>用于计数，输出它被调用了多少次。</td> 
   <td> <pre>(function() {
  for (var i = 0; i &lt; 5; i++) { 
    console.count('count'); 
  }
})();</pre> </td> 
  </tr> 
  <tr> 
   <td>error()</td> 
   <td>输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。</td> 
   <td> <pre>console.error("Error: %s (%i)", "Server is not responding",500)</pre> </td> 
  </tr> 
  <tr> 
   <td>group()</td> 
   <td>用于将显示的信息分组，可以把信息进行折叠和展开。</td> 
   <td> <pre>console.group('第一层');
  console.group('第二层');

console.log('error');
    console.error('error');
    console.warn('error');

console.groupEnd(); 
console.groupEnd();</pre> </td> 
  </tr> 
  <tr> 
   <td>groupCollapsed()</td> 
   <td>与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。</td> 
   <td> <pre>console.groupCollapsed('第一层');
  console.groupCollapsed('第二层');

console.log('error');
    console.error('error');
    console.warn('error');

console.groupEnd(); 
console.groupEnd();</pre> </td> 
  </tr> 
  <tr> 
   <td>groupEnd()</td> 
   <td>结束内联分组</td> 
   <td> <pre>console.group('Group One');
console.group('Group Two');

// some code

console.groupEnd(); // Group Two 结束
console.groupEnd(); // Group One 结束</pre> </td> 
  </tr> 
  <tr> 
   <td>info()</td> 
   <td>console.log 别名，输出信息</td> 
   <td> <pre>console.info("runoob")</pre> </td> 
  </tr> 
  <tr> 
   <td>log()</td> 
   <td>输出信息</td> 
   <td> <pre>console.log("runoob")</pre> </td> 
  </tr> 
  <tr> 
   <td>table()</td> 
   <td>将复合类型的数据转为表格显示。</td> 
   <td> <pre>var arr= [ 
         { num: "1"},
         { num: "2"}, 
         { num: "3" }
    ];
console.table(arr);

### console常用方法 ###

**1、常见的几种方法**

console.log('输出调试信息');
            console.info('输出一般信息');
            console.error('输出错误信息');
            console.warn('输出警告信息');

![20200429154930449.png][]

**2、信息分组**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70][]

**3、查看对象信息**

var myself = {
                name: 'X北辰北',
                url: 'www.xbeichen.cn',
                age: 25
            };
            console.dir(myself);

![20200429155051398.png][]

**4、显示某个节点的内容**

<div id="xbeichen">
            <h1>Hello World</h1>
            <span>用来测试显示节点内容的console对象方法</span>
        </div>
        <script>
            var dom = document.getElementById("xbeichen");
            console.dirxml(dom);
        </script>

![20200429155126416.png][]

**5、判断变量是否为真**

var data = 1;
            console.assert(data);
    
            var year = 2020;
            console.assert(year == 2019);

![20200429155205767.png][]

第一段代码中结果为真，所以没有输出任何信息，第二段由于结果为假，所以输出了异常信息。

**6、追踪函数的调用轨迹**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1][]

**7、计时功能**

console.time('计时器');
            for(var i = 0; i < 99; i++) {
                for(var m = 0; m < 1000; m++) {
                    //空循环
                }
            }
            console.timeEnd('计时器');

![20200429155312413.png][]

**8、性能分析**

![20200429155346852.png][]

**9、表格显示复合型数据**

var data = [{
                name: 'xbeichen',
                url: 'www.xbeichen.cn'
            }, {
                name: 'Geov',
                url: 'www.geov.online'
            }];
            console.table(data);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 2][]

### 总结 ###

以上就是关于console对象中我们常用的几个方法了，除了这些之外还有很多，希望大家自己去学习总结了。

[20200429154930449.png]: /images/20230521/9741845db0ec485b957f1ef990ccc097.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70]: /images/20230521/ba9b41e290fd4b40a6a84c70939ef9fb.png
[20200429155051398.png]: /images/20230521/d258b20e70744c8ebf847b491051abbb.png
[20200429155126416.png]: /images/20230521/304f64ef61b34c5ebe3df7576dbf85db.png
[20200429155205767.png]: https://img-blog.csdnimg.cn/20200429155205767.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200429155241925.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[20200429155312413.png]: https://img-blog.csdnimg.cn/20200429155312413.png
[20200429155346852.png]: https://img-blog.csdnimg.cn/20200429155346852.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200429155420923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70