JavaScript 中的断点

Muhammad Muzammil Hussain 2023年1月30日 2022年5月26日
  1. 断点
  2. JavaScript 中的断点
  3. JavaScript 中的 Debugger 关键字
JavaScript 中的断点

在本文中,我们将讨论断点的用法和好处,以及如何借助 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() 默认方法来显示变量 ab 的总和;我们可以看到调试器模式的登录控制台部分。

我们可以在调试器窗口中为 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>

在上面的 HTML 源代码中,我们在 JavaScript 代码中使用了 debugger 关键字来停止执行并使用 getElementById("id").innerHTMLsum 变量分配给段落。