使用 Chrome DevTools 调试 JavaScript

不要再使用 console.log! 学会在 Chrome Developer Tools 中使用断点来调试代码。 作为一名新的开发人员,发现和修复 bug 挺难的。 您可能会试图随意使用 console.log() 来调试代码使代码正常工作。 不要再这样了。 这篇文章将讲述正确调试的方法! 您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。这是更有效的在代码中查找和修复 bug 的方法。 本教程将向您展示如何调试一个具体 bug,您学到的方法将有助于您调试以后遇到的的 JavaScript 错误。 步骤 1:重现错误 重现错误是调试的第一步。 “再现错误”意味着找到一系列持续导致错误出现的动作。 您可能需要重复该错误多次,所以尝试消除任何不必要的步骤。 按照以下说明重现您将在本教程中解决的 bug。 这是我们将在本教程中使用的网页。 确保在新标签页中打开此页面: 打开https://googlechrome.github.io/devtools-samples/debug-js/get-started或者点击阅读原文。

在 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 按钮 ,该按钮允许您逐步执行 onClick() 函数,一次一个函数。 当 DevTools 突出显示以下代码行时停止: if (inputsAreEmpty()) { 现在点击 Step over next function call 按钮 ,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 按钮 ,该脚本将继续执行,直到到达设置断点的代码行为止。 看看已经执行的 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 代码。 现在就试试: 在 DevTools 的 Sources 面板,用 var sum = parseInt(addend1) + parseInt(addend2); 替换 var sum = addend1 + addend2;,这是您当前暂停的一行。 按 Command + S(Mac)或 Control + S(Windows,Linux)保存更改。 代码的背景更改为红色,表示脚本已在DevTools 中更改。 点击 Deactivate breakpoints 按钮 ,它变蓝色表示它是激活的。DevTools 忽略您设置的任何断点。 点击 Resume script execution 按钮 ,尝试使用不同的变量,现在 sum 可以正确计算了。 编译自:https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db

作者: Brandon Morelli 译者: 众里寻他千百度

转载自:http://www.zcfy.cc/article/learn-how-to-debug-javascript-with-chrome-devtools-codeburst-4183.html

原文发布于微信公众号 - php(phpdaily)

原文发表时间:2018-03-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

Angularjs基础(一)

(一) 模型——视图——控制器     端对端的解决方案,AngularJS 试图成为WEB 应用中的一种段对端的解决方案。AngylarJS 的出众  ...

223100
来自专栏owent

Linux 和 Windows PowerShell 常用工具/命令 记录

enca: http://dl.cihar.com/enca/   文件名编码转换 iconv: 文件编码转换 convmv: 文件名编码转换 ldd: ...

83340
来自专栏章鱼的慢慢技术路

Go语言实践_实现一(客户端)对一(服务器端)聊天室

1,首先启动服务器端,使用listen_socket函数监听IP地址上的客户端连接;

13730
来自专栏Danny的专栏

【MyEclipse】——MyEclipse设置注释模板

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

12830
来自专栏Aloys的开发之路

Linux乱码问题解决方案

linux系统中文件名内容为urf8编码, windows系统中文件名默认为gbk编码, 多数文档使用gbk编码,系统采用utf8编码 无中文输入法导致的乱码 ...

51880
来自专栏小特工作室

Navi.Soft31.开发工具(含下载地址)

1系统简介 1.1功能简述 在软件开发过程中,我们需要经常对字符串、文件、数据库操作。有时需要浏览Json格式串,有时需要浏览Xml格式串,有时需要读取txt或...

24790
来自专栏用户2442861的专栏

qt widget设置Qt::FramelessWindowHint和Qt::WA_TranslucentBackground, 会出现一个bug: 在最小化后还原时界面停止刷新

t widget设置Qt::FramelessWindowHint和Qt::WA_TranslucentBackground, 会出现一个bug: 在最小化后...

15720
来自专栏深度学习之tensorflow实战篇

Python3 pandas read_csv 读取txt文件报错:IOError: Initializing from file failed

错误代码: data=pd.read_csv(‘C:\Users\lenovo\Desktop\停用词文件\后缀词处理260\handle_data_01....

62060
来自专栏cs

Sublime Text 简单教程

这篇文章主要是关于html方面的,sublime使用 其它语言也有补齐功能,可是我不用它。 最有用的快捷键:ctrl+E ---- 输入 html:5...

27560
来自专栏前端下午茶

JS throttle与debounce的区别

一般在项目中我们会对input、scroll、resize等事件进行节流控制,防止事件过多触发,减少资源消耗;在vue的官网的例子中就有关于lodash的deb...

21430

扫码关注云+社区

领取腾讯云代金券