使用ChromeDevTools调试JavaScript

不要再使用 console.log! 学会在 Chrome Developer Tools 中使用断点来调试代码。

创新互联建站专注于岑巩企业网站建设,响应式网站,商城网站建设。岑巩网站建设公司,为岑巩等地区提供建站服务。全流程定制网站，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

作为一名新的开发人员，发现和修复 bug 挺难的。 您可能会试图随意使用 console.log() 来调试代码使代码正常工作。 不要再这样了。

这篇文章将讲述正确调试的方法! 您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。这是更有效的在代码中查找和修复 bug 的方法。

本教程将向您展示如何调试一个具体 bug，您学到的方法将有助于您调试以后遇到的的 JavaScript 错误。

步骤 1：重现错误

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

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

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

哎呦。结果是错的。 结果应该是 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 按钮[[205532]]，该按钮允许您逐步执行 onClick() 函数，一次一个函数。 当 DevTools 突出显示以下代码行时停止： 

 
 
 
 

  
  
  
  
if (inputsAreEmpty()) { 
 
 
 
 

• 现在点击 Step over next function call 按钮[[205533]]，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 按钮[[205534]]，该脚本将继续执行，直到到达设置断点的代码行为止。

• 看看已经执行的 updateLabel() 中的代码行。 DevTools 打印出 “addend1”，“addend2” 和 “sum” 的值。“sum” 的值看起来很可疑。 它似乎被当做一个字符串，它应该是一个数字。 这可能是错误的原因。

步骤 5：检查变量值

错误的另一个常见原因是当变量或函数产生与预期不同的值。 许多开发人员使用 console.log() 来查看变量如何变化，但由于两个原因，console.log() 可能是乏味和无效的。 其一，你可能需要手动编辑你的代码大量的调用 console.log() 。 其二，您可能不知道哪个变量与错误有关，所以您可能需要打印许多变量。

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

• 在 Sources 面板, 点击 Watch。
• 点击 Add Expression 按钮[[205535]]。 
• 输入 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 按钮[[205536]]，它变蓝色表示它是激活的。DevTools 忽略您设置的任何断点。
4. 点击 Resume script execution 按钮[[205534]]，尝试使用不同的变量，现在 sum 可以正确计算了。 

分享标题：使用ChromeDevTools调试JavaScript
分享路径：http://www.36103.cn/qtweb/news40/5640.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联