掌握 Chrome 调试器断点的奥秘

译者注： 本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇，一直更新到 12 月 24 日 版权归原作者所有。 译者在翻译前已经和作者沟通得到了翻译整个系列的授权。

译者按： 在马上就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，来帮助你掌握 Chrome 调试器。今天，我们将重点关注断点，这是调试过程中最重要的工具之一。

什么是断点？

断点允许你在特定行或函数上暂停代码执行。这使你可以检查变量的值、调用堆栈以及代码执行的顺序。

如何在 Chrome 中设置断点？

在 Chrome 中设置断点非常简单：

1. 打开你要调试的代码文件。
2. 单击行号旁边的空白区域。
3. 断点将以蓝色圆点表示。

不同类型的断点

除了基本断点外，Chrome 调试器还支持多种类型的断点：

• 条件断点： 仅在你指定的条件为真时才会触发。
• 日志断点： 在你指定的代码行执行时输出消息到控制台。
• 异常断点： 在你指定的异常发生时触发。

使用断点的技巧

以下是使用断点时的一些技巧：

• 使用断点隔离问题： 通过在不同位置设置断点，你可以逐步了解代码的执行，并隔离问题的根源。
• 检查变量的值： 在断点处，你可以使用 Chrome 控制台检查变量的值，以了解代码行为。
• 调试异步代码： 使用断点调试异步代码可能很棘手。尝试在回调或 Promise 的解析器中设置断点。

高级断点选项

Chrome 调试器还提供了高级断点选项，例如：

• 禁用断点： 可以禁用断点，而不删除它们。
• 条件表达式： 可以使用条件表达式来控制断点的触发方式。
• 源映射： 可以在编译或缩小的代码中设置断点，即使没有原始源代码也是如此。

结论

断点是 Chrome 调试器中一个强大的工具，可以帮助你解决代码问题并深入了解代码执行。通过掌握不同类型的断点和高级选项，你可以有效地利用它们来提高调试技能。

译者补充：

除了文中提到的技巧之外，我还可以分享一些我自己的经验：

• 使用断点跟踪代码执行： 通过在多个位置设置断点，你可以跟踪代码执行的顺序，并了解函数的调用和返回值。
• 设置断点进行单元测试： 断点可以用于对代码进行单元测试。通过在关键位置设置断点，你可以验证代码的行为是否符合预期。
• 使用断点进行代码审查： 断点可以帮助你审查代码并发现潜在的问题。通过在关键位置设置断点，你可以检查变量的值并确保代码按预期执行。

我希望这些技巧能帮助你更有效地使用 Chrome 调试器断点。请在评论区分享你的经验和建议！