使用 Chrome DevTools 调试 JavaScript

10年服务1亿Tian开发工程师

彻底地摒弃 console.log 调试!了解如何在Chrome开发者工具中使用断点来调试代码。

作为一名新开发人员,查找和修复 bug 可能非常困难。 你可能会随机使用 console.log(),试图查看代码的工作工作情况。 那么我现在告诉你,你不需要这么麻烦。

这篇文章是关于调试的正确方法!你将学习如何使用 Chrome 开发人员工具来设置断点,并逐步调试代码。这个工作流通常是在查找和修复代码中的 bug 时更有效的方法。

本教程将向你展示如何调试一个特定问题,但你所学习的一般工作流程有助于调试所有类型的 JavaScript bug。

步骤1:重现 bug

重现 bug 始终是调试的第一步。要重现这个 bug ,就意味着要找到一系列持续导致这个 bug 出现的操作。您可能需要多次重现该 bug ,因此尝试消除任何不必要的步骤。

按照下面的说明来重现本教程中将要修复的 bug 。

  • 这是我们将在本教程中使用的网页。请确保在新标签中打开此页面:。
  • 在 DEMO 中,在 “Number 1” 文本框中输入 5
  • 在 “Number 2” 文本框中输入 1
  • 单击 “Add Number 1 and Number 2” 按钮。
  • 看看输入和按钮下方的标签显示 5 + 1 = 51

显然,那结果是错的。结果应该是 6。这就是你要修复的 bug 。

步骤2:用断点暂停代码

DevTools 可以在执行过程中暂停代码,并且可以在此刻检查所有变量的值。用于暂停代码的工具称为 断点 (breakpoint)。 现在就试试:

返回 DEMO 页面,并按 Command + Option + I(Mac)或 Control + Shift + I(Windows,Linux)打开 DevTools 。
– 单击 Sources(源代码) 选项卡。
– 单击 Event Listener Breakpoints(事件监听断点) 以展开该部分。DevTools 会显示展开事件类别的列表,如 Animation(动画) 和 Clipboard(剪贴板) 等等。
– 单击 Mouse(鼠标)事件类别旁边“展开”按钮,展开事件列表
– 勾选 click(点击) 复选框。如图:
– 返回 DEMO 页面,再次点击 “Add Number 1 and Number 2” 按钮。 DevTools 暂停 DEMO 页面,并在 Sources(源代码) 面板中会显示 get-started.js 文件内容,并且突出显示一行代码:

