如何调试JavaScript程序

在任何编程语言中，很常见在逻辑构建或遵循语法规则方面出现错误，导致代码形成错误并无法按预期执行每个任务。在本文中，我们将学习如何找到这些错误的确切位置以及如何修复它们以使我们的代码按预期工作。找到错误并修复它们的过程称为调试。

调试JavaScript程序有多种方法，如下所示：

通过设置断点
使用debugger关键字
使用console.log()方法

现在让我们通过示例详细了解这些方法，以便帮助您今后调试程序。

通过设置断点

通过设置断点来调试JavaScript代码是相比其他两种方法更好、更高效和更快的调试方法。通过这种调试方式，我们可以在我们编写的代码的不同位置设置不同的断点，当断点遇到时，程序的执行将停止，允许我们检查代码并对其进行修改，从而最小化代码中的错误。

如何设置断点

要在代码的不同位置设置断点，请按照以下步骤进行：

在浏览器窗口中打开 检查元素 或 开发者工具 ，它将显示如下图所示-

如何调试JavaScript程序

现在在上面的图片中标示的位置，转到 sources 选项卡。
打开 sources 选项卡后，向下滚动调试器右侧，直到看到 DOM Breakpoint 或者 Event Listener Breakpoints 。

如何调试JavaScript程序

一旦您到达这些选项，您可以从列表中选择任何一个事件监听器来设置断点。当执行中发生所选事件时，它将停止代码执行。
另一种在任何位置手动设置断点的方法是在源代码选项卡的左侧窗口中选择文件名。
然后只需单击代码中的行号来设置断点，如下图所示−

如何调试JavaScript程序

在以上图像中，断点设置在第20行。

使用调试关键字

我们可以在代码的任意行或点上使用 debugger 关键字。当执行到这个关键字时，它将停止代码的执行，调用一个调试函数（如果有的话），并允许我们检查JavaScript语法和变量，以便纠正写错的部分。当检查和修正代码的部分完成后，我们可以继续执行程序。

语法

可以使用以下语法将debugger关键字添加到代码中以在某个点停止程序的执行：

JavaScript Statements or code
debugger;
JavaScript Statements or code

让我们看一个代码示例，我们将使用debugger关键字在程序的特定点或行停止执行。

步骤

步骤1 - 在步骤1中，我们将添加一个输入元素，以从用户那里获取输入。
步骤2 - 在这一步中，我们将添加一个带有onclick事件的按钮元素，当用户单击按钮时调用一个函数。
步骤3 - 在最后一步中，我们将定义一个包含整个逻辑的JavaScript函数，该函数在进行一些由debugger关键字定义的调试步骤后，在用户屏幕上显示输出。

示例

以下示例将说明使用debugger关键字调试JavaScript程序 –

<!DOCTYPE html>
<html lang = "en">
<body>
   <h2>How to debug JavaScript program?</h2>
   <p>Enter a number:</p>
   <input type = "number" id = "inp1"> <br> <br>
   <button id = "btn" onclick = "display()">See Result</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById('inp1');
         debugger;
         var number1 = inp1.value;
         debugger;
         result.innerHTML += " The number entered by you is: <b> " + number1 + " </b> <br> ";
      }
   </script>
</body>
</html>

在上面的示例输出中，我们可以看到当我们尝试在源代码选项卡中调试代码时，程序执行遇到调试器关键字时会自动停止，并允许我们根据需要对程序进行更改。否则，它将继续执行程序。在调试时，用户屏幕上将不会显示任何内容，因为程序执行停在中途。

如何调试JavaScript程序

使用console.log()方法

console.log()是一种方法，用于在浏览器控制台窗口中显示JavaScript变量的值，以检查其正确性。它将帮助我们编写适当逻辑的干净代码，并使程序按预期运行。我们可以将要在控制台窗口上打印的变量传递到此方法的括号内。

语法

可以使用下面的语法使用console.log()方法来调试JavaScript代码：

console.log(parameter);

让我们了解一下console.log()方法在调试下面作为示例的JavaScript程序中的使用。

步骤

此程序和上面的程序的算法几乎相同。您需要将上面的程序或算法中的debugger关键字替换为带有某些参数或值的console.log()方法。

示例

下面的示例将向您解释如何在调试JavaScript代码时使用console.log()方法。

<!DOCTYPE html>
<html lang = "en">
<body>
   <h2>How to debug JavaScript program?</h2>
   <p>Enter a number:</p>
   <input type = "number" id = "inp1"><br> <br>
   <button id = "btn" onclick = "display()">See Result</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById('inp1');
         var number1 = inp1.value;
         console.log(number1);
         result.innerHTML += " The number entered by you is: <b> " + number1 + " </b> <br> ";
      }
   </script>
</body>
</html>

在上述代码的输出图像中，如果控制台窗口中通过console.log()方法打印的值与您每次输入的值相同，则代码正常工作，代码中不会有错误。但是，如果值不同或控制台中没有打印任何内容，则需要分析您的代码，并进行必要的更改或进行调试。
如何调试JavaScript程序