使用 Google Chrome 逐行调试 Javascript

阅读时长 3 分钟读完

在前端开发中,我们经常需要对 JavaScript 进行调试以查找代码中的错误。Google Chrome 提供了一套强大的调试工具,可以帮助我们逐行调试 JavaScript 代码并快速找到问题。

准备工作

首先,我们需要打开 Google Chrome 浏览器,并进入需要调试的页面。接着,按下键盘上的 F12 或通过右键菜单选择「检查」进入 Chrome 开发者工具。

在开发者工具中,选择「Sources」标签页。如果你看不到该标签,请点击右侧面板的「>>」按钮展开更多面板。

断点调试

要逐行调试 JavaScript 代码,我们需要在想要暂停执行的位置设置一个断点。在 Sources 标签页中,找到你想要设置断点的 JavaScript 文件,并点击行号旁边的空白区域。这样就会在该行号上方出现一个红色圆点,表示已设置了断点。

接下来,刷新页面以启动调试,在达到断点时,Chrome 会自动暂停执行代码。

在暂停状态下,可以使用工具栏上的控制按钮来控制代码的执行。这些按钮包括:

  • 暂停/继续:暂停或继续执行代码。
  • 单步:逐行执行代码并暂停在下一行。
  • 步入:进入当前函数内部并暂停在第一行。
  • 步过:跳过当前函数并暂停在下一行。
  • 调用栈:查看当前正在执行的函数以及它们的调用关系。

监视变量

在调试过程中,我们经常需要查看变量的值以了解代码的状态。Chrome 开发者工具提供了一个监视面板,可以实时查看变量的值。

要打开监视面板,请在 Sources 标签页中找到右侧面板下方的 Watch 面板,并点击「Add Expression」按钮。然后输入您想要监视的表达式并按 Enter 键。

现在,当你跳过一个断点时,监视面板将显示您选择的表达式的值。

演示代码

以下是演示代码,其中包含一个简单的 JavaScript 函数 multiply,它接受两个参数并返回它们的乘积。

-- -------------------- ---- -------
-------- ----------- -- -
  --- ------ - - - --
  ---------------- ------- -- ---- --- ---- -- ------------
  ------ -------
-

--- - - --
--- - - --
--- - - ----------- ---
---------------- ------ -- -------

在该代码中,我们首先定义了一个名为 multiply 的函数,该函数接受两个参数并计算它们的乘积。然后,我们定义了三个变量 xyz,并调用 multiply 函数将 xy 作为参数传递给它。

如果我们希望在 multiply 函数内部查看 result 变量的值,可以在第三行代码上设置一个断点。然后,单击页面上的「Calculate」按钮以启动调试器,并单步执行代码以查看每一行代码的执行情况。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/26202

纠错
反馈