学习如何使用Chrome DevTools来进行JavaScript调试

作为一个新的开发者，查找和修复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吗？看看我最近的教程/文章：

如果这篇文章有帮助，请点击下面的拍手?按钮几次以显示您的支持！