做前端页面,用JavaScript 在调试 Bug 时有哪些技巧?

原链接:https://www.zhihu.com/question/35667558/answer/530643532

编程新手刚开始查找和修复 bug 还是比较困难的,你可能会随机使用 console.log(),试图让代码正确运行。看了本文再也不用这么干了!

下面就教你一个调 bug 的正确姿势。你会学习如何使用 Chrome 开发者工具设置断点,逐步调试代码。这种工作方法能让你查找和修复 bug 的效率大幅提高。

虽然这篇教程展示的是怎么调试一个具体的 bug,但是整体工作思路对调试任何类型的 JavaScript bug 都是有指导意义的。

步骤1:重现 bug

调试 bug 的第一步就是重现 bug。所谓“重现 bug”就意味着要找到一系列持续导致出现这个 bug 的操作。你可能需要多次重现 bug,所以尽可能地减少不必要的步骤。

按照如下指令来重现本教程需要修复的 bug。

这是我们本教程会使用的网页,确保以新的标签:Demo: Get Started Debugging JavaScript with Chrome DevTools

在 demo 中,在“Number 1”文本框中输入 5

在“Number 2”文本框中输入数字 2

点击“Add Number 1 and Number 2”按钮

查看输入和按钮下方的标签,显示 5 + 1 = 51.

这不,bug 来了,这里结果明显错了,应该是 6。这就是你要修复的 bug。

步骤2:使用断点暂停代码

Chrome 开发者工具(以下简称 DevTools)能让你在代码运行期间暂停代码,并检查此刻所有变量的值。暂停代码的工具叫做 Breakpoint。试试吧:

回到 demo,按 Command+Option(Mac)或 Ctrl+shift+I(Windows,Linux)打开DevTools

点击“Source”标签

点击“Event Listener Breakpoints”(事件监听断点)展开该部分。DevTools 会展示一列可扩展的事件类别,比如 Animation和Clipboard

在“Mouse”事件类别旁边点击“Expand”

检查“click”复选框

<img src="https://pic2.zhimg.com/v2-59cc59b530364c601a704dc3b5a5a509_b.jpg" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="536" class="origin_image zh-lightbox-thumb" width="800" data-original="https://pic2.zhimg.com/v2-59cc59b530364c601a704dc3b5a5a509_r.jpg">

回到 demo,再次点击“Add Number 1 and Number 2”.DevTools 会暂停 demo,在“Source”面板上高亮显示一行代码,高亮显示的是:

