如何调试 JavaScript？

在理解“如何调试 JavaScript”之前，我们需要先理解“调试”这个术语。

什么是代码调试？

在编写代码或程序时，我们可能会犯很多错误，例如逻辑错误、语法错误等。调试允许我们找到错误发生的位置/点，因为在调试时，我们可以逐行执行我们的代码。一旦我们找到了犯错的地方，我们就可以进行适当的修改来纠正错误。调试工具还允许我们对程序的代码进行临时更改。将代码找出的错误进行纠正的整个过程称为调试。

总之，我们可以说代码调试是查找和纠正编程错误的过程。

JavaScript 调试器

很明显，调试并非易事，因为它需要大量的练习和经验，所以幸运的是，所有现代的网页浏览器都拥有自己的内置调试器。浏览器使我们能够根据需要随时打开或关闭调试功能，还允许我们设置断点（程序代码的执行可以在此处停止），并在代码执行时检查变量。

通常，我们可以按 F12 键打开内置的 JavaScript 调试器，通过“控制台”来显示 JavaScript 值。

console.log() 方法

只有当浏览器支持调试时，我们才能使用 console.log() 方法来显示 JavaScript 值。

console 方法的语法

我们可以通过一个例子更清楚地理解它。

程序

如何设置断点？

在使用调试器时，我们可以在 JavaScript 的程序代码中设置断点。当程序执行到达任何断点时，程序的执行将停止，并允许我们检查 JavaScript 的值。一旦我们检查了 JavaScript 的值并感到满意，就可以按播放按钮恢复程序的执行。

debugger 关键字

我们可以使用 "debugger;" 关键字在任何一行停止程序的执行。但是，此关键字仅在调试器功能可用时才有效。同样，如果调试器功能可用，我们也可以检查 JavaScript 的值。一旦我们完成了对 JavaScript 值的检查，就可以恢复执行并搜索其他需要纠正的错误。

语法

程序

程序说明

在上面的程序中，我们创建了一个变量 x，其中我们将 15 乘以 5，并使用 debugger 关键字设置了一个断点。当我们执行调试过程时，程序将在该行停止执行，我们可以检查该值。如果不需要任何更改，则可以恢复执行。

让我们通过实际示例来查看。

• 首先，按照给出的步骤在 Chrome 浏览器中打开控制台。
• 打开控制台后，我们就可以进行调试过程了。
• 在调试过程中，程序将在我们使用“debugger”关键字设置断点的行上停止执行，并且还会提供有关 JavaScript 值的必要信息。在下面的图片中，您可以看到控制台和调试过程的样子。

让我们看看如何在不同的现代浏览器中打开控制台。

以下是支持调试的五个主要现代浏览器。

Chrome

• 通过双击其图标打开浏览器。
• 从菜单中，选择“更多工具”选项。
• 在“工具”中，选择“开发者工具”选项。
• 最后，选择“控制台”。

火狐

• 通过双击其图标打开 Firefox 浏览器。
• 从菜单中，选择“Web 开发者”选项。
• 最后，选择“Web 控制台”。

边

• 通过双击其图标打开 Edge 浏览器。
• 从菜单中，选择“开发者工具”选项。
• 最后，选择“控制台”。

Opera

• 通过双击其图标打开 Opera 浏览器。
• 从菜单中，选择“开发者”选项。
• 在“开发者”菜单中，选择“开发者工具”选项。
• 最后，选择“控制台”。

Safari

• 前往 Safari 的“偏好设置”>“高级”菜单。
• 勾选“在菜单栏中显示开发菜单”。
• 当菜单中出现新选项“开发”时
• 选择“显示错误控制台”。