“磨刀不误砍柴工”。大家好,今天给大家简单介绍一个在浏览器中debugger代码的方法,同时给了一个小案例,结合实际讲解。最后简单阐述使用console.log
调试代码和使用断点调试代码的一些个人见解。(大佬可绕路…)
Number 1
中输入 2;Number 2
中输入 3;Add Number 1 and Number 2
按钮,这时候按钮下方的标签显示 2 + 3 = 23。这个例子正确的结果是 5,而不是 23 。这就是我们要修复的错误。打开浏览器开发者工具,将 tab 页切换到 Sources,这是今天的‘主角’,一直围绕它展开讲解。
这里就简单介绍下 Sources 面板的 ui 样式,总共分为三大模块:
首先分析一下产生这个错误结果的过程:在Number 1 中输入 2,然后在Number 2 中输入 3,点击 Add Number 1 and Number 2 按钮,之后出现的错误结果。注意 ,点击
之后出现的。所以我们可以想到,在代码调试区中,Event Listener Breakpoints
可以满足我们的需求:
Event Listener Breakpoints
以展开该部分。 它显示了一个可扩展事件类别列表,例如 Animation 和 Clipboard。 在这里我们只用注意 Mouse 即可,其他的以后用到再了解;Add Number 1 and Number 2
按钮,此时代码编辑区会暂停在触发click事件的函数的可执行代码第一行:// function onClick()
if (inputsAreEmpty()) {
Event Listener Breakpoints
只是众多设置断点中的其中一种,根据我们的需求,我可以设置其他类型的断点来暂停代码。
重点关注代码调试区
中的顶部栏目(没有讲解到的序号功能之后再做详细介绍,其实鼠标放到序号出现的对应提示信息已经说的很清楚了)。
在代码执行的过程中,代码未按顺序执行是产生错误结果的原因之一。逐步(单步)执行代码,就可以来排查是否是该原因造成的错误结果,它是一步一步执行代码的。(以下两种情况是并列的):
// function inputsAreEmpty()
if (getNumber1() === '' || getNumber2() === '') {
inputsAreEmpty()
这个函数不会执行,相当于if (inputsAreEmpty())
被评估为 false。所以代码行会停留在updateLabel();
这就是单步执行代码的基本思想。如果您查看 get-started.js 中的代码,您会发现错误可能出在 updateLabel() 函数中的某处。您可以使用另一种类型的断点来暂停代码,使其更接近错误的可能位置,而不是单步执行每一行代码。
line-of-code breakpoint
是常见的一种断点类型。使用它可以实现暂停任意一行代码,而不是一行一行的去执行。
updateLabel()
函数的最后一行代码: label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
根据上面第五步中代码最右侧的表达式的值可以发现,变量 addend1、addend2、sum的值用引号括起来了,说明它被评估为了 string 类型。现在我们找到了产生bug 的原因,结果应该是 number 类型。以下是开发者工具提供的检查变量的方式:
方式一:使用Scope
Scope
,可以看到Scope
的下方区域,里面包含了当前执行上下文的变量信息,以及全局的变量信息。双击变量值可以进行修改。方式二:使用Watch
Watch
,可以看到Watch
的下方区域,里面可以看到这个符号+
,点击它添加任意表达式,可以实时监听表达式值的变化,比如可以监听sum
值的类型。方式三:使用Console
现在已经知道产生 bug 的原因了,当前任务就是修复它。无需到源代码中操作,在开发者工具就可以实现。在开发者工具中修复好之后,保正没有问题,再回到源代码中写入正确的代码即可。当然应该可以使用工作区直接在开发者工具中编辑,覆盖源代码,无需回到源代码中操作,目前我也没有使用过这种方式,以后可以尝试一下,现在先引用官方的一句话:
This workflow only applies a fix to the code that is running in your browser. It won’t fix the code for all users that visit your page. To do that, you need to fix the code that’s on your servers. You can, however, edit files in DevTools and save them to your sources with Workspaces.
代码编辑区
,将 31 行的代码var sum = addend1 + addend2;
用var sum = parseInt(addend1) + parseInt(addend2)
代替,然后按 Command + S (Mac) 或 Control + S(Windows、Linux)保存更改。Add Number 1 and Number 2
按钮,这时按钮下方的标签显示 2 + 3 = 5。这就是正确的值。现在就聊一聊使用console.log
调试代码好还是使用断点调试代码好,我先阐明我的观点:本人更倾向于使用断点调试代码,虽然前期对于功能不是很熟悉,但是随着对开发者工具的深入了解,发现它对调试代码的能力是很强大,高效的,同时也有助于我们对代码运行时逻辑的理解。(当然也不要那么死板,两者可以结合使用)使用console.log
调试代码,比如下面这样:
function updateLabel() {
var addend1 = getNumber1();
console.log('addend1:', addend1);
var addend2 = getNumber2();
console.log('addend2:', addend2);
var sum = addend1 + addend2;
console.log('sum:', sum);
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}
使用console.log
调试代码,需要回到源代码中,编辑好之后保存,然后再到浏览器中查看。这样每次排产问题,都会进行重复的操作:保存、查看。有时候项目很大,跑一次需要花费一定时间,非常影响效率。而在开发者工具中可以更加快速高效的完成相同的事情,优点如下:
至此,分享内容到此结束。本篇文章围绕怎样在浏览器中使用断点的方式调试代码,通过一步一步操作,最终解决问题。同时也分享了自己对于使用console.log
调试代码和使用断点调试代码的个人见解,如有不妥之处、疑问、不同观点,欢迎评论区讨论!