在浏览器中调试 JavaScript

提示

1. 使用 console.log() 进行调试：通过 console.log() 方法打印变量或消息到控制台，帮助检查和验证数据是否正确。
2. 使用 debugger 关键字：debugger 关键字可在浏览器中暂停代码执行，允许在 JavaScript 引擎中进行调试。
3. 设置断点：在浏览器的调试窗口中设置断点，使 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;

// 如果您想查看 c 的值
console.log(c);

// 然后进行其他操作
if (c) {
  // 执行某些操作
}

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

console.log() 并不特定于浏览器。它也可以在其他 JavaScript 引擎中使用。

2. 使用 debugger

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

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

我们来看一个示例，

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

// 停止执行
debugger;

console.log(c);

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

上述程序在包含 debugger 的行中暂停了程序的执行。

您可以在检查程序后继续控制流程。

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

3. 设置断点

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

JavaScript 将在每个断点处停止执行，并让您检查值。然后，您可以继续执行代码。

我们通过在 Chrome 浏览器中设置断点来看一个示例。

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

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

在上述方法中，我们使用了 Chrome 浏览器来展示调试过程，仅为了简单起见。然而，它并不是您的唯一选择。

所有好的 IDE 都提供了调试代码的方法。调试过程可能会有所不同，但调试背后的概念是相同的。