function onClick() {

为啥?

当你选择“Click”时,会在所有的 click 事件上设置一个基于事件的断点。每当节点被点击,并且节点有 click 处理程序时,DevTools 就会在该节点的 click 处理程序的第一行代码处自动暂停。

这里还是要推荐下小编的web前端学习群:867726593,不管你是小白还是大牛,小编我都欢迎,不定期分享干货,包括小编自己整理的一份最新的web前端资料和0基础入门教程,欢迎初学和进阶中的小伙伴。在不忙的时间我会给大家解惑。

步骤3:逐步调试代码

导致出现 bug 的一个常见原因就是脚本运行顺序不正确。逐步调试代码能让你过一遍你的代码运行状况,每次一行,准确找出哪里没有按照预期的顺序执行。试试:

在 DevTools 的“Source”面板上,点击“Step into next function call”

<img src="https://pic3.zhimg.com/v2-3e17e85ee8b8e70d904c1c4d776b292a_b.jpg" data-caption="" data-size="normal" data-rawwidth="18" data-rawheight="26" class="content_image" width="18">

这个按钮能让你逐步查看 onClick() 函数的运行,每次一行。当 DevTools 高亮显示如下一行代码时就停止:

if (inputsAreEmpty()) {

现在点击“Step over next function call”按钮

<img src="https://pic3.zhimg.com/v2-f8aa0d046dfbf1b1a28fdd031ee35e9e_b.jpg" data-caption="" data-size="normal" data-rawwidth="36" data-rawheight="20" class="content_image" width="36">

这会让 DevTools 执行 inputsAreEmpty() 而不进入它。注意 DevTools 跳过了几行代码,这是因为 inputsAreEmpty() 求值结果为 false,所以 if 语句的代码块没有运行。

这就是逐步调试代码的基本理念。如果你查看 get-started.js 中的代码,会发现 bug 可能在 updateLabel() 函数的某个位置。你不必逐行看完所有代码,可以换用另一种断点,在靠近该 bug 的位置暂停代码运行。

步骤4:设置另一个断点

代码行断点是最常见的断点类型。如果想在执行到某一行代码时暂停,就使用代码行断点。试试吧:

查看 updateLabel() 中的最后一行代码,如下所示:

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

在代码的左侧,你可以看到这行代码的具体行数:32。点击 32,DevTools 会在 32 上放置一个蓝色图标,表示在这里设置了一个代码行断点。这样以来,DevTools 总会在执行这行代码前暂停。

点击“Resume script execution”按钮

<img src="https://pic3.zhimg.com/v2-d70fc1ddc7b3737276ba2ef3deecaeb6_b.jpg" data-caption="" data-size="normal" data-rawwidth="26" data-rawheight="20" class="content_image" width="26">

这段脚本会持续执行,直到到达你设置了断点的那行代码。

查看 updateLabel() 中已执行的代码行。DevTools 打印输出 addend1,addend2 和 sum 的值。

Sum 的值看着很有问题,求值结果应该是数字才对,但这里却是字符串。这可能就是造成 bug 的原因。

步骤5:检查变量值

造成 bug 的另一个常见原因就是变量或函数产生了异常值。很多开发者会使用 console.log() 来查看值随着时间变化的情况,但使用 console.log() 枯燥又麻烦,而且没有效率。究其原因有二,首先你可能需要手动编辑代码,而且需要大量调用 console.log();其次,你可能无法确定哪个变量和 bug 有关,所以你需要记录很多变量。

DevTools 上有个替代 console.log() 的工具叫 Watch Expressions,使用 Watch Expressions 能够监控变量值随着时间的变化。正如其名,Watch Expressions 并不仅仅能监控变量,你可以将任何有效的 JavaScript 表达式存储在 Watch Expressions 中。试试吧:

在 DevTools 上的“Source”面板上点击“Watch”,然后这部分会展开。

点击“Add Expression”

<img src="https://pic4.zhimg.com/v2-7067d5a4a4c50075cbc26c6b1f1adcc3_b.jpg" data-caption="" data-size="normal" data-rawwidth="20" data-rawheight="20" class="content_image" width="20">

输入 typeof sum

按 Enter 键,DevTools 会显示 typeof sum: "string"。冒号右边的值就是你的 Watch Expression 的结果。

<img src="https://pic1.zhimg.com/v2-30af9a5e742674d281f2d365ff4f26c4_b.jpg" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="541" class="origin_image zh-lightbox-thumb" width="800" data-original="https://pic1.zhimg.com/v2-30af9a5e742674d281f2d365ff4f26c4_r.jpg">

和我们猜的一样,sum 被处理成了字符串,而本应是个数字。这就是 demo 上的 bug 的来源。

DevTools 中另一个能取代 console.log() 的工具是 Console,可以使用 Console 对任意 JavaScript 语句求值。很多开发者通常在调 bug 时使用 Console 覆盖变量值。在本教程这个例子中,Console 能帮你测试刚发现的 bug 的潜在修复方法。试试:

如果还没打开 Console,按 Escape 键打开它,会在你的 DevTools 窗口底部打开。

在 Console 中输入 parseInt(addend1) + parseInt(addend2)

按 Enter 键,DevTools 会对语句求值,输出 6,也就是开头 Demo 中我们预期程序应该输出的结果。

<img src="https://pic1.zhimg.com/v2-05a303bb328e61b589887ad267c0d2ac_b.jpg" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="608" class="origin_image zh-lightbox-thumb" width="800" data-original="https://pic1.zhimg.com/v2-05a303bb328e61b589887ad267c0d2ac_r.jpg">

步骤6:应用修复方法

确定一种修复 bug 的潜在方法后,剩下的工作就是编辑代码,尝试修复,并重新运行 demo。不必离开 DevTools 界面就能应用修复。你可以直接在 DevTools UI 里直接编辑 JavaScript 代码。试试吧:

在 DevTools 的“Source”面板的代码编辑器中,用 var sum = parseInt(addend1) + parseInt(addend2) 替换 var sum = addend1 + addend2。就是当前暂停位置上面的那行代码。

按 Command+S(Mac)或 Ctrl+S(Windows,Linux)保存修改。代码背景色变为红色,表示脚本已经在 DevTools 中被修改。

点击“Deactivate breakpoints”

<img src="https://pic3.zhimg.com/v2-2bea76830b3176ebc1e7c0dd41f1210a_b.jpg" data-caption="" data-size="normal" data-rawwidth="19" data-rawheight="17" class="content_image" width="19">

它变为蓝色表示正处于活动状态。如果这样设置,DevTools 会忽略你设置的任何断点。

点击“ Resume script execution”

<img src="https://pic1.zhimg.com/v2-c08b0ef2429def9115ff6272c35642fc_b.jpg" data-caption="" data-size="normal" data-rawwidth="26" data-rawheight="20" class="content_image" width="26">

可以用不同的值试试吧,现在 demo 应该能正确地计算出 sum 值了。

注意:该工作流程只对运行在浏览器中的代码应用修正。它不会为所有运行你的页面的用户修正代码。要想实现该目的,需要修正运行在提供页面的服务器上的代码。

以上就是在 DevTools 中调试 JavaScript bug 的基础知识,本文只介绍了两种设置断点的方法,此外还有不少很多其它方法,比如:

仅在满足你指定的条件时触发的条件断点。

发生已捕获或未捕获异常时触发的断点。

当请求的网址和你提供的子字符串匹配时触发的 XHR 断点。

更多使用 DevTools 调试 bug 的知识,可以查看官方文档。

你可能感兴趣的:(做前端页面,用JavaScript 在调试 Bug 时有哪些技巧?)