console对象与控制台

Posted 2020-08-18

原文地址：https://wangdoc.com/javascript/

console对象

console对象是javascript的原生对象。
console的常见用途有两个。

• 调试程序，显示网页代码运行时的错误信息。
• 提供一个命令行接口，用来与网页代码互动。
  console对象的浏览器实现，包含在浏览器自带的开发工具中。Chrome可以通过Option + Command + i快捷打开。
  打开开发者工具以后，顶端有多个面板。
• Elements：查看网页的html源码和CSS代码。
• Resources：查看网页加载的各种资源文件（比如：代码文件、字体文件、CSS文件等），以及在硬盘上创建的各种内容（比如：本地缓存、Cookie、Local Storage等）。
• Network：查看网页的HTTP通信情况。
• Sources：查看网页加载的脚本源码。
• Timeline：查看各种网页行为随时间变化的情况。
• performance：查看网页的性能情况，比如CPU和内存消耗。

• Console：用来运行JavaScript命令。

  console对象的静态方法

  console.log(),console.info(),console.debug()

  console.log方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。

console.log("Hello World");
console.log("a", "b", "c");

如果第一个参数是格式字符串（使用了格式占位符），console.log方法将依次用后面的参数替换占位符，然后再进行输出。

console.log("%s + %s = %s", 1, 2, 3);

console.log方法支持以下占位符，不同类型的数据必须使用对应的占位符。

• %s字符串
• %d整数
• %i整数
• %f浮点数
• %o对象的链接
• %cCSS格式字符串

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

上述代码运行后，输出的内容将显示为黄底红字。
console.info是console.log方法的别名，用法完全一样。
console.debug方法与console.log方法类似，会在控制台输出调试信息。但是，默认情况下，console.debug输出的信息不会显示，只有在打开显示级别在verbose的情况才会显示。
console对象的所有方法，都可以被覆盖。因此可以按照自己的需要，定义console.log方法。

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

console.table()

对于某些复合类型的数据，console.table方法可以将其转为表格显示。

console.count()

console.count方法用于计数，输出它被调用了多少次。

console.dir()，console.dirxml()

console.dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。

console.time()，console.timeEnd()

这两个方法用于计时，可以算出一个操作所花费的准确时间。

console.time("Array initialize");
var array = new Array(10000);
for (let i = array.length -1; i >= 0; i--) {
    array[i] = new Object();
}
console.timeEnd("Array initialize")