这篇文章主要介绍了如何使用Chrome DevTools调试JavaScript,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<强>步骤1:重现错误
重现错误是调试的* * *步。“再现错误”意味着找到一系列持续导致错误出现的动作。您可能需要重复该错误多次,所以尝试消除任何不必要的步骤。
按照以下说明重现您将在本教程中解决的错误。
这是我们将在本教程中使用的网页。确保在新标签页中打开此页面:打开本页。李李
<>在1号输入5 .
<李>在2号输入1 .
<李>点击添加1号和2号。
<李>看看输入和按钮下方的标签。显示5 + 1=51。
哎呦。结果是错的。结果应该是6。这是您要修复的错误。
<强>步骤2:用断点暂停代码
DevTools允许您在执行过程中暂停代码,并在此时检查所有变量的值。暂停代码的工具称为断点。现在就试试:
返回例子并按命令+选项+ I (Mac)或控制+ Shift +,我(Windows、Linux)打开DevTools。
<李>点击来源面板。
<李>点击事件监听器断点打开该面板.DevTools展示了所有事件的列表,例如动画和,剪贴板。
<李>然后找到鼠标事件类,别点击打开该列表。
<李>选中单击复选框。
返回例子,再次点击添加1号和2号.DevTools暂停代码,高亮显示,来源面板中一行代码。如下:
function onClick (), { 为什么?
当你选中点击,你为所有点击事件设置了一个基于事件的断点。当任意节点被点击,并且该节点有一个点击事件,DevTools,将自动暂停在该节点的点事件。
<强>步骤3:跳到下一行
错误的一个常见原因是脚本以错误的顺序执行。通过代码,您可以一行一行遍历代码执行,并确定其与预期执行不同的位置。现在就试试:
在DevTools的来源面板上,单击进入下一个函数调用按钮
<李>
这是跳过函数基本思想。如果您查看开始。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() 。 其二，您可能不知道哪个变量与错误有关，所以您可能需要打印许多变量。
