你需要知道的关于开发者控制台的一切

好的专业人士知道他们的工具。 WordPress 开发人员可以使用的主要工具之一是我们浏览器中包含的 JavaScript 开发人员控制台。 在这篇文章中，我们将看到您需要了解的有关浏览器开发者控制台的所有信息，以及一些您可能不知道的技巧和好奇心。

如何访问开发者控制台

首先要做的事情：让我们看看如何打开浏览器的开发者控制台。 如果您是 Firefox 用户，只需单击菜单（右上角）并查找Web Developer选项，如下所示：

然后，选择Web 控制台：

控制台将显示在您的浏览器中，如以下屏幕截图所示。 请记住，可以配置您希望面板准确显示的位置。 您甚至可以将其设置为显示在单独的窗口中（如果您使用多个显示器，这将非常方便）。

另一方面，如果您是 Chrome 用户，则该过程非常相似。 只需访问其菜单，选择更多工具，然后选择开发工具：

如何使用开发者控制台

我们浏览器的 JavaScript 控制台对于调试我们的代码、查看我们的脚本记录的内容、运行小命令并实时查看它们对 Web 的影响非常有帮助。 作为 WordPress 的插件开发人员，控制台对我来说主要的实用程序显然是调试，所以让我们详细看看它究竟提供了什么。

#1 不同的日志级别

开发人员通常打开 JavaScript 控制台的第一个原因是调试他们的代码。 当发生错误或发生故障时，您可能会在控制台中找到有关它的一些信息。 您甚至可以根据需要启动自己的信息性消息、警告或错误！

例如，在前面的截图中，我们看到console对象（旨在帮助我们调试代码的全局对象）在控制台中写入消息的方法不同：

• debug和log显示普通消息。
• info显示信息消息。 在 Firefox 中，它们会在消息旁边显示一个“信息”图标。
• warn显示警告，通常指出问题或不太正确的事情。 它通常以黄色突出显示并带有警告图标。
• error通常保留给最严重的错误（即真正失败的事情）。 它以红色显示并且还打印堆栈跟踪（即哪个函数产生了错误及其所有调用者）。

使用不同日志级别的好处是我们可以随时选择我们想要显示的消息。 例如，在以下屏幕截图中，我们禁用了Info和Debug消息：

#2 监控执行时间

在敏捷中，你经常会听到这样的话：“让它发挥作用，让它变得更好，让它变得更快。” 在编写了一些“使其工作”的代码之后，结果很慢且效率低下的可能性不大。 发生这种情况时，重要的是要确定瓶颈在哪里并解决它们。

尽管有诸如分析器之类的工具可以找到罪魁祸首并详细了解幕后发生的事情，但有时我们需要一个“快速而肮脏”的解决方案。 也就是说，我们只是想识别代码中最慢的函数……而简单的计时器非常适合这项任务！

如果您想知道一段特定的代码需要多长时间运行，请在代码的开头（ console.time ）启动一个计时器，并在您的代码完成时停止它（ console.timeEnd ）：

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

当代码到达timeEnd时，您将看到运行所花费的时间：

 Timer: 655ms - timer ended

请注意，当我们启动和停止计时器时，我们会给它一个名称（在我的示例中，“计时器”）。 这是因为我们可以创建任意数量的计数器，每个计数器都有自己的名称，并让它们同时运行。

# 3 自动计数器

如果您有兴趣控制代码中任何函数的执行次数或记录循环运行的次数，请使用console.count 。 每次执行该函数时，您都会在控制台中获得一个新日志，其中包含计数器的当前值：

#4 如何格式化你的日志

日志可以帮助我们了解我们的代码发生了什么。 但这只有在我们编写以后可以理解的日志时才有可能……

文本字符串

在这篇文章的开头，我简单地谈到了console所有的日志方法。 我分享的示例打印了一些纯文本。 也就是说，这个语句：

 console.log( 'Hello world!' );

打印了这段文字：

 Hello world!

如果我们想打印一个对象怎么办？ 嗯，这个：

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

变成这样：

但是如果我们想记录多个东西呢？ 我们是否必须多次调用console.log ？ 嗯，答案是否定的，没有必要。 我们可以通过一次调用记录我们想要的所有内容：

分组日志...

当我们的代码中开始有大量日志时（例如，这里）：

结果可能会有点混乱，因为所有日志都合并到一个文本流中：

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

幸运的是， console对象提供了两种方法来解决这个问题： group和groupEnd 。 有了它们，我们可以对日志消息进行分组。 只需创建组（例如，每个函数一组）：

他们会像这样出现：

表

当我们使用数据集合时，将它们可视化并不总是那么容易。 例如，假设我们有一个项目列表，如下所示：

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

如果我们console.log他们，这就是我们得到的：

这或多或少是可以的，直到我们有更多的对象，每个对象都有更多的字段。 当面对这种类型的数据结构时，我建议你使用console.table来记录它：

#5 如何正确显示复杂类型（对象和数组）

最后，我想用一些开发人员并不了解的东西来结束今天的帖子……例如，假设您正在处理一个项目，并且想查看对象在更新前后的值是多少。 为此，您可能会在进行更改之前和之后对变量进行console.log ，如下面的 GIF 所示：

在前面的示例中，我们记录了一个包含值设置为 1 的对象。然后我们将值更新为 200 并再次记录该对象。 人们会期望第一个日志总是显示原始值 (1)，但请注意，当我们扩展对象时，它实际上显示的是新值 200。发生了什么？

基本上，日志消息具有对对象的引用，因此，当我们展开它时，它会向我们显示现在的对象，而不是创建日志时的对象。 该死的可变性！

要解决这个问题，只需将副本发送到日志（lodash 等库及其cloneDeep方法使这非常容易）。 这样，记录的第一个对象将是一个无法变异的副本（因为您不会引用它）：

这就是今天的全部内容！ 我希望你喜欢这篇文章。 如果您想了解更多有关您可以使用console执行的所有操作的信息，请查看 MDN 中的文档。 不要忘记与您的朋友分享？ 如果您做了一些不同的事情或有任何建议与我们的读者分享，请给我们留言？

Imagen destacada 上 Unsplash 的 Tim van der Kuip。