如何使用Chrome DevTools调试JavaScript

本文主要介绍如何使用Chrome DevTools调试JavaScript，具有一定的参考价值。有兴趣的朋友可以参考一下。希望你看完这篇文章后收获多多。让边肖带你去了解一下。

步骤 1：重现错误

复制错误是调试的* * *步骤。“错误的再现”意味着找到一系列继续导致错误的动作。您可能需要多次重复此错误，因此请尝试消除任何不必要的步骤。

按照下面的说明重现您将在本教程中解决的错误。

这是我们将在本教程中使用的网页。请务必在新选项卡中打开此页面：打开此页面。

在数字1中输入5。

在数字2中输入1。

单击添加数字1和数字2。

看输入和按钮下面的标签。显示屏5 1=51。

哎哟。结果是错的。结果应该是6。这是您想要修复的错误。

步骤 2：用断点暂停代码

开发工具允许您在执行过程中暂停代码，并在此时检查所有变量的值。暂停代码的工具称为断点。现在就试试吧：

回到例子，按命令选项一(Mac)或控制移位一(Windows，Linux)打开开发工具。

单击“来源”面板。

单击事件侦听器断点打开面板。开发工具显示所有事件的列表，例如动画和剪贴板。

然后找到鼠标事件类别并单击打开列表。

选中单击复选框。

回到示例，再次单击添加数字1和数字2。开发工具暂停代码，并在“源代码”面板中突出显示一行代码。如下所示：

FunctiononClick(){为什么？

当您选择单击时，您可以为所有单击事件设置基于事件的断点。当单击任何节点并且该节点有单击事件时，开发工具将自动暂停该节点上的单击事件。

步骤 3：跳到下一行

错误的一个常见原因是脚本执行顺序错误。通过代码，您可以逐行遍历代码执行，并确定它与预期执行的不同之处。现在就试试吧：

在开发工具的“来源”面板上，单击9501.163.com按钮。

该按钮允许您一步一步地执行onClick()函数，一次执行一个函数。当开发工具突出显示以下代码行时停止：

if(inputarempty()){现在单击下一个函数调用按钮。

，DevTools在不输入的情况下执行input再压缩()。注意开发工具是如何跳过这些代码行的。这是因为inputsAreEmpty()返回false，所以if语句的代码块不会被执行。

这是跳跃函数基本思想。如果您查看get-start . 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() 。  其二，您可能不知道哪个变量与错误有关，所以您可能需要打印许多变量。

DevTools 的一个 console.log() 替代是 Watch 表达式。 使用监视表达式来监视变量随时间的变化。 顾名思义，Watch  表达式不仅限于变量。 您可以在 Watch 表达式中存储任何有效的 JavaScript 表达式。 现在就试试：

• 在 Sources 面板, 点击 Watch。

• 点击 Add Expression 按钮。 

• 输入 typeof sum。

• 按回车。 DevTools 显示 “typeof sum："string"”。 冒号右侧的值是您的观察表达式的结果。

如预测那样，sum 被当做 string 类型 。

console.log() 的另一个替代方法是控制台。可以使用控制台来评估任意的 JavaScript 语句。 开发人员通常使用控制台在调试时覆盖变量值。  在您的情况下，控制台可以帮助找到啊修复 bug 的方法。 现在就试试：

• 如果您没有打开控制台抽屉，请按 Esc 键将其打开。 它将在您的 DevTools 窗口的底部打开。

• 在控制台中，输入 parseInt(addend1)+ parseInt(addend2)。

• 按回车。 DevTools 执行该语句并打印出 “6”，这是您期望演示生成的结果。  

步骤 6：修复

您已经确定了该 bug 的潜在修复方法。 剩下的是通过编辑代码并重新运行演示来尝试修复。 您不需要离开 DevTools 来修复 bug。 您可以直接在  DevTools UI 中编辑 JavaScript 代码。 现在就试试：

1. 在 DevTools 的 Sources 面板，用 var sum = parseInt(addend1) + parseInt(addend2); 替换  var sum = addend1 + addend2;，这是您当前暂停的一行。

2. 按 Command + S(Mac)或 Control + S(Windows，Linux)保存更改。 代码的背景更改为红色，表示脚本已在DevTools  中更改。

3. 点击 Deactivate breakpoints 按钮，它变蓝色表示它是激活的。DevTools 忽略您设置的任何断点。

4. 点击 Resume script execution 按钮，尝试使用不同的变量，现在 sum 可以正确计算了。 

感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用Chrome DevTools调试JavaScript”这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!