Google Chrome 的开发人员工具是一个非常强大的 Web 开发工具，它提供了大量的功能来帮助开发者进行调试和分析。其中之一是 JavaScript 调试器，它可以让你逐步调试你的代码以查找错误。
开启调试器
要使用 JavaScript 调试器，首先需要在 Google Chrome 浏览器中开启开发者工具。可以通过菜单栏中的 "View" -> "Developer" -> "Developer Tools" 或者快捷键 Ctrl + Shift + I 来打开开发者工具。
一旦开发者工具打开，可以点击 "Sources" 选项卡进入 JavaScript 调试器。
添加断点
为了逐步调试代码，你需要在你的代码中添加断点。断点是指在程序执行时暂停程序运行的一个位置。当程序到达断点时，它会停下来并等待用户继续执行程序或者查看变量。
在 Google Chrome 的 JavaScript 调试器中，你可以通过点击代码行号来添加断点。当断点被成功添加后，该代码行的左侧将出现一个红色圆圈。是这样的：
-------- ------ -- -
--------- -- ----
------ - - --
-
--- ------ - ------ ---
--------------------在上述示例代码中，我们在 add() 函数内添加了一个断点。当程序执行到这里时，它将停止，并允许你查看变量和调用栈。
逐步调试代码
当你的代码运行到断点处时，它会暂停执行并等待用户继续。此时，调试器界面下方将出现一组控制按钮： Step over、Step into、Step out 等。
- Step over：单步执行当前行，并跳到下一行。如果当前行是函数调用，则该函数将被完全执行并返回结果，然后程序将停止在下一行。
- Step into：单步执行当前行，并进入函数调用。如果当前行是函数调用，则该函数的第一行将成为下一行执行。
- Step out：退出当前正在执行的函数，直到返回到该函数的调用点。
通过这些按钮，你可以逐步地执行程序，同时查看每一步的变化和输出结果。
查看变量
当程序运行到断点时，你可以使用调试器来查看变量的值。在调试器的右侧面板中，有一个 "Scope" 选项卡，显示了当前作用域的变量和函数。
当你点击某个变量时，它会在下方的 "Watch Expressions" 中显示，并在控制台中打印出它的值。
总结
在 Google Chrome 的 JavaScript 调试器中逐步调试代码是一个非常有用的技能，特别是在调试复杂或有错误的代码时。通过添加断点和使用逐步执行功能，你可以查看每一步的变化和输出结果，从而更快地找到并修复错误。
代码示例：
-------- ------ -- -
--------- -- ----
------ - - --
-
--- ------ - ------ ---
--------------------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30434