在前端开发中，我们经常需要对 JavaScript 进行调试以查找代码中的错误。Google Chrome 提供了一套强大的调试工具，可以帮助我们逐行调试 JavaScript 代码并快速找到问题。
准备工作
首先，我们需要打开 Google Chrome 浏览器，并进入需要调试的页面。接着，按下键盘上的 F12 或通过右键菜单选择「检查」进入 Chrome 开发者工具。
在开发者工具中，选择「Sources」标签页。如果你看不到该标签，请点击右侧面板的「>>」按钮展开更多面板。
断点调试
要逐行调试 JavaScript 代码，我们需要在想要暂停执行的位置设置一个断点。在 Sources 标签页中，找到你想要设置断点的 JavaScript 文件，并点击行号旁边的空白区域。这样就会在该行号上方出现一个红色圆点，表示已设置了断点。
接下来，刷新页面以启动调试，在达到断点时，Chrome 会自动暂停执行代码。
在暂停状态下，可以使用工具栏上的控制按钮来控制代码的执行。这些按钮包括：
- 暂停/继续：暂停或继续执行代码。
- 单步：逐行执行代码并暂停在下一行。
- 步入：进入当前函数内部并暂停在第一行。
- 步过：跳过当前函数并暂停在下一行。
- 调用栈：查看当前正在执行的函数以及它们的调用关系。
监视变量
在调试过程中，我们经常需要查看变量的值以了解代码的状态。Chrome 开发者工具提供了一个监视面板，可以实时查看变量的值。
要打开监视面板，请在 Sources 标签页中找到右侧面板下方的 Watch 面板，并点击「Add Expression」按钮。然后输入您想要监视的表达式并按 Enter 键。
现在，当你跳过一个断点时，监视面板将显示您选择的表达式的值。
演示代码
以下是演示代码，其中包含一个简单的 JavaScript 函数 multiply，它接受两个参数并返回它们的乘积。
-------- ----------- -- - --- ------ - - - -- ---------------- ------- -- ---- --- ---- -- ------------ ------ ------- - --- - - -- --- - - -- --- - - ----------- --- ---------------- ------ -- -------
在该代码中，我们首先定义了一个名为 multiply 的函数，该函数接受两个参数并计算它们的乘积。然后，我们定义了三个变量 x、y 和 z，并调用 multiply 函数将 x 和 y 作为参数传递给它。
如果我们希望在 multiply 函数内部查看 result 变量的值，可以在第三行代码上设置一个断点。然后，单击页面上的「Calculate」按钮以启动调试器，并单步执行代码以查看每一行代码的执行情况。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26202