后端开发教程 - Java、Spring Boot 实战 - msg200.com
Chrome Debugger 比你想象的更容易使用
请不要告诉我您仍在使用它console.log来调试您的应用程序。
好的，每个人都这样做，有时我也使用控制台日志...但是 Chrome 有一个完美运行的调试器，并且不需要任何配置，它只是...可以工作。
让我给你演示一下：
或者如果您更喜欢阅读，这里是视频内容的摘要（但我建议您观看视频中的演示）。
如果您从未使用过调试器，想象一下能够逐行运行代码，您可以在任何给定时间查看变量的所有值，您可以运行一些额外的代码来验证您的假设，您可以仅在满足条件时暂停代码等等！
好的，很酷，但是怎么做呢？
我是 Leonardo，每周都会分享关于 Web 开发和开源的话题。今天，我们一起来看看 Chrome 调试器。
访问调试器
在 Chrome 上，您可以按下F12或右键单击页面并选择“检查”以打开开发人员工具。
您已经知道这一点，但最常使用的是控制台或网络选项卡，但其功能远不止于此。
要访问调试器，您可以单击“源”选项卡，然后在左侧，您将看到组成应用程序的所有文件。
在这里，您可以导航到要调试的文件，也可以使用搜索栏查找。一个比较巧妙的方法是使用命令面板（Mac 上是 Cmd + P，Windows 上是 Ctrl + P），然后输入要调试的文件的名称。
从这里您可以单击行号来添加断点，当代码到达该行时它将暂停。
使用调试器；语句
debugger;或者，您可以在代码中添加一条语句。当您切换到浏览器并使用您的应用时，您将看到什么也没有发生。
但是，如果您打开了开发人员工具，您会看到调试器将暂停该行代码的执行。
如果您想调试代码的特定部分，并且想要快速从编辑器添加断点，这将很有用，但请不要忘记在提交和推送代码之前将其删除。
断点
如果您对调试器不太熟悉，我已经提到了断点，但没有解释它们是什么……但它并不比我已经说过的复杂得多。
简而言之，您告诉调试器，当代码执行到达特定行时，您希望代码执行暂停......就是这样！
在 Chrome 上，浏览器将暂停，然后您将能够手动控制代码的执行......并做一些更酷的事情，我稍后会解释。
最后一次，您可以通过视频观看！
条件断点
这个名字是不言自明的，但我会用一个例子来解释它。
for (let i = 0; i < 100; i++) {
const winner = calculateWinner(players[i]);
winner.doSomething();
}
我想调试该calculateWinner函数，但只针对循环的第 87 次迭代。如果使用常规断点，我需要暂停并恢复代码执行 86 次……这不太理想。
相反，我可以添加一个条件断点并告诉调试器仅当……时才暂停i === 87。
您可以通过右键单击断点并选择“条件断点”来向断点添加条件。
就这么简单，但功能却非常强大！
日志点
但是控制台日志呢？我没法没有它们！
好的，您可以设置实际上是日志点的特殊断点，它是菜单中条件断点正下方的选项。
这意味着调试器不会暂停代码的执行，而只会在控制台中记录一条消息。
优点？首先，你不需要在代码中散布大量的 console.log 文件，因为之后你还需要删除它们！
移除日志点以及其他断点，非常快捷。怎么做？阅读下一章👇
删除断点
您可以通过点击断点来移除它。如果您想移除所有断点，可以点击右上角的“停用断点”按钮。这实际上并不会移除它们，而是会停用它们，以便您只需单击一下即可重新激活所有断点。
无论如何，您可以从“断点”选项卡中启用/禁用甚至删除断点。
事件监听器
如果断点、条件断点、日志点和debugger语句还不够，我不知道您还在寻找什么。
哦，等等，它就在本章的标题里：事件监听器。
您可以添加仅在触发特定事件时触发的特殊断点。
举个例子，你可以添加一个断点，只要它附加了一个事件监听器，该断点仅在你单击某个元素时触发。
正在构建 React 应用？按下按钮后，执行将在附加到onClick事件的函数的第一行暂停。
使用 Chome 的调试器
好吧，现在你还不能说你不知道如何启动调试器，或者它又长又复杂。有很多不同的方法可以在你需要的位置精确暂停代码。
现在，很酷，但是到了那里你能做什么呢？让我们看看一些很酷的技巧 ;)
价值观
您首先会注意到的是，如果将鼠标移到变量上，就会看到它的值。这比控制台日志有了很大的改进，因为您可以看到所有值，而无需在日志中翻找一大堆文本。
还有“范围”选项卡，显示当前范围内的所有变量，按块、本地、范围、模块和全局分组。
手表
如果您想关注特定变量，您可以将其添加到“监视”选项卡中，以便您随时检查。
但这不仅适用于变量，您还可以添加表达式。例如，您可以添加表达式players[i].name，它会显示循环当前迭代中玩家的名称；或者，如果您正在操作数组，您可以添加表达式players.map(p => p.name)，它会显示所有玩家的名称。
最后一个例子，您可以编写一个布尔表达式players[i].name === 'Leonardo'，当您单步执行代码时，它会向您显示条件是真还是假。
调用堆栈
“调用堆栈”选项卡显示当前的函数调用堆栈。这有助于您了解代码如何到达当前位置。
例如，您有一个从许多不同地方调用的函数，并且您想知道当前哪个地方正在调用它。
在调用堆栈上，您可以清楚地看到导致执行到当前函数的所有先前函数。
穿越时空
好吧，也许标题有点太多了，但是您可以使用调试器做一些很酷的事情来控制代码的执行。
恢复
第一个是“恢复”按钮。这将恢复代码的执行，直到下一个断点。如果没有其他断点，它将一直运行到结束。
您会发现自己经常使用它，例如，如果您只有一个断点来查看当前状态，或者断点主要用于验证代码是否已执行。
跨过
在第二个操作台上，你可能会找到“Step over”按钮。这将执行当前行，然后在下一行再次暂停。
如果当前行是函数调用，它将执行该函数并在函数调用后的下一行暂停。
走进
Step into 按钮与上一个按钮类似，但它不会执行当前行，而是执行函数调用并在函数的第一行暂停。
走出去
Step out 按钮与上一个按钮相反，它将执行当前函数，并在函数调用之后的行上暂停。
结论
就是这样！这只是冰山一角，你还可以用调试器做很多事情，但我认为这足以让你入门，并激发你学习更多知识的好奇心。
有了这些很酷的功能，您还会继续使用控制台日志吗？
我的回答是，是的，因为我很懒。
或者至少，如果只需要一个控制台日志来打印一次值，那也没关系。但是，一旦你发现自己写了两个控制台日志，或者看了两三次同一个日志……那就想想调试器吧。它会为你节省不少时间。
我尝试描述一下这个工具并添加了一些截图，但这只是一个动态演示。视频已经展示了一些很酷的技巧，现在轮到你尝试一下，看看它能做什么了。只要用几天，你就会发现自己越来越喜欢用它。
感谢阅读，祝您调试愉快！🎉
感谢您阅读这篇文章，希望您觉得它很有趣！
我最近启动了我的 Discord 服务器来讨论开源和 Web 开发，欢迎加入：https://discord.gg/bqwyEa6We6
你喜欢我的内容吗？不妨考虑订阅我的YouTube频道！这对我来说意义重大❤️
你可以在这里找到：
欢迎随时关注我，以便在发布新文章时收到通知；）
