这些JavaScript控制台方法你知道吗？

蔚落 2024-03-26 13:33 86阅读 0赞

您肯定听说过 console.log() 并且可能一直在使用它。它非常流行，像 Visual Studio Intellicode 这样的工具通常会在 IDE 中输入时在任何其他控制台方法之前推荐它：

![03e4ec888171969d7cd6efd8d7468eba.jpeg][]

在今天这篇文章中，我们将探讨一些最有用的控制台方法及其在数据可视化、调试等方面的用途。

**1.table（）**

当您需要直观地查看代码中可以以表格形式表示的一组对象（如对象数组）时，console.table() 方法会派上用场。以这个汽车清单为例：

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

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

console.log(cars);

在 Chrome 开发人员控制台中，我们可以检查我们记录的对象的各种属性，以及我们想要的任意多的层次结构。

![d8e2d949ae8ba61ceab8f4c87c1a4973.jpeg][]

我们可以在 Node.js 终端中查看属性并进行着色：

![078bfa20dfb3b25a377a0388c503f0d0.jpeg][]

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

console.table(cars);

![b0c92506748917526b42976e2a9b85f2.jpeg][]

![42658f1a15d6084f74ecf7eb6047793d.png][]

顾名思义，它以易于理解的表格格式呈现数据，如电子表格。

table() 也适用于数组数组：

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

![8f0e3e151ddade52f4fcaf2e7bf0e8da.png][]

**2.assert()**

非常适合调试目的，console.assert() 接受断言并在断言为假时将错误消息写入控制台。但如果这是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，所以控制台中只显示第二个：

![03efbe2a6013c0f3639ddb93ad675b30.png][]

**3.trace()**

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

functiona() {
      b();
    }
    functionb() {
      c();
    }
    functionc() {
      console.trace();
    }
    a();

![883af0bbdb4e9b6d907719091d7da8d7.jpeg][]

**4.error()**

error() 可能是第二流行的控制台方法。在 Chrome 控制台中，它以独特的红色显示错误消息。

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

![b21b1fbc55623b32db4507f8f501834e.png][]

你不会在 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');

![3466efb1bece35d63eccd806cf6ec9e2.png][]

在 Node.js 中，消息被写入 stderr 流，如 console.error()。

**6.count() 和 countReset()**

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

functionshout(message) {
      console.count();
      return message.toUpperCase() + '!!!';
    }
    shout('hey');
    shout('hi');
    shout('hello');

![88864d45ac80a192769f7f325dea7f31.png][]

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

functionshout(message) {
      console.count(message);
      return message.toUpperCase() + '!!!';
    }
    shout('hey');
    shout('hi');
    shout('hello');
    shout('hi');
    shout('hi');
    shout('hello');

![52d29ab735274527cc605f89e0e353c5.jpeg][]

现在我们对每条消息都有不同的计数。

countReset() 方法将标签的计数设置回零。

functionshout(message) {
      console.count(message);
      return message.toUpperCase() + '!!!';
    }
    shout('hi');
    shout('hello');
    shout('hi');
    shout('hi');
    shout('hello');
    console.countReset('hi');
    shout('hi');

![0d23cb40bdaa1623a08daa285c02d7cc.jpeg][]

**7.time()、timeEnd() 和 timeLog()**

我们可以一起使用这些方法来测量我们程序中的特定操作需要多长时间。

![958889f030cbdb0435b70128e26cbf40.png][]

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

看起来 forEach() 比 for of 快。

**8.clear()**

console.clear() 通过清除日志来消除控制台的混乱。

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

![476c19cf42850f1e6d458714315a2187.png][]

**9.group()、groupCollapsed() 和 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');

![format_png][]

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');

![format_png 1][]

**10.dir()**

console.dir() 的工作方式类似于 console.log()，除了记录 HTMLElements。console.log() 将 HTMLElement 记录为我们可以在控制台中遍历的 HTML：

![8b26c03f4a6893b4e66da173a01e60a2.jpeg][]

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

![6d80540c009a816da7207f316160f123.jpeg][]

**结论**

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

[03e4ec888171969d7cd6efd8d7468eba.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d5bd36a9c40141edb7ce87152cccf743.png
[d8e2d949ae8ba61ceab8f4c87c1a4973.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a5dc72f444924c4f820139040ab3bfbf.png
[078bfa20dfb3b25a377a0388c503f0d0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e78654e087424108bbdc560cc638fa92.png
[b0c92506748917526b42976e2a9b85f2.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0c9c4e1c8c674d08aa467e2dd52ce30f.png
[42658f1a15d6084f74ecf7eb6047793d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6d84d3161c184fb49a1662cf9ab67cd9.png
[8f0e3e151ddade52f4fcaf2e7bf0e8da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/dbfe02c54b6a42d0b67dc54135fbec58.png
[03efbe2a6013c0f3639ddb93ad675b30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/808b484b4fd442fd809c594ac833e88b.png
[883af0bbdb4e9b6d907719091d7da8d7.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7ff264e975f94eb0be66638ac80f436d.png
[b21b1fbc55623b32db4507f8f501834e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/931bd12bd01a4725a753229225210c37.png
[3466efb1bece35d63eccd806cf6ec9e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ff7c747c0fa140f690858769e992ffaa.png
[88864d45ac80a192769f7f325dea7f31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5e1b4dddedb94becac96b99f3e04a3ad.png
[52d29ab735274527cc605f89e0e353c5.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9091f8202bc4400691519a38130200d0.png
[0d23cb40bdaa1623a08daa285c02d7cc.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d7f25a9c5fec4994a1ab148873fe3896.png
[958889f030cbdb0435b70128e26cbf40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0632f9ae087b4e0abd948fed4c2aaddd.png
[476c19cf42850f1e6d458714315a2187.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4d749d06c7f34d5298fd31a5bc73e35c.png
[format_png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/797550001ae64a13ba2f770591fd90d5.png
[format_png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fba361922e5149aaa65ecc09a20fea2d.png
[8b26c03f4a6893b4e66da173a01e60a2.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/62e759d2c45c4d0b83698c9c9d5290c8.png
[6d80540c009a816da7207f316160f123.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e4e078be1ce942d0ae4dd8ffd35f1eef.png