JavaScript 控制台是帮助开发和调试我们的应用程序的宝贵工具。 使用控制台对象及其日志记录方法，调用 alert() 来调试和获取变量值的日子已经很长了。 最重要的是，由于 正在进行的标准 ，现代浏览器终于支持相同的方法集。 在这篇文章中，我们将探讨控制台 API 提供的一些主要方法。
日志记录
console.log 是我们用来将值记录到控制台的常用方法：
const name = 'Alligator';
console.log('Hello', name); // Hello Alligator
但我们也可以使用更多的日志记录方法，例如 warn、info 和 error：
console.info('Just FYI');
console.warn('Lookout!');
console.error('Boom 💣');
正如您从生成的控制台输出中看到的那样，使用 warn 或 error 方法还可以为我们提供堆栈跟踪：
您还可以使用 console.trace 触发堆栈跟踪：
function hello(name = 'Alligator') {
console.trace('name:', name);
return `Hello ${name}!`;
}
hello();
……哦，还有 console.debug，但它目前只是 console.log 的别名。
控制台.dir & 控制台.dirxml
console.dir 以一种很好的格式化方式打印出对象：
const fancyThings = {
car: '🏎️ Ferrari',
watch: '⌚ Cartier',
clothing: {
shoes: '👠 Christian Louboutin',
dress: '👗 Versace'
},
boat: '🛥️ Sunseeker'
}
console.dir(fancyThings);
至于 console.dirxml，它打印出一个 DOM 元素的标记。 例如：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<h1>hello</h1>
<script>
console.dirxml(document.body);
</script>
</body>
</html>
这将输出以下内容：
如果您愿意，您甚至可以使用 console.table 以表格格式更整齐地在控制台中显示数据。
断言
console.assert 方法是运行简单断言测试的简单方法。 如果第一个参数评估为 false，则断言失败，如果断言失败，则后续参数将打印到控制台：
// this will pass, nothing will be logged console.assert(2 == '2', '2 not == to "2"'); // this fails, '3 not === to "3"' will be logged console.assert(3 === '3', '3 not === to "3"');
清算
您可以使用 console.clear 清除控制台：
console.clear();
数数
console.count 方法用于计算使用提供的相同标签调用它的次数。 例如，这里有两个计数器，一个用于偶数值，一个用于奇数值：
[1, 2, 3, 4, 5].forEach(nb => {
if (nb % 2 === 0) {
console.count('even');
} else {
console.count('odd');
}
});
// odd: 1
// even: 1
// odd: 2
// even: 2
// odd: 3
定时
正如我们在 这篇短文 中所展示的，您可以使用 console.time 启动计时器，然后使用 console.endTime 结束它。 可选地，时间可以有一个标签：
console.time('fetching data');
fetch('https://jsonplaceholder.typicode.com/users')
.then(d => d.json())
.then(console.log);
console.timeEnd('fetching data');
// fetching data: 0.2939453125ms
// (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
请注意，如果您使用带有 console.time 的标签，则在调用 console.timeEnd 时必须传入相同的标签。
分组
使用 console.group 和 console.groupEnd 将控制台消息与可选标签组合在一起。 还要注意一个组是如何嵌套到另一个组中的：
console.group('🖍️ colors');
console.log('red');
console.log('orange');
console.group('HEX');
console.log('#FF4C89');
console.log('#7186FE');
console.groupEnd();
console.log('blue');
console.groupEnd();
这是生成的控制台输出：
奖励：给它一些风格
控制台日志记录可以使用特殊的 %c 分隔符设置样式：
console.log( 'Hello %cAlligator%c!', 'color: #008f68; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);', 'color: hotpink; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);' );
第一个 %c 之后的所有内容都将由第二个参数提供的字符串设置样式，然后下一个 %c 之后的所有内容都由以下字符串参数设置样式，并且很快。 以下是上述示例在控制台中的样子：
