如何在 Google Chrome JavaScript 调试器中逐步调试代码

Google Chrome 的开发人员工具是一个非常强大的 Web 开发工具，它提供了大量的功能来帮助开发者进行调试和分析。其中之一是 JavaScript 调试器，它可以让你逐步调试你的代码以查找错误。

开启调试器

要使用 JavaScript 调试器，首先需要在 Google Chrome 浏览器中开启开发者工具。可以通过菜单栏中的 "View" -> "Developer" -> "Developer Tools" 或者快捷键 Ctrl + Shift + I 来打开开发者工具。

一旦开发者工具打开，可以点击 "Sources" 选项卡进入 JavaScript 调试器。

添加断点

为了逐步调试代码，你需要在你的代码中添加断点。断点是指在程序执行时暂停程序运行的一个位置。当程序到达断点时，它会停下来并等待用户继续执行程序或者查看变量。

在 Google Chrome 的 JavaScript 调试器中，你可以通过点击代码行号来添加断点。当断点被成功添加后，该代码行的左侧将出现一个红色圆圈。是这样的：

function add(a, b) {
    debugger; // 添加断点
    return a + b;
}

var result = add(2, 3);
console.log(result);

在上述示例代码中，我们在 add() 函数内添加了一个断点。当程序执行到这里时，它将停止，并允许你查看变量和调用栈。

逐步调试代码

当你的代码运行到断点处时，它会暂停执行并等待用户继续。此时，调试器界面下方将出现一组控制按钮： Step over、Step into、Step out 等。

• Step over：单步执行当前行，并跳到下一行。如果当前行是函数调用，则该函数将被完全执行并返回结果，然后程序将停止在下一行。
• Step into：单步执行当前行，并进入函数调用。如果当前行是函数调用，则该函数的第一行将成为下一行执行。
• Step out：退出当前正在执行的函数，直到返回到该函数的调用点。

通过这些按钮，你可以逐步地执行程序，同时查看每一步的变化和输出结果。

查看变量

当程序运行到断点时，你可以使用调试器来查看变量的值。在调试器的右侧面板中，有一个 "Scope" 选项卡，显示了当前作用域的变量和函数。

当你点击某个变量时，它会在下方的 "Watch Expressions" 中显示，并在控制台中打印出它的值。

总结

在 Google Chrome 的 JavaScript 调试器中逐步调试代码是一个非常有用的技能，特别是在调试复杂或有错误的代码时。通过添加断点和使用逐步执行功能，你可以查看每一步的变化和输出结果，从而更快地找到并修复错误。

代码示例：

function add(a, b) {
    debugger; // 添加断点
    return a + b;
}

var result = add(2, 3);
console.log(result);

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30434