萝卜青菜各有所爱------console系列详解

小鱼儿 2023-02-25 02:28 1阅读 0赞

### 前言 ###

作为一名前端开发人员，经常会用console.log或者console.info，下边是所有的console介绍。

Console 对象用于 JavaScript 调试。

JavaScript 原生中默认是没有 Console 对象,这是宿主对象（也就是游览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。

Console 对象常见的两个用途：

*  显示网页代码运行时的错误信息。
 *  提供了一个命令行接口，用来与网页代码互动。

以 Chrome浏览器为例，我们可以通过按 F12 或者 Control+Shift+i（PC平台）/ Alt+Command+i（Mac平台）来打开 Console 窗口。

![format_png][]

### Console 对象方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th style="width:386px;">描述</th> 
   <th style="width:390px;">实例</th> 
  </tr> 
  <tr> 
   <td>assert()</td> 
   <td style="width:386px;">ssert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。</td> 
   <td style="width:390px;"> <pre>// 实例
console.assert(true === false, "判断条件不成立")
// Assertion failed: 判断条件不成立</pre> </td> 
  </tr> 
  <tr> 
   <td>clear()</td> 
   <td style="width:386px;">清除当前控制台的所有输出，将光标回置到第一行。</td> 
   <td style="width:390px;"> <pre>console.clear()</pre> </td> 
  </tr> 
  <tr> 
   <td>count()</td> 
   <td style="width:386px;">用于计数，输出它被调用了多少次。</td> 
   <td style="width:390px;"> <pre>(function() {
  for (var i = 0; i &lt; 5; i++) { 
    console.count('count'); 
  }
})();</pre> </td> 
  </tr> 
  <tr> 
   <td>error()</td> 
   <td style="width:386px;">输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。</td> 
   <td style="width:390px;"> <pre>console.error("Error: %s (%i)", "Server is not responding",500)</pre> </td> 
  </tr> 
  <tr> 
   <td>group()</td> 
   <td style="width:386px;">用于将显示的信息分组，可以把信息进行折叠和展开。</td> 
   <td style="width:390px;"> <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 style="width:386px;">与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。</td> 
   <td style="width:390px;"> <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 style="width:386px;">结束内联分组</td> 
   <td style="width:390px;"> <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 style="width:386px;">console.log 别名，输出信息</td> 
   <td style="width:390px;"> <pre>console.info("runoob")</pre> </td> 
  </tr> 
  <tr> 
   <td>log()</td> 
   <td style="width:386px;">输出信息</td> 
   <td style="width:390px;"> <pre>console.log("runoob")</pre> </td> 
  </tr> 
  <tr> 
   <td>table()</td> 
   <td style="width:386px;">将复合类型的数据转为表格显示。</td> 
   <td style="width:390px;"> <pre>var arr= [ 
         { num: "1"},
         { num: "2"}, 
         { num: "3" }
    ];
console.table(arr);

###  常用 Console 调试命令 ###

**实例**

![format_png 1][]

最常用的就是 console.log 了。

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

<table> 
 <thead> 
  <tr> 
   <th>占位符</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>%s</td> 
   <td>字符串</td> 
  </tr> 
  <tr> 
   <td>%d or %i</td> 
   <td>整数</td> 
  </tr> 
  <tr> 
   <td>%f</td> 
   <td>浮点数</td> 
  </tr> 
  <tr> 
   <td>%o</td> 
   <td>可展开的DOM</td> 
  </tr> 
  <tr> 
   <td>%O</td> 
   <td>列出DOM的属性</td> 
  </tr> 
  <tr> 
   <td>%c</td> 
   <td>根据提供的css样式格式化字符串</td> 
  </tr> 
 </tbody> 
</table>

**实例**

![format_png 2][]

[format_png]: /images/20230209/6c28399ab11d47da9613634eca1b35e9.png
[format_png 1]: /images/20230209/56851dc7d31a4dc1b6a4cc3fef6202f6.png
[format_png 2]: /images/20230209/d95f7e5281b045e89d421a9aa216736e.png