使用Chrome DevTools调试JavaScript

应用 Chrome DevTools 调试 JavaScript

不要再应用 console.log! 学会在 Chrome Developer Tools 中应用断点来底时菌码。

作为一名新的开辟人员，发明和修复 bug 挺难的。您可能会试图随便应用 console.log() 来底时菌码使代码正常工作。不要再如许了。

这篇文┞仿将讲述精确调试的办法! 您将懂得若何应用 Chrome 开辟人员对象来设置断抱病慢慢完成代码。这是更有效的在代码中查找和修复 bug 的办法。

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

本教程将向您展示若何调试一个具体 bug，您学到的办法将有助于您调试今后碰到的的 JavaScript 缺点。

步调 1：重现缺点

重现缺点是调试的第一步。 “再现缺点”意味着找到一系列持续导致缺点出现的动作。您可能须要反复该缺点多次，所以测验测验清除任何不须要的步调。

按照以下解释重现您将在本教程中解决的 bug。

这是我们将在本教程中应用的网页。确保在新标签页中打开此页面：打开本页.
在 Number 1 输入 5。
在 Number 2 输入 1。
点击 Add Number 1 and Number 2。
看看输入和按钮下方的标签。显示 5 + 1 = 51。

哎呦。结不雅是错的。结不雅应当是 6。这是您要修复的缺点。

步调 2：用断点暂停代码

返回例子，再次点击 Add Number 1 and Number 2 。DevTools 暂停代码，高亮显示 Sources 面板一一行代码。如下：

function onClick() {

为什么?

当钠揭捉?中 click，你为所有 click 事宜设置了一个基于事宜的断点。当随便率性节点被点击，并且该节点有一个 click 事宜， DevTools 将主动暂停在该节点的 click 事宜。

步调 3：跳到下一行

缺点的一个常见原因是脚本以缺点的次序履行。经由过程代码，您可以一行一行遍历代码履行，并肯定其与预期履行不合的地位。如今就尝尝：

在 DevTools 的 Sources 面板上，单击 Step into next function call 按钮，该按钮许可内里步履行>
if (inputsAreEmpty()) {

如今点击 Step over next function call 按钮，DevTools 履行 inputsAreEmpty() 而一向入它。留意DevTools 若何跳过这几行代码。这是因为 inputsAreEmpty() 返回 false，所以 if 语句的代码块没有履行。

这是跳过函数根本思惟。如不雅您查看 get-started.js 中的代码，您可以看到该缺点可能在 updateLabel() 函数中的某个地位。您可以应用其他类型的断点来暂停代码慢慢接近缺点的地位，而不是慢慢遍历每行代码。

步调 4：设置别的的断点

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

行断点是最常见的断点类型。当你想暂停某一行代码，可以应用行代码断点。如今就尝尝：

看看 updateLabel() 中的最后一行代码，如下所示：

在这段代码的左边，你可以看到这行代码的行号： 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 按钮。
1/2 1 2 下一页尾页

　　推荐阅读

　　天才李一男年底出狱：任正非接班人27岁当华为副总，因750万入狱

神童”李一男将近出狱了。在被捕之前，他头顶诸多光环，是常人难以企及的技巧天才：15岁考入华中理工大年夜学少年班，27岁成为华为公司的副总裁、传闻中的任正非交班>>>详细阅读

本文标题：使用Chrome DevTools调试JavaScript

地址：http://www.17bianji.com/lsqh/37716.html

1/2 1