不要再使用console.log了！学习在Chrome开发者工具中使用断点调试代码。作为新开发人员，查找和修复错误可能很困难。您可能会想随意使用console.log()来调试您的代码以使其工作。不要再这样做了。这篇文章将教你如何正确调试！您将了解如何使用Chrome开发人员工具来设置断点和单步执行代码。这是查找和修复代码中错误的更有效方法。本教程将向您展示如何调试特定的错误，您所学到的内容将帮助您调试将来遇到的JavaScript错误。第一步：重现错误重现错误是调试的第一步。“重现错误”意味着找到一系列始终导致错误出现的操作。您可能需要多次重复该错误，因此请尝试消除任何不必要的步骤。按照以下说明重现您将在本教程中解决的错误。这是我们将在本教程中使用的网页。确保在新选项卡中打开此页面：打开此页面。在数字1中输入5。为数字2输入1。单击添加数字1和数字2。查看输入和按钮下方的标签。显示5+1=51。哎呀。事实证明是错误的。结果应该是6。这是您要修复的错误。第2步：使用断点暂停代码DevTools允许您在执行过程中暂停代码并在该点检查所有变量的值。暂停代码的工具称为断点。立即尝试：返回示例并按Command+Option+I(Mac)或Control+Shift+I（Windows、Linux）打开DevTools。单击源面板。单击事件侦听器断点以打开面板。DevTools显示所有事件的列表，例如动画和剪贴板。然后找到鼠标事件类别并单击以打开列表。选中单击复选框。返回示例，再次单击添加数字1和数字2。DevTools暂停代码并在“源”窗格中突出显示一行代码。如下：functiononClick(){为什么？单击时，为所有单击事件设置一个基于事件的断点。当任意一个节点被点击，并且该节点有点击事件时，DevTools会自动暂停该节点的点击事件。第3步：跳到下一行错误的常见原因是脚本的执行顺序错误。通过代码，您可以逐行逐步执行代码，并确定它偏离预期执行的位置。立即尝试：在DevTools的Sources面板上，单击Stepintonextfunctioncall按钮，这允许您一次单步执行onClick()函数。当DevTools突出显示以下代码行时停止：if(inputsAreEmpty()){现在单击Stepovernextfunctioncall按钮，DevTools执行inputsAreEmpty()而不进入它。请注意DevTools如何跳过这几行代码。这是因为inputsAreEmpty()返回false，所以if语句的代码块没有执行。这就是skip函数的基本思想。如果您查看get-started.js中的代码，您会发现错误可能出在updateLabel()函数中的某处。您可以使用其他类型的断点来暂停代码以接近错误，而不是单步执行每一行代码。第4步：设置附加断点行断点是最常见的断点类型。当你想暂停某一行代码时，可以使用行代码断点。立即尝试：查看updateLabel()中的最后一行代码，如下所示：label.textContent=addend1+'+'+addend2+'='+sum；在此代码的左侧，您可以看到此行代码的行号：32。单击32。DevTools在32上面放了一个蓝色的图标。这意味着在这一行有一个代码行断点。DevTools现在总是在执行该行代码之前暂停。单击Resumescriptexecution按钮，脚本将继续执行，直到到达设置断点的代码行。查看已执行的updateLabel()中的代码行。DevTools打印出“addend1”、“addend2”和“sum”的值。“sum”的值看起来很可疑。当它应该是一个数字时，它似乎被视为一个字符串。这可能是错误的原因。第5步：检查变量值另一个常见的错误原因是变量或函数产生与预期不同的值。许多开发人员使用console.log()来查看变量如何变化，但console.log()可能是乏味且低效的，原因有二。其一，您可能需要手动编辑代码以多次调用console.log()。第二，您可能不知道哪个变量与错误相关联，因此您可能需要打印许多变量。DevTools中console.log()的替代方法是Watch表达式。使用监视表达式监视变量随时间的变化。顾名思义，Watch表达式并不局限于变量。您可以将任何有效的JavaScript表达式存储在Watch表达式中。立即尝试：在“源”窗格中，单击“监视”。单击添加表达式按钮。输入总和类型。按回车。DevTools显示“typeofsum：“string””。冒号右侧的值是监视表达式的结果。正如预测的那样，sum被视为字符串类型。console.log()的另一个替代方法是控制台。可以使用控制台评估任意JavaScript语句。开发人员通常在调试时使用控制台覆盖变量值。在您的情况下，控制台可以帮助查找和修复错误。立即尝试：如果您没有打开控制台抽屉，请按Esc将其打开。它将在您的DevTools窗口底部打开。在控制台中，输入parseInt(addend1)+parseInt(addend2)。按回车。DevTools执行该语句并打印“6”，这是您希望演示产生的结果。第6步：修复您已经确定了该错误的潜在修复方法。剩下的就是通过编辑代码并重新运行演示来尝试修复。您无需离开DevTools即可修复错误。您可以直接在DevToolsUI中编辑JavaScript代码。立即尝试：在DevTools的Sources面板中，替换varsum=addend1+addend2;用varsum=parseInt(addend1)+parseInt(addend2);，这是您当前暂停的行。按Command+S(Mac)或Control+S（Windows、Linux）保存更改。代码的背景变为红色，表明该脚本已在DevTools中更改。单击停用断点按钮，它变为蓝色表示它处于活动状态。DevTools会忽略您设置的任何断点。单击Resumescriptexecution按钮，尝试使用不同的变量，现在总和计算正确。
