一定听说过 console.log() ，而且可能一直在使用它。它非常流行，在集成开发环境中键入时，Visual Studio Intellicode 等工具通常会在其他控制台方法之前推荐使用它。

在本文中，我们将探讨一些最有用的控制台方法，以及它们在数据可视化、调试等方面的用途。

1. table()

当你需要在代码中以表格形式（如对象数组）显示一组对象时， console.table() 方法就会派上用场。以汽车列表为例：

const cars=[
  {
    color: 'red',
    age: 4,
    maxSpeed: 120,
  },
  {
    color: 'blue',
    age: 2,
    maxSpeed: 100,
  },
  {
    color: 'yellow',
    age: 3,
    maxSpeed: 160,
  },
];

如何在控制台中检查它们？ console.log() 是一种典型的方法：

console.log(cars);

在 Chrome 浏览器开发者控制台中，我们可以检查我们记录的对象的各种属性，层次不限。

我们可以在 Node.js 终端中查看属性，还可以获得色彩：

这是一种可以接受的方法，但 console.table() 方法提供了一种更优雅的替代方法：

console.table(cars);

console.table() 在 Chrome 浏览器控制台中:

console.table() in Node.js Node.js 中的

顾名思义，它以易于理解的表格形式呈现数据，就像电子表格一样。它也适用于数组阵列。

const arr=[
  [1, 3, 5],
  [2, 4, 6],
  [10, 20, 30],
];
console.table(arr);

2. assert()

console.assert() 非常适合调试目的，它接收断言，并在断言为 false 时向控制台写入错误信息。但如果是 true ，则不会发生任何事情:

const num=13;
console.assert(num > 10, 'Number must be greater than 10');
console.assert(num > 20, 'Number must be greater than 20');

第一个断言通过是因为 num 大于 10 ，所以控制台只显示第二个断言：

3. trace()

console.trace() 可以帮助您在调用它的位置输出当前堆栈跟踪。例如

function a() {
  b();
}

function b() {
  c();
}

function c() {
  console.trace();
}

a();

4. error()

error() 可能是第二种最常用的 Console 方法。在 Chrome 浏览器控制台中，它会以独特的红色显示错误信息。

console.error('This is an error message.');
console.log('This is a log message.');

不过，在 Node.js 中不会有这种颜色分离：

不过，信息在内部被写入不同的位置。 console.error() 写入 stderr 流，而 console.log() 写入 stdout 流。你可以使用process.stderr和 process.stdout 访问这些流。这对于将错误信息和信息重定向到不同的文件非常有用，就像我们在下面的代码示例中所做的那样。

const fs=require('fs');

const errorFs=fs.createWriteStream('./error-log.txt');
process.stderr.write=errorFs.write.bind(errorFs);

const infoFs=fs.createWriteStream('./info-log.txt');
process.stdout.write=infoFs.write.bind(infoFs);

console.error('This is an error message.');
console.log('This is a log message.');

运行此代码时，传递给 error() 和log()的信息将输出到相应的文件，而不是控制台。

5. warn()

console.warn() 在 Chrome 浏览器控制台中输出黄色信息，表示警告。

console.warn('This is a warning message');

在 Node.js 中，信息会像 console.error() 一样写入 stderr 流。

6. count() 和 countReset()

console.count() 记录当前调用 count() 的执行次数。这是另一个有用的调试工具。

function shout(message) {
  console.count();
  return message.toUpperCase() + '!!!';
}

shout('hey');
shout('hi');
shout('hello');

由于我们没有指定标签，因此显示的标签是 default 。我们可以通过为 count() 传递一个字符串参数来做到这一点

function shout(message) {
  console.count(message);
  return message.toUpperCase() + '!!!';
}

shout('hey');
shout('hi');
shout('hello');
shout('hi');
shout('hi');
shout('hello');

现在，每条信息都有不同的计数。countReset() 方法将标签的计数设回零。

function shout(message) {
  console.count(message);
  return message.toUpperCase() + '!!!';
}

shout('hi');
shout('hello');
shout('hi');
shout('hi');
shout('hello');
console.countReset('hi');
shout('hi');

7. time(), timeEnd(), and timeLog()

我们可以同时使用这些方法来测量程序中某一特定操作所需的时间。

const arr=[...Array(10)];

const doubles1=[];
console.time('for of');
let i=0;
for (; i < 1000; i++) {
  for (const item of arr);
}
console.timeLog('for of');
for (; i < 1000000; i++) {
  for (const item of arr);
}
console.timeEnd('for of');

console.time('forEach');
i=0;
for (; i < 1000; i++) {
  arr.forEach(()=> {});
}
console.timeLog('forEach');
for (; i < 1000000; i++) {
  arr.forEach(()=> {});
}
console.timeEnd('forEach');

在此，我们将对 for of 和 forEach 循环进行性能比较。 time() 启动定时器，执行向其传递的标签所指定的操作。 timeLog() 在不停止计时器的情况下记录当前持续时间，我们用它来显示迭代一千次后的时间。 timeEnd() 记录当前持续时间并停止计时器。我们在一百万次迭代后调用它。

