JavaScript中的console对象及其方法-学习笔记

1 console对象与浏览器Console面板

console对象是JavaScript的原生对象，而console对象的浏览器实现，已被包含在浏览器自带的开发工具当中。如下图所示，这就是浏览器的Console面板，又被称为控制台。

建议：推荐直接使用ctrl+shift+I或者ctrl+shift+J，像F12容易和电脑的功能键冲突，需要辅助Fn键才能使用。

控制台的用途主要有以下两点：

1. 定位错误：这里可以显示代码运行时的输出信息，代码运行发生错误时，会显示具体是哪一行代码出现的错误；
2. 作为一个命令行窗口：可以向其中键入各种命令（本文不会涉及控制台的命令API）。

除了Console面板（控制台），以下这几个面板也比较常用：

• Element：用来查看网页的HTML源码和CSS代码。
• Sources：查看加载的各种资源文件（比如代码文件等）以及硬盘上各种内容（就是可以查看硬盘上存储的文件，类似于Windows的文件资源管理器）。
• Network：查看网页的HTTP通信情况。
• Performance：查看网页的性能情况，比如CPU和内存消耗。

2 console对象方法

console对象提供了一些静态方法，让我们的程序在控制台输出一些与程序运行相关的特定的信息，例如运行结果、错误信息、程序运行时间等等。下面我会总结几个最常用的，并大致做了一个分类（自己做了一个分类😁）：

1. 输出信息的基本方法：console.log()、console.info()、console.debug()、console.warn()、console.error()。

   这几个方法中最常用的就是console.log()方法，我们重点来看一下这个方法，直接上例子吧：
   

   占位符分以下几种类型，代表了可以替换的数据的类型：

   • %s：字符串
   • %d：整数
   • %i：整数
   • %f：浮点数
   • %o：对象
   • %c：CSS代码，并对参数内容进行css渲染。

   示例1：输出结果看代码中的注释。

   var number = 11 * 9;
   var color = 'red';
   
   console.log('%d %s balloons', number, color);// 99 red balloons
   

   示例2：%c为占位符时，对应的参数必须时css代码，并对输出内容进行css渲染。

   console.log(
     '%cThis text is styled!',
     'color: red; background: yellow; font-size: 24px;'
   )
   

   控制台输出效果如下所示：黄底黑字，字体大小为24像素的渲染效果。

   

   至于其他几个都和console.log()用法是一样的，只是输出内容略有不同而已：下面的仅仅做了个简单的测试，分别输出了一个单词。
   

   • console.info()：和log一样。

   • console.warn()：会在输出信息的前面加一个黄色三角。

   • console.error()：会在输出信息的前面加一个红色的叉，同时，还会高亮显示输出文字和错误发生的堆栈。

   • console.debug()：用于在控制台输出调试信息。

     如下图所示，只有勾选了Verbose选项才会显示console.debug()输出的信息。

     

2. 以表格形式输出复合类型的数据的方法：console.table()。如下例子会以表格的形式在控制台输出变量language。

   var languages = [
     { name: "JavaScript", fileExtension: ".js" },
     { name: "TypeScript", fileExtension: ".ts" }
   ];
   
   console.table(languages);
   

   运行效果如下：

   

3. 用于计时的方法：console.time()与console.timeEnd()。如下可以输出数组初始化所用时间。

   console.time('数组初始化');
   var array= new Array(1000000);
   for (var i = array.length - 1; i >= 0; i--) {
     array[i] = new Object();
   };
   console.timeEnd('数组初始化');
   

   运行效果如下：

   

4. 清除控制台所有输出内容的方法：console.clear()，它清除当前控制台的所有输出，将光标回置到第一行。
   注意：如下图：若用户选中了控制台的【Preserve log】选项，该方法将不起作用。

   

3 自定义console对象方法

由于console对象的所有方法都可以被覆盖，因此可以按照自己的需要自定义console对象方法。

实现方法示例：可为输出结果加上当前时间，输出结果见注释。

['log', 'info', 'warn', 'error'].forEach(function(method) {
  console[method] = console[method].bind(
    console,
    new Date().toISOString()
  );
});

console.log("出错了！");// 2021-07-27T15:55:25.536Z 出错了！

4 debugger语句

debugger语句主要用于除错，作用是设置断点。如果有正在运行的除错工具，程序运行到debugger语句时会自动停下。

示例代码如下：

for(var i = 0; i < 5; i++){
  console.log(i); debugger;
}

这个在chrome中运行效果如下：当代码运行到debugger语句时，就会暂停运行，自动打开脚本源码界面。我们可以点击下图中的功能按钮对代码进行一步步执行，这里不再赘述细节。