Javascript中Console蕴含的各种方法全解析

摘要

有关Javascript中的Console有很多种花样可以玩出来，什么？你只用Console.log，那就太out了，本篇文章就来将Console命令中的各种含义都来统统解释归纳一下，让人用得更明白，发挥出Console语令更大的功效……

开篇寄语

有关Javascript中的Console有很多种花样可以玩出来，什么？你只用Console.log，那就太out了，本篇文章就来将Console命令中的各种含义都来统统解释归纳一下，让人用得更明白，发挥出Console语令更大的功效。

前情提要

• 《玩转控制台，让console.log千变万化》

内容详情

在浏览器的控制台输入console.info(console)或者console.log(info)，回车后，就能看到打印出以下内容：

包含了console类中的各种命令。

assert: ƒ assert()
clear: ƒ clear()
context: ƒ context()
count: ƒ count()
countReset: ƒ countReset()
debug: ƒ debug()
dir: ƒ dir()
dirxml: ƒ dirxml()
error: ƒ error()
group: ƒ group()
groupCollapsed: ƒ groupCollapsed()
groupEnd: ƒ groupEnd()
info: ƒ info()
log: ƒ log()
memory: MemoryInfo {totalJSHeapSize: 10000000, usedJSHeapSize: 10000000, jsHeapSizeLimit: 2190000000}
profile: ƒ profile()
profileEnd: ƒ profileEnd()
table: ƒ table()
time: ƒ time()
timeEnd: ƒ timeEnd()
timeLog: ƒ timeLog()
timeStamp: ƒ timeStamp()
trace: ƒ trace()
warn: ƒ warn()

1. console.log()

第一个也是最常见的命令是 console.log() 命令。它接收一条消息并将结果打印到控制台。它还可以打印 JavaScript 对象、数组——JavaScript 中的所有数据类型。此外，它还负责格式化结果的输出以使其更易于跟踪。

2. console.error()

开发人员使用 console.log() 命令完成他们所做的大部分事情 - 包括将错误记录到控制台。但是你知道有一个特殊的控制台命令吗？它是 console.error() 命令。它与 console.log() 命令非常相似，只是它将您登录的内容包装在一个红色错误框中。

3. console.info()

此控制台命令对于向控制台输出信息特别有用，建议用该命令替换。

4. console.table()

这个命令可厉害了，最主要是很酷，能够输出一个表格，试举一例：

console.table(["orange", "apple", "grape"]);

打印效果如下图所示：

是不是很酷炫？

5. console.assert()

如果评估条件为假，此控制台命令将向控制台写入错误消息，试举一例：

console.assert(2 > 3, "It cannot be");

效果堪比console.error()。

6. console.clear()

此命令会为您清除控制台。

7. & 8. console.group() and console.groupEnd()

这两个控制台命令可用于将控制台中的内容组合在一起。

console.group() 用于启动组。该组将继续运行，直到遇到 console.groupEnd()。

9. console.warn()

在控制台中记录警告应该很容易！这就是 console.warn 命令存在的原因，会出现黄色叹号的标识。

10 & 11. console.time() 和 console.timeEnd()

有时您需要测量完成操作所需的时间。对于这种情况，您可以使用 console.time() 和 console.timeEnd() 函数。

您可以使用 console.time() 来启动计时器并使用 console.timeEnd() 来停止计时器。

console.time();

for (let i = 0; i < 4; i++) {
  console.log("number " + i);
}

console.timeEnd();

生成效果如下图所示：

12. console.count()

console.count() 方法记录了这个对 count() 的特定调用被调用的次数。

试举一例：

let user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");

打印出：

"bob: 1"
"alice: 1"
"alice: 2"
"alice: 3"

其他就不举例了，毕竟用的时候非常少。