抛弃console.log(),拥抱浏览器Debugger
译者按: 切换成本真的不高,建议使用开发者工具来Debug!
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
在我成为一名开发者路上也掉进过一些坑,对于新手来说一个最大的挑战就是debug。刚开始,我一度认为在控制台下使用console.log()打印变量是最棒的方法。而实际上,这样做是相当低效的。我不怕你们嘲笑我,给你们分享一下我曾经是这么干的:
console.log(‘Total Price:’, total) // 查看total的值 console.log(‘Here’) // 打印Here来确认程序执行到这个地方
我想大多数开发者会意识到这不是你应该用来debug的方法,应该有更好的方案!
幸运的是,浏览器的Debug工具很好用!在本文我会介绍谷歌开发者工具。
为了更好地跟随我理解这篇文章的内容,我建议你代开我的示例代码跟着走。地址: 点击这里
第一步:复现BUG
我们通过执行一系列的操作来复现bug:
- 一个代码有bug的计算器,如果你还没有打开,点击这里;
- 在Entree 1输入12;
- 在Entree 2输入8;
- 在Entree 3输入10;
- 在Tax输入10;
- Tip选择20%;
- 点击
Calculate Bill
。正确的结果应该是39.6,但是计算器的结果却是14105.09!
第二步:学习使用Source面板
你需要学会熟练使用开发者工具,你可以使用快捷键Command+Option+I (Mac) 或则 Control+Shift+I (Linux)来打开。(或则右键,选择检查选项,就会弹出开发者面板)
当你点击开发者面板最上面的source
标签,开发者面板会呈现三分的效果,分别是:文件导航器、源代码编辑器以及最右侧的Debug面板。
第三步:设置第一个断点
在我们设置断点之前,我来给你演示如果使用console.log()
是什么效果:
如果你使用开发者工具,就不用写一堆的console.log()
了。我们可以设置断点,通过单步调试来查看变量的值。
断点就是一个你在代码中添加标记,用来告诉浏览器执行到这个位置暂停。
我们将会在整个程序的最开始设置一个断点。
在最右侧的Debugger面板,点击"Event Listener Breakpoints",展开"Mouse",然后选中'click'。
现在如果我们点击Calculate Bill
按钮,程序会停在第一个函数"onClick()"。如果没有执行到这里,那么点击播放按钮,总会跳到index
的第6行。
第四步:单步调试
在整个Debug的过程中,有两种执行的方式:”step into"和“step over"。
“step into"会进入当前遇到的每一个函数内部,然后一行一行执行;
“step over”则会跳过函数内部的细节,直接执行整个函数。
下面是一个展示例子,在右侧的Scope下,所有局部变量的值都显示出来了。
第五步:在某行设置断点
可以单步调试代码是不是很棒?不过一步一步往下执行有点繁琐。通常,我只想知道在某个位置变量的值,而不是要一步一步执行过去。我们可以在某一行去设置断点。
作者备注:能够在代码任意行设置断点查看变量值是我停止使用console.log的主要原因。
在文件的左侧,显示文件行数的位置点击即可设置断点。
注意:如果你发现无法操作,请先清除掉之前选中的click选项。
你可以看到,右侧显示subtotal的值为10182,并且在代码旁边也显示了变量的值。
我想已经知道BUG的原因了:字符串拼接?
第六步:添加观察表达式
这个通常用来观察变量的值在程序的执行过程中的变化,点击右侧的"watch"选项将其展开,你可以输入变量名或者表达式。
为了演示起见,我们观察"entree 1"和"typeof entree1"。
通过查看entree1的类型,发现并不是数字而是字符串。那么问题就出在如何获取这个值的。也许,querySelector()是问题的关键。
第七步:修复代码
通过进一步检查,确定querySelector()就是问题所在。
如何修复呢?我们可以使用Number函数将字符串转换为数字,比如Number(getEntree1())
。
为了编辑代码,你需要到“Elements"选项,它在”Sources"的左侧。如果你没有看到JavaScript代码,你需要展开script标签。 然后右键点击选择“edit as html"。
如果你建立了一个workspace,那么代码会直接保存。不然,可以使用command+s (mac) 或则 control+s (linux)保存一份本地拷贝。
接下来,我们再来试一试看看效果。
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了9亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
java B2B2C springmvc mybatis电子商务平台源码-Spring Cloud Security
一、SpringCloud Security简介Spring Cloud Security提供了一组原语,用于构建安全的应用程序和服务,而且操作简便。可以在外部(或集中)进行大量配置的声明性模型有助于实现大型协作的远程组件系统,通常具有中央身份管理服务。它也非常易于在Cloud Foundry等服务平台中使用。在Spring Boot和Spring Security OAuth2的基础上,可以快速创建实现常见模式的系统,如单点登录,令牌中继和令牌交换。愿意了解源码的朋友直接求求交流分享技术:二一四七七七五六三三 功能: 从Zuul代理中的前端到后端服务中继SSO令牌资源服务器之间的中继令牌使Feign客户端表现得像OAuth2RestTemplate(获取令牌等)的拦截器在Zuul代理中配置下游身份验证 二、SpringCloud Security知识点 封装顺序是这样的:spring security及其各个模块=》spring cloud security=》spring boot autoconfigure的security部分,比如autoconfigure模块有个spring...
- 下一篇
报表数据填报中的自动计算
都说数据是死的,其实它们也可以生龙活虎,到底咋回事呢?且听我慢慢道来。接触过 excel 的小伙伴们都知道,excel 中可以设置表达式,用以支持常见的加减乘除等运算,更复杂的还可以自己写 function,单元格中的数据会根据表达式自己计算出来结果,不要再用计算器了。这么方便的一个功能如果能在报表中实现,而且是在填报表中将自动计算后的数据填入数据库,那岂不是美事一桩?问题又来了,具体应该怎么操作呢?不用担心,不用着急,我们接下来要请出的润乾报表就提供了一整套的解决机制,来,看这里,我们从最简单的部分开始。 简单自动计算最简单的校验方式莫过于加减乘除了,润乾报表可以直接通过“列号 + 行号”的引用方式来获取对应单元格的数据。例如:下图是自动计算工资的自动计算表达式配置:=H3*1.2,表示应发工资是工资的 1.2 倍,用户只需要填写工资基数,就可以计算出来应发工资。 其中,表达式 =H3*1.2 中 H3 表示取第三行 H 列对应单元格的数据如果 H3 单元格是扩展数据,润乾报表可以自动识别扩展数据进行计算,无需另外做配置。 表达式自动运算如果我们在简单计算的基础上,加上一些判断处理,...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果