JavaScript 调试

在这篇文章中，我们将学习关于 JavaScript中的调试 。

调试是指检查代码，找出代码中的错误并修复这些错误的过程。

在编写代码时常常会出现错误，这些错误可能是语法错误或逻辑错误。这些错误会给用户和程序员的逻辑理解带来很大的不确定性。代码中可能还会存在一些对程序员来说看不见的错误，但却可能造成严重后果。为了识别这些错误，我们需要使用调试器，它可以查看整个代码或程序，找出错误并修复它们。

使用 调试器关键字 ：调试器关键字用于在代码中强制停止代码的执行，达到断点，并调用调试函数。如果不需要进行任何调试，调试器函数将不会执行任何操作。

示例： 让我们看一下关于调试的JavaScript程序：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Debugging in Javascript</title>
</head>
 
<body>
    <h4>
        Debugging demonstrations using Debugger keyword
    </h4>
    The solution of 20 * 5 is:
    <p id="test"></p>
    <p>
        If the debugger is turned on the code stops
        execution at the start of the debugger
    </p>
    <script>
        const x = 20;
        const y = 5;
        const z = x * y;
        debugger;
        document.getElementById("test").innerHTML = z;
    </script>
</body>
</html>

输出:

JavaScript 调试

使用console.log()方法: 还有一种方法可以在调试器窗口中显示JS值。

例如: 让我们通过console.log()来看一个JavaScript程序:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Debugging in Javascript</title>
</head>
 
<body>
    <h3>
        GeeksforGeeks
    </h3>
    <h4>Hello Geek</h4>
    <p>
        1. To view the result activate debugging of your
        browser(preferred the latest) by pressing F12 <br>
        2. Select "Console" in the debugger menu.
    </p>
    <script>
        x = "Where do you work?"
        y = "I work at GeeksforGeeks"
        console.log(x);
        console.log(y);
    </script>
</body>
</html>

输出：

JavaScript 调试

设置断点： console.log() 是调试错误的好方法，但设置断点是一种更快、更高效和更好的方法。在这种方法中，断点是在代码中设置的，它会在该点停止代码的执行，以便在那个时刻可以检查变量的值。以下是使用断点而不是console.log()方法的一些优点：

在console.log()方法中，用户必须理解代码并在代码中手动放置console.log()。但在断点方法中，我们可以通过开发者工具在代码的任何地方设置断点，甚至无需了解代码。
在console.log()方法中，我们必须手动打印不同变量的值，但在某个断点处，所有变量的值都会自动显示在开发者工具中。通过按F12键进入开发者工具部分并转到源代码部分。在源代码部分，选择一个JavaScript文件，并通过从提供的列表中选择DOM断点或事件监听器断点来设置断点，这些断点会在事件发生时停止代码的执行。

JavaScript 调试
或者通过单击代码中显示的行号来设置断点。在下面的图像中，断点设置在第23行处。（所使用的代码与上面的示例相同）