16 调试功能之设置断点

在上一节中，我们讨论了 VSCode 中的常用快捷键以及如何自定义它们，以提升编码效率。在本节中，我们将深入探讨调试功能中的“设置断点”。设置断点是调试过程中的一个重要步骤，可以帮助我们在开发中有效地追踪和解决问题。

什么是断点？

在计算机程序执行时，断点是程序的特定位置，程序将在此处暂停执行。通过在代码中设置断点，我们可以观察变量的值，检查程序的运行状态，以及执行逐步调试，帮助我们诊断和修复代码中的错误。

如何设置断点？

在 VSCode 中，设置断点非常简单。以下是具体步骤：

1. 打开你的代码文件：首先，确保你打开的是一个支持调试的代码文件，例如 JavaScript、Python 或 Java 等。

2. 点击行号：在你的代码编辑器中，找到你想要设置断点的那一行。在该行行号的左侧单击。此时，应该会看到一个红点出现，表示该行已成功设置断点。

   

3. 调试代码：设置好断点后，你可以开始调试代码。通过快捷键 F5 启动调试，或者从调试面板点击绿色的开始调试按钮。

4. 程序暂停：当程序执行到设置的断点处时，代码会暂停执行，这样你就可以检查此时的变量值和程序状态。

示例代码

假设我们有以下简单的 JavaScript 代码：

let a = 5;
let b = 10;
let c = a + b;

console.log(c);

在 console.log(c); 那一行设置断点。运行调试后，程序会在这一行暂停执行，我们可以检查变量 a、b 和 c 的值。

检查变量

在调试模式下，VSCode 提供了多种工具来检查变量的值。你可以使用“调试”面板中的“变量”窗口观察当前作用域内的所有变量及其值。

使用“调试控制台”

在调试过程中，你还可以使用“调试控制台”输入表达式并查看结果。例如，如果在刚才的例子中，你在断点处输入 a，VSCode 将返回当前 a 的值 5。这种交互式的方式可以帮助你快速获取你需要的信息。

移除断点

如果你完成了某个断点的调试，可以通过再次点击红点来移除它。这时候，红点会消失，表示该行已不再是断点。

常见问题

1. 为什么断点没有生效？

如果断点未生效，请确保：

• 你已经在调试模式下启动程序。
• 代码没有被压缩或缩小（特别是在使用某些部署框架时）。
• 你的代码没有碰到语法错误，导致无法运行。

2. 如何管理多个断点？

你可以在“调试”面板中查看和管理所有断点。通过点击面板中的“断点”标签，你可以一次性禁用或启用多个断点，提升调试效率。

小结

在这一节中，我们学习了如何在 VSCode 中设置和管理断点，以及如何利用这些断点进行有效的调试。断点可以帮助我们监控程序状态，查找潜在的错误。在下一节中，我们将继续探索调试功能的另一个重要方面——监视变量。通过监视变量，我们可以实时查看并追踪变量的变化。敬请期待！