看起来 forEach() 比 for of 快。

8. clear()

console.clear() 通过清除日志来清除控制台中的杂乱信息。

console.log('A log message.');
console.clear();

9. group(), groupCollapsed(), and groupEnd()

console.group() 为其后的控制台信息添加一级缩进。 console.groupEnd() 会将缩进程度重置为调用前面的 console.group() 之前的缩进程度。

console.log('This is the outer level');
console.group();
console.log('Level 2');
console.group();
console.log('Level 3');
console.warn('More of level 3');
console.groupEnd();
console.log('Back to level 2');
console.groupEnd();
console.log('Back to the outer level');

console.groupCollapsed() 创建了一个类似 console.group() 的组，但该组是折叠的，直到用户使用旁边的 "披露 "按钮将其展开。

console.log('This is the outer level');
console.group();
console.log('Level 2');
console.groupCollapsed();
console.log('Level 3 ');
console.warn('More of level 3');
console.groupEnd();
console.log('Back to level 2');
console.groupEnd();
console.log('Back to the outer level');

10. dir()

console.log() 将 HTMLElement 记录为 HTML，我们可以在控制台中浏览：

但是， console.dir() 会将其记录为一个对象，并显示一个交互式属性列表：

总结

正如你在本文中所看到的，除了console.log()之外，还有许多控制台方法。其中一些只是在控制台 UI 中用颜色和更好的可视化来点缀，而另一些则可以作为调试和性能测试的强大工具。

sole 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console）。不同浏览器上它的工作方式是不一样的，但这里会介绍一些大都会提供的接口特性。
Console对象可以在任何全局对象中访问，如 Window，WorkerGlobalScope 以及通过属性工作台提供的特殊定义。

它被浏览器定义为 Window.Console，也可被简单的 Console 调用。

最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.log(),几乎没有见过Console的其他用法，难道Console真的没有别的用法了？查了一下后发现Console还是非常强大的，至于为什么很少看到有人用可能是因为用过都删掉了吧。在此记录一下Console的其他用法。

注意：因为Console 对象提供对浏览器控制台的接入 所以在不同浏览器中的支持及表现形式可能不太一样，但是调试内容只有我们开发者会看，所以保证开发环境能用这些方法就可以了，下面演示全部都为Chrome上面的效果。

分类输出

不同类别信息的输出

console.log('文字信息');

console.info('提示信息');

console.warn('警告信息');

console.error('错误信息');

分组输出

使用Console.group()和Console.groupEnd()包裹分组内容。

还可以使用Console.groupCollapsed()来代替Console.group()生成折叠的分组。

console.group('第一个组');
 console.log("1-1");
 console.log("1-2");
 console.log("1-3");
console.groupEnd();

console.group('第二个组');
 console.log("2-1");
 console.log("2-2");
 console.log("2-3");
console.groupEnd();

Console.group()还可以嵌套使用

表格输出

使用console.table()可以将传入的对象，或数组以表格形式输出。适合排列整齐的元素

查看对象

使用Console.dir()显示一个对象的所有属性和方法
在Chrome中Console.dir()和Console.log()效果相同

查看节点

使用Console.dirxml()显示一个对象的所有属性和方法
在Chrome中Console.dirxml()和Console.log()效果相同

百度首页logo的节点信息

条件输出

利用console.assert(),可以进行条件输出。

• 当第一个参数或返回值为真时，不输出内容
• 当第一个参数或返回值为假时，输出后面的内容并抛出异常

计次输出

使用Console.count()输出内容和被调用的次数

追踪调用堆栈

使用Console.trace()来追踪函数被调用的过程，在复杂项目时调用过程非常多，用这个命令来帮你缕清。

计时功能

使用Console.time()和Console.timeEnd()包裹需要计时的代码片段，输出运行这段代码的事件。

• Console.time()中的参数作为计时器的标识，具有唯一性。
• Console.timeEnd()中的参数来结束此标识的计时器，并以毫秒为单位返回运行时间。
• 最多同时运行10000个计时器。

性能分析

使用Console.profile()和Console.profile()进行性能分析，查看代码各部分运行消耗的时间，但是我在Chrome自带的调试工具中并没有找到在哪里查看这两个方法生成的分析报告。应该需要其他的调试工具。

有趣的Console.log()

最后再来介绍一下强大的Console.log(),这个方法有很多的用法（其他输出方法的用法，如error()等，可以参照log()使用）。

一、提示输出

可以再输出的对象、变量前加上提示信息，增加辨识度

二、格式化输出

三、自定义样式

使用%c为打印内容定义样式,再输出信息前加上%c，后面写上标准的css样式，就可以为输出的信息添加样式了

总结

Console的用法很多，有些再调试过程中非常实用，可以节省很多时间。当然我知道debug还是用断点调试的方法比较好，但是小问题用“printf大法”也是很好用的。