请不要告诉我您仍在使用console.log调试您的申请。

好吧，每个人都这样做，有时我也使用控制台日志…但是Chrome有一个完美的调试器，并且不需要配置，它只是工作。

让我向您展示：

，或者如果您喜欢阅读，请参阅视频的摘要（但我建议您在视频中观看演示）。

如果您从未使用过调试器，请想象能够逐行运行代码，在任何给定时间，您可以在其中看到变量的所有值，您可以运行一些额外的代码来验证您的假设，您可以暂停仅当满足条件的情况下，代码甚至更多！

好的，但是怎么样？

我和我每周都会谈论网络开发和开源。今天，让我们一起看看Chrome调试器。

访问调试器

在Chrome上，您可以按F12或右键单击页面上的右键，然后选择“检查”以打开开发人员工具。

您已经知道了这一点，但是通常您使用控制台或网络选项卡，但远不止于此。

要访问调试器，您可以单击“源”选项卡，然后在左侧，您将查看所有构成应用程序的文件。

从这里您可以导航到要调试的文件，也可以使用搜索栏查找它。命令调色板（Mac上的CMD + P，Windows上应为CTRL + P），然后输入要调试的文件的名称。

从这里您可以单击行号以添加断点，并且代码到达该行时将暂停。

使用调试器；陈述

另外，您可以在代码中添加debugger;语句。切换到浏览器并使用应用程序时，您会发现什么都不会发生。

但是，如果您打开了开发人员工具，您会发现调试器将暂停该行上的代码执行。

如果您想调试代码的特定部分，并且希望快速捷径添加编辑器的断点，但是请不要忘记，请不要忘记在提交和推动代码之前删除它。

断点

如果您不太熟悉调试者，我已经提到了断点，而没有解释它们是什么...但是它比我已经说过的要复杂得多。

简而言之，您告诉调试器，您希望代码执行到特定行时暂停...就是这样！

在Chrome上，浏览器将暂停，从那里您将能够手动控制代码的执行...并在稍后进行一些很酷的事情。

上次通话，您可以观看on video！

有条件的断点

这个名字是不言自明的，但我会用一个例子来解释。

for (let i = 0; i < 100; i++) {
  const winner = calculateWinner(players[i]);
  winner.doSomething();
}

我想调试calculateWinner函数，但仅用于循环的第87次迭代。在定期断点，我必须暂停并恢复执行代码86次...

相反，我可以添加有条件的断点，并告诉调试器仅在i === 87时暂停。

那样简单，但强大！

logpoints

但是控制台日志？我不能没有他们！

好吧，您可以设置实际上是LogPoint的特殊断点。这意味着调试器不会暂停执行代码，而只会在控制台中记录一条消息。

优点？您不需要在代码中以稍后删除的代码中传播大量的控制台。

如何？阅读下一章ð

删除断点

您可以通过单击它来删除断点。如果要删除所有断点，则可以单击右上角的“停用断点”按钮。实际上，这实际上并没有删除它们，但它会停用它们，以便您可以单击一次重新激活所有内容。

无论如何，从“断点”选项卡中，您可以启用/禁用，甚至可以在不错的概述中删除断点。

活动听众

如果断点，有条件的断点，logpoints和debugger语句还不够，我不知道您可能正在寻找什么。

哦，等等，这是本章的标题：事件听众。

您可以添加仅在触发特定事件时才触发的特殊断点。

要命名一个，您可以添加仅在单击元素时触发的断点，只要附上事件侦听器。

构建React应用程序？您按下按钮，执行将在您附加到onClick事件的函数的第一行上暂停。

使用Chome的调试器

好吧，在这一点上，您真的不能说您不知道如何启动调试器或长期或复杂。在您需要的点上，有很多不同的方法可以暂停代码。

现在，很酷，但是一旦到达那里，您该怎么办？让我们看看一些很酷的技巧;）

值

您会注意到的第一件事是，如果您将鼠标移到变量上，则会看到其值。这已经是对控制台日志的巨大改进，因为您可以看到所有这些日志，而无需挖掘日志中的文本墙。

还有“范围”选项卡，向您显示当前范围中的所有变量，分组为块，本地，范围，模块和全局。

手表

如果要密切注意特定变量，则可以将其添加到“手表”选项卡中，并且可以随时检查一下。

这不仅适用于变量，还可以添加表达式。例如，您可以添加players[i].name，它将在循环的当前迭代中显示播放器的名称，或者如果您操纵一个数组，可以执行players.map(p => p.name)，它将显示所有播放器的名称。<<<<<<<<<<<<<< /p>

最后一个示例，您可以编写像players[i].name === 'Leonardo'这样的布尔表达式，它将向您展示如果您逐步浏览代码时条件是真或错误。

致电堆栈

“呼叫堆栈”选项卡显示您当前函数调用的堆栈。这对于了解您如何到达代码中的当前点很有用。

例如，您的功能是从许多不同的地方调用的，您想知道哪个函数目前正在称呼它。

在呼叫堆栈上，您可以准确地看到，所有先前的函数将执行导致当前执行。

穿越时空

好吧，标题也许有点太多了，但是您可以使用调试器进行一些很酷的事情来控制代码的执行。

恢复

第一个是简历按钮。这将恢复执行代码，直到下一个断点为止。如果没有更多的断点，它将仅运行直到结束。

您会发现自己经常使用它，例如，如果您只有一个断点可以查看当前状态，或者如果断点主要是为了验证代码是否已执行。

一步

在第二个讲台上，您可能会找到按钮的步骤。这将执行当前行，然后在下一个线上再次暂停。

如果当前行是函数调用，它将执行函数并在函数调用后的下一行上暂停。

步入

进入按钮的步骤类似于上一个，但是它不会执行当前行，而是在函数的第一行上执行函数调用并暂停。

走出去

逐步淘汰按钮与上一个相反。它将执行当前函数并在函数调用之后在行上暂停。

结论

就是这样！这只是冰山一角，您还可以处理更多的事情，但是我认为这足以让您开始并让您好奇地了解更多。

在所有这些很酷的功能之后，您是否要继续使用控制台日志？

这是我的回答，是的，因为我很懒惰。

或至少，如果只有一个控制台登录一次，那么一次打印一个值，是的，为什么不，但是一旦您发现自己编写两个控制台日志，或者两次或三次查看相同的日志■考虑调试器。它将为您节省很多时间。

我试图描述此工具并添加一些屏幕截图，但这是一个动态的演示。该视频已经显示了一些很酷的技巧，但是现在轮到您尝试一下，看看您可以做什么。只需使用几天，您就会发现自己越来越多地使用它。

感谢您的阅读和快乐的调试！ ð

感谢您阅读本文，希望您发现它很有趣！

我最近启动了我的Discord服务器来谈论开源和Web开发，请随时加入：https://discord.gg/bqwyEa6We6

您喜欢我的内容吗？您可以考虑订阅我的YouTube频道！这对我来说意义重大€
您可以在这里找到它：

随时关注我在新文章发布时得到通知;）