在浏览器中调试 JavaScript

在编写程序时，您会遇到错误，并且会继续遇到。错误不一定是坏事。事实上，大多数时候，它们有助于我们发现代码中的问题。了解如何调试代码并修复错误至关重要。

调试是检查程序、查找错误并修复它的过程。

有多种方法可以调试 JavaScript 程序。

1. 使用 console.log()

您可以使用 console.log() 方法来调试代码。您可以将要检查的值传递给 console.log() 方法，并验证数据是否正确。

语法是

console.log(object/message);

您可以在 console.log() 中传递对象，或者仅传递一条消息字符串。

在上一教程中，我们使用 console.log() 方法打印输出了。但是，您也可以使用此方法进行调试。例如：

let a = 5;
let b = 'asdf';
let c = a + b;

// if you want to see the value of c
console.log(c);

// then do other operations
if(c) {
    // do something
}

在浏览器中使用 console.log() 方法会在调试器窗口中打开该值。

console.log() 不仅限于浏览器。它在其他 JavaScript 引擎中也可用。

2. 使用 debugger

debugger 关键字会停止代码执行并调用调试函数。

debugger 几乎在所有 JavaScript 引擎中都可用。

让我们看一个例子，

let a = 6;
let b = 9;
let c = a * b;

// stops the execution
debugger;

console.log(c);

让我们看看如何在 Chrome 浏览器中使用 debugger。

上述程序会在包含 debugger 的那一行暂停程序执行。

检查完程序后，您可以继续执行。

当您通过按控制台中的播放按钮恢复脚本时，其余代码将执行。

3. 设置断点

您可以在调试器窗口中为 JavaScript 代码设置断点。

JavaScript 将在每个断点处停止执行，并允许您检查值。然后，您可以恢复代码执行。

让我们通过在 Chrome 浏览器中设置断点来举例说明。

您可以通过开发者工具在代码的任何位置设置断点。

设置断点类似于在代码中放置 debugger。在这里，您只需通过点击源代码的行号来设置断点，而不是手动调用 debugger 函数。

在上述方法中，为了简单起见，我们使用了 Chrome 浏览器来演示调试过程。但是，这并非唯一选择。

所有优秀的 IDE 都提供了一种调试代码的方式。调试过程可能略有不同，但调试的底层概念是相同的。