不要再使用 console.log！ 学会在 Chrome Developer Tools 中使用断点来调试代码。
作为一名新的开发人员，发现和修复 bug 挺难的。 您可能会试图随意使用 console.log() 来调试代码使代码正常工作。 不要再这样了。
这篇文章将讲述正确调试的方法！ 您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。这是更有效的在代码中查找和修复 bug 的方法。
本教程将向您展示如何调试一个具体 bug，您学到的方法将有助于您调试以后遇到的的 JavaScript 错误。
步骤 1：重现错误重现错误是调试的第一步。 “再现错误”意味着找到一系列持续导致错误出现的动作。 您可能需要重复该错误多次，所以尝试消除任何不必要的步骤。
按照以下说明重现您将在本教程中解决的 bug。
哎呦。结果是错的。 结果应该是 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 面板中一行代码。如下：
function onClick(){
为什么？
当你选中 click，你为所有 click 事件设置了一个基于事件的断点。 当任意节点被点击，并且该节点有一个 click 事件， DevTools 将自动暂停在该节点的 click 事件。
步骤 3：跳到下一行错误的一个常见原因是脚本以错误的顺序执行。 通过代码，您可以一行一行遍历代码执行，并确定其与预期执行不同的位置。 现在就试试：
在 DevTools 的 Sources 面板上，单击 Step into next function call 按钮 ，该按钮允许您逐步执行 onClick() 函数，一次一个函数。 当 DevTools 突出显示以下代码行时停止：
if(inputsAreEmpty()){
现在点击 Step over next function call 按钮 ，DevTools 执行 inputsAreEmpty() 而不进入它。 注意DevTools 如何跳过这几行代码。 这是因为 inputsAreEmpty() 返回 false，所以 if 语句的代码块没有执行。
这是跳过函数基本思想。 如果您查看 get-started.js 中的代码，您可以看到该错误可能在 updateLabel() 函数中的某个位置。 您可以使用其他类型的断点来暂停代码逐步靠近错误的位置，而不是逐步遍历每行代码。
步骤 4： 设置另外的断点行断点是最常见的断点类型。 当你想暂停某一行代码，可以使用行代码断点。 现在就试试：
看看 updateLabel() 中的最后一行代码，如下所示：
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() 。 其二，您可能不知道哪个变量与错误有关，所以您可能需要打印许多变量。