JavaScript 中的断点

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中的断点

作者：迹忆客最近更新：2024/03/19 浏览次数：

在本文中，我们将讨论断点的用法和好处，以及如何借助 debugger 关键字和浏览器的调试器模式来调试我们的 JavaScript 代码。

断点

大多数时候，我们的程序代码包含很少的逻辑语法错误，并且我们的程序没有按照给定的语句提供所需的结果。因此，为了解决错误和调试我们的程序代码，我们需要停止执行并检查每一步的执行流程。

我们在程序中使用断点来停止执行，各种编程语言都专门包含断点关键字。

断点关键字在代码运行期间停止执行，因为大多数时候，错误不会显示任何错误消息或日志，我们需要找出实际问题所在。

JavaScript 中的断点

调试是一个棘手的过程，现在大多数浏览器都提供了内置的 JavaScript 调试器。我们可以使用调试器设置断点并定义我们需要停止执行的位置。

我们可以在代码执行时在运行时检查变量值。

我们可以通过按 F12 键在浏览器中激活调试，然后从调试器菜单中选择 Console 部分。如果我们的浏览器支持调试，我们可以使用 console.log() 方法来显示和检查值。

控制台的示例：

<!DOCTYPE html>
<html>
<body>

<h1>Delftstack learning</h1>

<h2>JavaScript debugger keyword example</h2>

<p>You can on debugger with F12 key and select console in debugger menu.</p>

<script>
a = 2;
b = 4;
sum = a + b;

console.log(c); // it will display the value of sum variable
</script>

</body>
</html>

在上面的 HTML 源代码中，我们使用了 console.log() 默认方法来显示变量 a 和 b 的总和；我们可以看到调试器模式的登录控制台部分。

我们可以在调试器窗口中为 JavaScript 代码设置断点，在每个断点处都会停止执行，这将有助于检查 JavaScript 值。我们可以使用调试器窗口中的播放按钮再次恢复执行。

JavaScript 中的 `Debugger` 关键字

JavaScript debugger 关键字在代码语句中用于停止执行；它执行与我们在调试器中设置断点相同的功能。

调试器的示例：

<!DOCTYPE html>
<html>
   <body>
      <h1>Delftstack learning</h1>
      <h2>JavaScript debugger keyword example</h2>
      <p id="test"></p>
      <p>You can on debugger and see the execution will be stop at third line.</p>
      <script>
         let sum = 15 + 5;
         
         debugger; // to stop execution
         
         document.getElementById("test").innerHTML = sum;
         
      </script>
   </body>
</html>