使用Chrome DevTools调试JavaScript-阿里云开发者社区

开发者社区> 行者武松> 正文

使用Chrome DevTools调试JavaScript

简介:
+关注继续查看

使用 Chrome DevTools 调试 JavaScript

不要再使用 console.log! 学会在 Chrome Developer Tools 中使用断点来调试代码。

作为一名新的开发人员,发现和修复 bug 挺难的。 您可能会试图随意使用 console.log() 来调试代码使代码正常工作。 不要再这样了。

这篇文章将讲述正确调试的方法! 您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。这是更有效的在代码中查找和修复 bug 的方法。

本教程将向您展示如何调试一个具体 bug,您学到的方法将有助于您调试以后遇到的的 JavaScript 错误。

步骤 1:重现错误

重现错误是调试的第一步。 “再现错误”意味着找到一系列持续导致错误出现的动作。 您可能需要重复该错误多次,所以尝试消除任何不必要的步骤。

按照以下说明重现您将在本教程中解决的 bug。

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

哎呦。结果是错的。 结果应该是 6。 这是您要修复的错误。

步骤 2:用断点暂停代码

DevTools 允许您在执行过程中暂停代码,并在此时检查所有变量的值。 暂停代码的工具称为断点。 现在就试试:

  • 返回例子并按 Command + Option + I(Mac)或 Control + Shift + I(Windows,Linux)打开DevTools。
  • 点击 Sources 面板。
  • 点击 Event Listener Breakpoints 打开该面板。DevTools 展示了所有事件的列表, 例如 Animation 和 Clipboard。
  • 然后找到 Mouse 事件类别,点击打开该列表。
  • 选中 click 复选框。

返回例子 ,再次点击 Add Number 1 and Number 2 。DevTools 暂停代码,高亮显示 Sources 面板中一行代码。如下:


  1. function onClick() { 

为什么?

当你选中 click,你为所有 click 事件设置了一个基于事件的断点。 当任意节点被点击,并且该节点有一个 click 事件, DevTools 将自动暂停在该节点的 click 事件。

步骤 3:跳到下一行

错误的一个常见原因是脚本以错误的顺序执行。 通过代码,您可以一行一行遍历代码执行,并确定其与预期执行不同的位置。 现在就试试:

  • 在 DevTools 的 Sources 面板上,单击 Step into next function call 按钮,该按钮允许您逐步执行 onClick() 函数,一次一个函数。 当 DevTools 突出显示以下代码行时停止: 

  1. if (inputsAreEmpty()) { 
  • 现在点击 Step over next function call 按钮,DevTools 执行 inputsAreEmpty() 而不进入它。 注意DevTools 如何跳过这几行代码。 这是因为 inputsAreEmpty() 返回 false,所以 if 语句的代码块没有执行。 
  • 这是跳过函数基本思想。 如果您查看 get-started.js 中的代码,您可以看到该错误可能在 updateLabel() 函数中的某个位置。 您可以使用其他类型的断点来暂停代码逐步靠近错误的位置,而不是逐步遍历每行代码。

步骤 4: 设置另外的断点

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

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

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

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

  • 点击 Resume script execution 按钮,该脚本将继续执行,直到到达设置断点的代码行为止。
  • 看看已经执行的 updateLabel() 中的代码行。 DevTools 打印出 “addend1”,“addend2” 和 “sum” 的值。“sum” 的值看起来很可疑。 它似乎被当做一个字符串,它应该是一个数字。 这可能是错误的原因。

步骤 5:检查变量值

错误的另一个常见原因是当变量或函数产生与预期不同的值。 许多开发人员使用 console.log() 来查看变量如何变化,但由于两个原因,console.log() 可能是乏味和无效的。 其一,你可能需要手动编辑你的代码大量的调用 console.log() 。 其二,您可能不知道哪个变量与错误有关,所以您可能需要打印许多变量。

DevTools 的一个 console.log() 替代是 Watch 表达式。 使用监视表达式来监视变量随时间的变化。 顾名思义,Watch 表达式不仅限于变量。 您可以在 Watch 表达式中存储任何有效的 JavaScript 表达式。 现在就试试:

  • 在 Sources 面板, 点击 Watch。
  • 点击 Add Expression 按钮。 
  • 输入 typeof sum。
  • 按回车。 DevTools 显示 “typeof sum:"string"”。 冒号右侧的值是您的观察表达式的结果。

如预测那样,sum 被当做 string 类型 。

console.log() 的另一个替代方法是控制台。可以使用控制台来评估任意的 JavaScript 语句。 开发人员通常使用控制台在调试时覆盖变量值。 在您的情况下,控制台可以帮助找到啊修复 bug 的方法。 现在就试试:

  • 如果您没有打开控制台抽屉,请按 Esc 键将其打开。 它将在您的 DevTools 窗口的底部打开。
  • 在控制台中,输入 parseInt(addend1)+ parseInt(addend2)。
  • 按回车。 DevTools 执行该语句并打印出 “6”,这是您期望演示生成的结果。  

步骤 6:修复

您已经确定了该 bug 的潜在修复方法。 剩下的是通过编辑代码并重新运行演示来尝试修复。 您不需要离开 DevTools 来修复 bug。 您可以直接在 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 按钮,尝试使用不同的变量,现在 sum 可以正确计算了。 
本文作者:Brandon Morelli
来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
AliOS Things 使用HAL库的USB_DEVICE MSC调用SPI W25Q128
AliOS Things的USB_DEVICE MSC的SPI W25Q128实现
846 0
iOS获取和监测设备基本信息——UIDevice的使用
iOS获取和监测设备基本信息——UIDevice的使用
18 0
CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳(转)
网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章,但我觉得太过繁杂,要不给出一张看也看不懂的CSS Hack归纳表,要不就是给出一大堆代码说明问题,不便于学习与使用。
884 0
chrome浏览器使用记录
出现错误 net::ERR_BLOCKED_BY_CLIENT 出现这个错误一般是因为chrome安装了adblocker等这样的插件,这些插件会把路径及文件名中包含广告字样的文字禁止掉,比如:advert,ads,advertise等。
704 0
Spring-Boot-Devtools使用
Spring-Boot-Devtools在IDEA下使用示例
385 0
使用 Chrome Dev tools 分析应用的内存泄漏问题
使用 Chrome Dev tools 分析应用的内存泄漏问题
3 0
+关注
行者武松
杀人者,打虎武松也。
14545
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载