使用JavaScript控制台如何改进工作的流程

作为Web开发人员，很有必要了解如何调试代码。后台开发我们经常使用外部库来记录日志，并在某些情况下格式化显示日志，前端我们会使用断点和控制台，但是我们浏览器的控制台比我们想象的要强大得多。

当我们考虑控制台时，首先想到的是console.log，对吧？但是它比我们想像中使用的方法多得多。现在我们来看一下如何充分利用控制台，我将为您提供一些技巧，使这些方法更具可读性

什么是控制台？

JavaScript控制台是现代浏览器中的内置功能，它在类似shell的界面中带有开箱即用的开发工具。它允许开发人员：

基本上，它使您能够在浏览器中编写，管理和监控JavaScript。

Console.log，Console.error，Console.warn和Console.info
这些可能是最常用的方法。您可以将多个参数传递给这些方法。每个参数都在由空格分隔的字符串中进行计算和连接，但是对于对象或数组，您可以在它们的属性之间导航。

Console.group

在检查代码逻辑和流程时我们可能会使用很多的console.log()来检测，但是你会发现控制台打印出来的非常多。此方法允许您在可折叠的组下对一系列console.log（以及错误信息等）进行分组。语法非常简单：只需console.log在之前输入我们想要分组的所有内容console.group()（或者console.groupCollapsed()如果我们希望它默认关闭）。然后console.groupEnd()在末尾添加一个关闭组。

Console.table

自从我发现console.table我的生活都发生了改变。在一个内部显示JSON或非常大的JSON数组console.log是一种不好的体验。这console.table允许我们在一个漂亮的表中可视化这些结构，我们可以在其中命名列并将它们作为参数传递。

非常好，在调试中非常有用：

Console.count，Console.time和Console.timeEnd
对于需要调试的每个开发人员来说，这三种方法都是瑞士军刀。该console.count计数和输出是的次数count()已被调用在同一行，并用相同的标签。该console.time开始用指定为输入参数的名称定时器，可以运行多达10,000个特定网页上同时定时器。启动后，我们使用调用来console.timeEnd停止计时器并将经过的时间打印到控制台。

输出将如下所示：

Console.trace和Console.assert

这些方法只是从调用它的代码位置，打印堆栈跟踪。想象一下，您正在创建一个JS库，并希望通知用户生成错误的位置。在这种情况下，这些方法非常有用。该console.assert是喜欢console.trace，但是只打印条件不符合的。

正如我们所看到的，输出正是React（或任何其他库）在生成异常时向我们展示的内容。

删除所有控制台