console对象与控制台

原文地址: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.infoconsole.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")

猜你喜欢

转载自www.cnblogs.com/chris-jichen/p/10039847.html