原文链接
How to stop using console.log() and start using your browser’s debugger
在我学习软件开发的过程中,遇到了很多的问题.跟大多数开发人员一样,遇到的最常见的问题就是调试代码.
起初,我发现可以通过console.log()来显示信息发现错误. 但这是相当低效的,为了说明,下面是一些简单的使用说明案例:
console.log(‘Total Price:’, total)
console.log(‘Here’)
我想大多数人都觉得这肯定不是最好的代码调试方法.一定会有更好的方式去调试代码.
幸运的是,你的浏览器就是最好的调试工具,下面,我会介绍Chrome Developer Tools.
在这篇文章中,我将会给代码打断点,单步调试代码,设置watch,并且要演示使用Chrome Developer Tools来解决代码bug.
为了学习这篇简短的教程,这里有我已经写好的代码,你可以直接点击打开查看点击这里
第一步,重现bug
我们执行一系列操作,来重现bug.
- 假如我们正在使用一个有严重bug的小费计算器.(如果你还没有打开样例文件,到这里here)
- 在Entree 1框输入12
- 在Entree 2框输入8
- 在Entree 3框输入10
- 在Tax框输入10
- 在小费栏选择20%
- 点击Calculate Bill(计算)按钮,结果应该是39.6,然而我们看到结果竟然是15500.1(~~~:这个计算逻辑我也不清楚,原文就是如此.重点也不是这个)
第二步,学习使用Sources功能面板
想要在chrome浏览器中调试代码,需要打开开发者工具.Mac 使用快捷键(Command+Option+I),Linux 使用快捷键(Control+Shift+I),Win 使用快捷键(Ctrl+Shift+I).当然也可以使用f12.
点击最上行的sources面板,你可以看到sources面板分为三栏,从左侧到右侧依次是: 文件导航窗口,源码查看器,调试面板.试着随便点点.
第三步,设置第一个断点
在演示如何打断点之前,我们先看一下使用console.log()来观察变量的值.看下面的图片,我们的代码就是这样的.
幸运的是,以后我们可以使用开发者工具打断点来观察变量的值.当设置好断点后,浏览器在断点处暂停执行代码,允许你查看此时变量的值来进行调试
在程序中,我们点击了Calculate Bill(计算)按钮,执行了小费计算,我们为鼠标点击事件设置一个断点,浏览器会将断点设置到点击事件执行的第一行代码处.
在最右侧的调试面板展开
Event Listener Breakpoints.再找到Mouse栏,点击展开,选中click选择框
现在,当你点击Calculate Bill(计算)按钮,程序会在onClick()的第一行代码处暂停执行.
第四步,跳过当前断点处的代码行
在调试面板中,你可以点击两个按钮来执行step into和step over操作.
step into将进入函数内部执行代码
step over将继续执行代码一直到下一行
下图是我进行代码调试的截图,在右侧scope分栏,可以看到三个变量的值.
第五步,在某一行上打断点
一般的,我们只想观察具体某一行代码的值,这样的话,我们需要将断点,设置到某一具体行上.
可以将断点设置到具体的某一行,这就是我弃用console.log()的原因
现在,你可以在你想设置断点的行的左侧行号处进行点击,然后执行你的代码,当程序执行到此时,会暂停执行,你可以看到此时变量值的详细信息.
注意: 请确保已经取消勾选click选择框
你可以看到,subtotal 变量的值已经在当前代码行右侧显示出来,其他值也在scope栏里可以看到.
我们可以看到,结果是将三个变量的值进行了字符串拼接,而不是进行四则运算,这肯定不是正确的逻辑.
让我们设置watch expressions,观察变量是在哪里发生变化的.
第六步,新建 监控表达式
我们知道,三个变量的值并没有按照我们的预期执行了相加计算,让我们为每一个变量都设置一个watch expression
点击右侧调试面板中的watch区域,再点击+号,输入变量名.
样例中,我设置了entree1的变量值到watch区域.
我想,我已经找到了问题所在,第一个变量entree1是以字符串类型去存储的,我觉得是因为使用querySelector()方法的问题.我觉得我需要检查一下其他两个变量是否都有同样的问题
我们继续调试代码并且修复这个bug.
第七步,修改代码
经过进一步的检查,确实是因为使用了querySelector()方法所造成的
我们应该怎么修改呢? 我们可以将string类型的变量转换为数值类型的值. 我们可以用Number(getEntree1())替换74行的代码
为了可以编辑代码,我们需要跳转到
Element面板,他在sources面板左侧.如果你不能看到脚本代码处,你需要找到script元素,然后右击script元素,选中edit as html
如果你已经添加了workspace,按保存快捷键chrome浏览器会直接将修改同步到你的本地工程文件.否则的话,为了防止丢失变更,你需要使用快捷键来保存你的修改(command+s (mac) or control+s (linux)).
你可以打开你保存的文件.现在在浏览器重新打开此页面,再次执行相同的步骤
Voila!
本篇文章编写的灵感来自 chrome浏览器官方的调试文档 Get Started with Debugging Javascript in Chrome DevTools 作者 Kayce Basques. 本篇文章的源代码地址: https://github.com/paragzaveri/chromeDevTools