更多的 JavaScript 控制台功能

更多的 JavaScript 控制台功能

疯狂的技术宅 前端先锋

翻译：疯狂的技术宅
作者：Preston Lamb
来源：prestonlamb.com
正文共：2407 字
预计阅读时间：7 分钟

你可能在 JavaScript 项目中用了console.log。这是一种查看变量值或程序运行中发生的事情的便捷方法。但是 JavaScript console 对象还有许多其他的功能，可以在处理项目时提供帮助。本文将会介绍一些我的最爱，希望你在工作时记得使用它们！

请注意，此处的例子适用于在浏览器中运行的 JavaScript。这与在 Node.js 中运行的 JavaScript 相似，但是在 Node.js 中的行为可能略有不同。

console.log

在进入其他选项之前，让我们先回顾一下 console.log 的功能。console.log 将消息输出到控制台。你可以输入一个对象、一个数组、一个对象数组、一个字符串、一个布尔值，基本上你想要打印到控制台的任何内容都可以。这是使用 console.log 及其输出的例子：

1console.log({ restaurantName: 'Pizza Planet' }); // {
``` restaurantName: 'Pizza Planet' };
这是 JavaScript 中最常用的调试方法，也是最常用的控制台方法。现在让我们来谈谈其他的一些选择！

### console.info

console.info 与 console.log 几乎相同。它将信息性消息打印到控制台。据我所知，log 和 info 之间并没有真正的区别，只是取决于你怎样对消息进行分类。但是如果你选择从浏览器控制台中隐藏 “info” 级别的消息，则 “log” 和 “info” 消息都会被隐藏。要使用 console.info 可以这样做：

1console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

同样，输出几乎完全相同。

### console.warn

console.warn 将警告消息打印到控制台。从本质上讲，它与前面的功能相同，但是该消息在控制台中带有黄色背景，并带有警告图标（至少在 Chrome Dev Tools 中是这样）。当执行某些操作可能会导致你程序中的错误，但目前不会引起任何问题时，请使用 console.warn 。它使你和你的用户或其他开发人员知道那里有可能会发生问题。

1console.warn({ restaurantName: 'Pizza Planet' }); // ⚠️ { restaurantName: 'Pizza Planet' };

### console.error

console.error将错误信息输出到控制台。本质上，它与前面的功能相同，但是该消息在控制台中具有红色背景，并带有带有白色 “x” 错误图标的红色圆圈（至少在 Chrome Dev Tools 中）。当你的程序出现问题时，请使用 console.error。它为其他开发人员提供了一种简便的方法来找出问题的原因并加以解决。它将能够为你提供错误的堆栈跟踪信息，以便你也可以查找错误。

1console.error({ restaurantName: 'Pizza Planet' }); // ❌ { restaurantName: 'Pizza Planet' };

像前面一样，可以通过传递相同的值来把错误打印到控制台。

### console.table

这是我最喜欢的控制台选项之一，尽管我经常忘记它。console.table 接受一些能够以表格形式展示的数据并输出。让我们看几个例子。我们首先从对象上的 console.table 开始：

1console.table({ restaurantName: 'Pizza Planet', streetAddress: '123 Maple' });

在dev tools中的输出看起来类似于此：
![](https://s4.51cto.com/images/blog/202101/29/82fc1eab7928fa213cfc8f32d5909721.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

它获取对象的每个属性名称，并将其放在 index 列中，并将属性的值放入 Value 列中。这发生在数组中的每个属性上。那么，如果我们输出对象数组会怎样？结果将如下所示：

![](https://s4.51cto.com/images/blog/202101/29/626ba7085e87dcf79c1c39828075314c.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

我发现自己通常会使用 console.log，因为我已经习惯了，但是我认为很多时候 console.table 会更好地工作，并以一种美观、干净、易读的方式为我输出对象。

### console.assert

console.assert 是一种将未满足你确定条件的消息打印到控制台的方法。该函数有两个参数：要求值的表达式和应显示的错误消息。这是一个例子：

1const obj = { restaurantName: 'Pizza Planet' };
2console.assert(obj.restaurantName === 'Pizza Palace', 'The name of the restaurant is not "Pizza Palace"');
3// ❌ Assertion Failed; 'The name of the restaurant is not "Pizza Palace"'

这可能是另一种非常好的调试程序的方法。仅当断言失败时才会显示该消息，因此如果未显示任何消息，则可以假定表达式正评估正确。

### console.group 和 console.groupEnd

console.group 和 console.groupEnd 是可以将许多 console.log 逻辑分组的方式。然后，你可以在需要时通过折叠组以将其隐藏。相当容易使用：

1console.group();
2console.log({ restaurantName: 'Pizza Palace' });
3console.groupEnd();

该组可能会整体折叠。如果你需要在控制台上记录很多内容，这可能会很有用。

### 结论

在 JavaScript 中，有很多方法可以用于 console 对象。它们可以帮我们进行开发，以便可以根据类型过滤消息；查看表中的一项或多项；或者将它们组合在一起或折叠它们，以便在需要时将其隐藏。它将改善你的工作流程。

原文链接

https://www.prestonlamb.com/blog/theres-more-to-the-javascript-console