JavaScript 断点

JavaScript 断点是调试过程中重要的工具。之所以在 JavaScript 中使用断点，是因为在编写程序代码的过程中，我们有时会遇到一些语法错误和其他逻辑相关的错误。在这种情况下，代码可能不会产生我们想要的结果。

因此，为了找到代码出现问题的地点并解决它们以获得预期的输出，我们需要调试整个代码，并在执行过程的每一步停止并检查，以验证执行流程。

断点在许多其他编程语言中也用于调试过程，它们通过使用各种断点关键字来实现。具体来说，断点会停止执行过程，并检查每一步是否存在错误。

如何设置断点

要在调试器中设置断点，我们只需在 JavaScript 代码的调试器窗口的左侧设置断点即可。断点可能显示为红色或蓝色圆点，具体取决于工具的类型。因此，在每个断点处，调试器都会在运行时停止执行过程，并确保验证变量的值。之所以在运行时使用断点，是因为代码出现问题的原因以及代码无法运行的原因只有在运行时才能得知。大多数代码中的错误和日志也只在运行时显示。

断点示例

1. Visual Studio Code (VS Code)

Visual Studio Code 是许多开发者最常使用的 Web 浏览器，而且断点几乎都可以方便地使用，因为它易于导航和检查代码中的错误。断点可以直接使用，JavaScript 也可以利用它们。

要在 VS Code 中打开 JavaScript 文件的断点，请先打开您编写 JavaScript 代码的文件。然后，要定位断点，只需单击或选择代码行号旁边的边距，您想设置断点的位置。它将显示为一个红色的圆点。现在，您可以通过按 F5 键或在菜单中单击“运行”然后选择“开始调试”来轻松调试代码。

示例

代码

输出

2. 浏览器开发者工具断点

如今，我们在大多数开发过程中都会使用浏览器工具。包括 Chrome、Microsoft Edge、Mozilla Firefox 等流行的浏览器都具备展示开发者工具的功能。这些开发者工具可以直接、轻松地设置断点。

要使用浏览器工具中的断点，我们可以通过右键单击或直接按 F12 来打开选项，然后选择“检查”。点击后，它会打开一个新的标签页，并转到“Sources”（源代码）选项卡。从这里，找到您相应的 JavaScript 文件。现在，我们通过选择代码的行号来设置断点。

示例

代码

输出

3. 使用 debugger 语句设置断点

JavaScript 文件的断点可以借助内置语句来实现。这可以通过 JavaScript 中的 debugger 语句来实现。当引擎在代码中遇到 debugger 语句时，它会停止执行，并打开调试器可用。

示例

代码

输出

在上例中，用于计算两个数字之和的代码，当执行器遇到 debugger 语句时，它会立即停止执行，并检查调试器是否已打开。

以上是 JavaScript 中使用断点的几种方法。还有其他几种使用断点的方式，例如在浏览器开发工具中使用条件断点以及临时设置等。