function onClick() {

为什么?

当你勾选 click(点击) 时,你可以在所有 click(点击) 事件上设置基于事件的断点。单击任何节点,并且当该节点具有 click 处理程序时,DevTools 会自动在该节点的 click 处理程序的第一行暂停。

其他设置断点的方式

这部分下面也会讲,应网友要求加上来的内容,首先大致了解一下断点。

如果你很熟悉你的调试代码,并且你大概知道 bug 是在哪里产生的,那么你可以在特定代码行上设置断点。

要在特定代码行上设置断点,首先打开 Sources(源文件)面板,并在左侧的File Navigator(文件导航器)窗格中选择该脚本。如果找不到File Navigator(文件导航器),按下Toggle file navigator(切换文件导航器)按钮(隐藏/显示文件导航器按钮)。

在源代码的左侧,您可以看到行号。这个区域称为 line number gutter(行号槽)。单击行号槽中的行号,就会在该行代码上添加一个断点。如图:

更多关于断点设置的方法可以查看官方文档:https://www.7psus5.com/doc/chrome-devtools/javascript/add-breakpoints/

特别注意

或许你看到的高亮显示的代码并不是 get-started.js 中的 function onClick() { 这一行,而是别的脚本文件。这事什么情况呢?一般这种情况可能是你安装了一些 Chrome 扩展。要排除掉这些扩展的干扰,你只需点击右上角的 “更多” 图标 ,选择 “打开新的无痕式窗口” ,新版本的 Chrome 叫做 “打开新的隐身窗口” 。系统会显示一个新窗口。检查顶部一角是否有“隐身模式”图标 。隐身窗口非常干净,排除了所有可能影响你调试的扩展,甚至是缓存等等。所以在你调试 JavaScript 代码的时候,建议你在 “隐身窗口” 下进行。

您也可以使用键盘快捷键来打开隐身窗口:

  • Windows、Linux 或 Chrome 比赛:按 Ctrl + Shift + n
  • Mac:按 ? + Shift + n

步骤3:单步调试代码

所有步骤选项均通过边栏中的可点击图标断点按钮栏 表示,但也可以通过快捷键触发(鼠标悬停在操作图标上就可以看到快捷键)。下面是简要介绍:

图标/按钮 操作 描述
Resume Resume 继续执行直到下一个断点。如果没有遇到断点,则继续正常执行。
Long Resume Long Resume 继续执行,将断点停用 500 毫秒。便于暂时跳过断点,否则会持续暂停执行代码,例如,循环内的断点。点击并按住 Resume,直到展开以显示操作。
Step Over Step Over 不管下一行发生什么都会执行,并跳转到下一行。
Step Into Step Into 如果下一行包含一个函数调用,Step Into 将跳转并在其第一行暂停该函数。
Step Out Step Out 函数调用后,执行当前函数剩余部分,然后在下一个语句暂停。
Deactivate breakpoints Deactivate breakpoints 暂时停用所有断点。用于继续完整执行,不会真正移除断点。再次点击以重新激活断点。
Pause on exceptions Pause on exceptions 在发生异常时,自动暂停执行代码。

下面我们开始来进行调试。

错误的一个常见原因是脚本以错误的顺序执行。通过您的代码,您可以浏览代码的逐行执行,并且确切地知道不同于你预期的顺序执行的位置。现在就试试:

在 DevTools 的 Sources(源代码) 面板上,单击 “Step into next function call”(进入下一个函数调用) 进入下一个函数调用

该按钮允许您单步执行 onClick() 函数,一次一行。 当 DevTools 突出显示以下代码行时停止:

if (inputsAreEmpty()) {

现在点击 Step over next function call(跳过,下一个函数调用) 跳过,下一个函数调用按钮:

这告诉 DevTools 执行 inputsAreEmpty() 而不进入这个函数调试。注意DevTools 是如何跳过这几行代码的。这是因为 inputAreEmpty() 被计算为false ,所以if语句的代码块没有执行。

这是单步调试代码的基本思想。如果你看看 get-started.js 中的代码,你可以看到这个 bug 可能在 updateLabel() 函数的某个地方。而不是完整调试每一行代码,你可以使用其他类型的断点来暂停更接近错误位置的代码。

步骤4:设置另一个断点

代码行断点是最常见的断点类型。 当你想暂停特定的代码行时,可以使用代码行断点。 现在就试试:

1.看看 updateLabel() 中的最后一行代码,如下所示:

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

在这段代码的左边,你可以看到这行代码的行号:32 。点击 32 。DevTools 在 32 上面放置一个蓝色图标。这就意味着这行代码上有一个代码行断点。DevTools 现在总是在执行到该代码行之前暂停。

2.点击 “Resume script execution”(恢复执行直到下一个断点) 恢复执行直到下一个断点按钮:

该脚本将继续执行,直到执行到设置断点的代码行为止。

3.看看已经执行的 updateLabel() 中的代码行。 DevTools 打印出 addend1addend2sum 的值。

sum 的值看起来很可疑。它似乎被求值为一个字符串,但是它应该是一个数字。这可能是错误的原因。

步骤5:检查变量值

Bug 的另一个常见原因是变量或函数产生与预期不同的值。许多开发人员使用 console.log() 来查看随时间变化的值,console.log() 可能非常繁琐和无效,由于两个原因:一,你可能需要手动编辑代码,并对 console.log() 进行大量调用。二,你可能不知道哪个变量与 bug 有关,所以你可能需要注销很多变量。

DevTools 中有一个 “Watch Expressions(表达式监视器)” 可以替代。 使用 Watch Expressions 可以监视随时变化的变量。 顾名思义, Watch Expressions 不仅限于监视变量,你可以在 Watch Expressions 中存储任何有效的 JavaScript 表达式。 现在就试试:

  • 在 DevTools 的 “Sources(源文件)” 面板上,单击 “Watch”。 展开该部分。
  • 点击 “Add Expression(添加表达式)” 按钮 Add Expression(添加表达式)
  • 键入 typeof sum
  • 按回车键。 DevTools 显示 typeof sum: "string"。 冒号右侧的值是你“Watch Expression” 的结果。

如图:

Watch Expressions(表达式监视器)

这个可以作为 bug 出现的怀疑,sum 被求值为一个字符串,它应该是一个数字。这就是 DEMO 中产生 bug 的原因。

console.log() 的另一个替代方法是使用 DevTools 中 “Console(控制台)”。使用控制台也可以求值任意的 JavaScript 语句。开发人员通常使用控制台在调试时覆盖变量值。在当前情况下,你可以使用控制台修复程序中刚刚发现的潜在 bug 。 现在就试试:

  • 如果你还没有打开抽屉式控制台,请按 Esc键将其打开。 它将在您的 DevTools 窗口的底部打开。
  • 在控制台中,键入 parseInt(addend1)+ parseInt(addend2)
  • 按回车键。 DevTools 对上面语句求值并打印出 6,这正是你期望 demo 生成的结果。

如图:

控制台调试

步骤6:应用修复

步骤6:应用修复

你已经确定了该 bug 的问题所在,并且有了修复方案。剩下的是通过编辑代码并重新运行 Demo 来尝试修复。你不需要离开 DevTools 来应用修复。您可以直接在 DevTools UI 中编辑 JavaScript 代码。现在就试试:

  1. 在 DevTools 的 “Sources(源文件)” 面板的代码编辑器中,使用 var sum = parseInt(addend1) + parseInt(addend2); 替换 var sum = addend1 + addend2。 就是你当前暂停的一行。
  2. Command + S (Mac)或 Control + S(Windows,Linux)保存更改。代码的背景更改为红色,表示脚本已在 DevTools 中更改。
  3. 单击“Deactivate breakpoints(停用断点)”按钮 停用断点。 当它改变成蓝色的时候,表示它是活动的,这时,DevTools 会忽略你设置的任何断点。
  4. 点击 “Resume script execution(恢复脚本执行)”按钮 恢复脚本执行

尝试在 Demo 中使用不同的值,现在 Demo 应该能够正确地计算 sum 值 。

更多高级的调试技能

最后本文只是像你展示了 Google Chrome DevTools 中最常用的调试方法。但是可以完成大部分的调试需求。当然还有很多高级的调试方法,比如调用栈,Source Maps(源码映射)调试等等。

完整的调试说明可以查看 Chrome 开发者工具官方文档 中 检查和调试JavaScript 部分:https://www.7psus5.com/doc/chrome-devtools/javascript/add-breakpoints/ ,你应该会得到不少收获。

本文大部分内容来自:

赞(1) 打赏
未经允许不得转载:WEBTian开发 » 使用 Chrome DevTools 调试 JavaScript

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