更多的 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