作为一个新的开发者,查找和修复BUG
是很困难的。你可能会在你的代码中任意使用console.log()
方法来使得你的代码正确的运行。不再!
这是一篇关于正确调试的方法的文章!您将学习如何使用Chrome
开发者工具设置断点并逐步执行代码。此工作流通常是查找和修复代码中的错误的更有效方法。
本教程向您展示如何调试一个具体的问题,但您学习的一般工作流程有助于调试所有类型的JavaScript
错误。
1.重现BUG
调试的第一步一般都是重现这个BUG
。“重现BUG
”意味着找到一系列一致导致BUG
出现的操作。
您可能需要多次重现该错误,因此请尝试消除任何不必要的步骤。
按照下面的说明重现您将在本教程中修复的错误。
-
这是我们将在本教程中使用的网页。确保在新标签页中打开此页面:OPEN DEMO。
-
在
Number1
中输入5 -
在
Number2
中输入1 -
点击
Add Number1 and Number2
-
查看输入和按钮下方的标签。显示5 + 1 = 51。
2.使用断点来进行调试
DevTools
允许您在执行过程中暂停代码,并在那个时刻检查所有变量的值。暂停代码的工具称为断点。现在就试试:
- 返回
Demo
并按下Command + Option + I(Mac)
或Control + Shift + I(Windows,Linux)
打开DevTools。 - 单击
Sources
选项卡。 - 单击“事件侦听器断点”以展开该部分。
DevTools
显示了可扩展事件类别的列表,例如动画和剪贴板。 - 在“鼠标”事件类别旁边,单击“展开”
- 选中单击复选框。
- 返回
DEMO
,再次单击Add Number1 and Number2
按钮。DevTools
暂停Demo
并在Sources
面板中突出显示一行代码。DevTools
强调了这一行代码:
function onClick() {}
为什么
选择“单击”时,可以在所有单击事件上设置基于事件的断点。单击任何节点,并且该节点具有单击处理程序时,DevTools
会自动暂停该节点的单击处理程序的第一行。
3.逐步完成代码
错误的一个常见原因是脚本以错误的顺序执行。单步执行代码使您可以一次一行地执行代码的执行,并以与预期不同的顺序确定其执行的确切位置。现在就试试:
- 在
DevTools
的Sources
面板上,单击Step into next function call
使用此按钮可以逐步执行onClick()
函数,一行一行。当DevTools
突出显示以下代码行时停止:
if (inputsAreEmpty()) {}
- 现在单击
Step over next
函数调用按钮:
这告诉DevTools
执行inputsAreEmpty()
而不进入它。请注意DevTools
如何跳过几行代码。
这是因为inputsAreEmpty()
计算为false
,因此if语句的代码块没有执行。
这是逐步执行代码的基本思想。如果你看一下get-started.js
中的代码,你会发现bug
可能在updateLabel()
函数中的某个地方。您可以使用其他类型的断点来暂停代码,使其更接近错误的位置,而不是单步执行每行代码。
4.设置另一个断点
代码行断点是最常见的断点类型。当您有一行要暂停的特定代码行时,请使用代码行断点。现在就试试:
- 查看
updateLabel()
中的最后一行代码,如下所示:
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
在此代码的左侧,您可以看到此特定代码行的行号:32。单击32. DevTools
在32的顶部放置一个蓝色图标。这意味着在此处有一行代码断点线。 DevTools
现在总是在执行这行代码之前暂停。
- 单击Resume script execution 按钮:脚本继续执行,直到它到达您放置断点的代码行。
- 查看
updateLabel()
中已执行的代码行。DevTools
打印出addend1
,addend2
和sum
的值。
sum
的值看起来很可疑。当它应该是一个数字时,看起来它被评估为一个字符串。这可能是导致bug
的原因。
5.检查变量的值
bug
的另一个常见原因是变量或函数产生的值与预期值不同。许多开发人员使用console.log()
来查看值随时间的变化情况,但是console.log()
由于两个原因可能很乏味且无效。其一,您可能需要通过调用console.log()
来手动编辑代码。二,您可能不确切知道哪个变量与错误相关,因此您可能需要注销许多变量。
一个DevTools
替代console.log()
是Watch Expressions
。使用Watch Expressions
监控变量的值随时间的变化。顾名思义,Watch Expressions
不仅限于变量。您可以在Watch Expression
中存储任何有效的JavaScript
表达式。现在就试试:
- 在
DevTools
的Sources
面板上,单击Watch
。该部分扩大。 - 点击
Add Expression
- 类型
typeof sum
- 按
Enter
键。DevTools
显示了sumof:“string”
。冒号右侧的值是您的Watch Expression
的结果。
正如所怀疑的那样,当它应该是一个数字时,sum
被评估为一个字符串。这是演示错误的原因。
第二个DevTools
替代console.log()
是控制台。使用控制台评估任意JavaScript
语句。开发人员通常在调试时使用Console
来覆盖变量值。在您的情况下,控制台可以帮助您测试刚刚发现的错误的潜在修复程序。现在就试试:
- 如果您没有打开控制台画板,请按
Escape
将其打开。它在DevTools
窗口的底部打开。 - 在控制台中,键入
parseInt(addend1)
+parseInt(addend2)
。 - 按
Enter
键。DevTools
评估语句并输出6,这是您期望demo
生成的结果。
6.应用修复程序
您已经确定了该bug
的潜在修复方法。剩下的就是通过编辑代码并重新运行demo
来尝试修复。
您无需离开DevTools
即可应用此修复程序。您可以直接在DevTools UI
中编辑JavaScript
代码。
立即尝试:
- 在
DevTools
的Sources
面板上的代码编辑器中,将var sum = addend1 + addend2
替换为var sum = parseInt(addend1)+ parseInt(addend2)
;这是您目前暂停的一行。 - 按
Command + S(Mac)
或Control + S(Windows,Linux)
以保存更改。代码的背景变为红色,表示脚本已在DevTools
中更改。 - 单击“停用断点”
尝试使用不同值的demo
。该demo
现在应该正确计算总和。
此页面的部分内容是基于[ shared by Google的工作进行的修改](),并根据Creative Commons 3.0 Attribution License中描述的条款使用。
本文改编自:Kayce BasquesGet Started with Debugging JavaScript in Chrome DevTools。
想要更多JavaScript
吗?看看我最近的教程/文章:
如果这篇文章有帮助,请点击下面的拍手?按钮几次以显示您的支持!
作者:Brandon Morelli
原文链接:https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db