Chrome DevTools 调试 JavaScript 实战：从断点到变量监控

本文旨在深入解析如何在 Chrome DevTools 中有效调试 JavaScript 代码。

案例背景

一、案例背景

为便于理解，我们构建了一个简单的演示示例。

首先打开该示例；

在 num1 输入框中输入数字 6；

在 num2 输入框中输入数字 9；

点击 num1+num2 按钮后，下方标签显示结果为 69，而正确结果应为 15。这就是我们需要通过断点调试来定位并修复的 BUG。

熟悉 Sources 面板

二、熟悉 Sources 面板

DevTools 提供了多种工具，用于修改 CSS、分析页面加载性能以及监控网络请求等任务。我们将重点介绍如何在 Sources 面板中调试 JavaScript。

按下 Command+Option+I（Mac）或 Control+Shift+I（Windows、Linux）快捷键即可打开 DevTools，默认会打开 Console 面板。接着点击 Sources 面板进入调试界面。

Sources 面板主要包含三个部分：

文件预览窗口。该区域列出了页面请求加载的所有文件。

代码编辑窗口。当在文件预览窗口中选中某个文件时，此处会展示该文件的具体代码内容。

JavaScript 调试窗口。这里包含用于检查页面 JavaScript 的各种工具。如果 DevTools 窗口宽度较窄，此窗口会显示在代码编辑窗口的下方。

使用断点暂停代码

三、使用断点暂停代码执行

调试此类问题的常用方法是在代码中插入多个 console.log() 语句，以便在脚本执行过程中检查相关变量的值。

虽然 console.log() 方法可以完成任务，但使用断点能更高效地解决。断点允许在代码执行过程中暂停程序，并在此时即时检查所有相关变量的值。与 console.log() 方法相比，断点具有以下优势：

1. 使用 console.log() 时，需要手动打开源代码，找到相关代码行，插入 console.log() 语句，然后重新加载页面，才能在控制台中查看这些消息。而使用断点，无需了解代码具体结构即可暂停相关代码。
2. 在 console.log() 语句中，您需要明确指定要检查的每一个值。使用断点时，DevTools 会在暂停时自动显示所有变量的值。简而言之，与 console.log() 方法相比，断点能更快地帮助查找和修正 BUG。

接下来我们分析最初提出的程序运作方式。根据经验推测，点击 num1+num2 按钮时触发的 click 事件可能与 6+9=69 计算错误有关。因此，我们可能需要在 click 监听器运行期间暂停代码。 Event Listener Breakpoints 可以完成此任务：

在 JavaScript 调试窗口中，点击 Event Listener Breakpoints 前面的展开按钮。此时可以看到 Animation、Canvas、Clipboard 等一系列事件；

在页面输入框中分别输入 num1 和 num2 的值；

展开 Mouse 事件类别，每个事件旁都有一个复选框。勾选 click 复选框。此时 DevTools 便可以在任何 click 事件监听器运行时自动暂停程序。

点击页面中的 num1+num2 按钮。此时页面状态如下图所示：

这可能是因为安装的浏览器插件导致定位出现偏差，建议在无痕模式下进行操作。不过即使如此也不影响调试，我们点击一下最左边页面上的蓝色按钮，再点击中间的打括号（格式化代码）图标，即可定位准确并格式化好代码：

检查变量的值

四、检查变量的值

1. Scope 窗口

当在代码某一行暂停时，Scope 窗格会显示当前定义的局部和全局变量及其值。其中还会显示闭包变量（如果适用）。双击变量值可进行编辑。如果未在任何代码行暂停，则 Scope 窗格为空。

2. Watch 监听变量变化

Watch 标签可用于监视变量值随时间的变化情况。并且，监视不仅限于变量，我们可以将任何有效的 JavaScript 表达式存储在监视表达式中。我们尝试如下操作： - 点击 Watch 标签。 - 点击右侧的 + 号以添加表达式。 - 输入 typeof n。按 Enter 键。（此处代码经过打包处理，n 表示 num1 输入框的值） - DevTools 会显示 typeof n: "string"。冒号右侧的值即为监视表达式的结果。

3. 控制台

控制台除了查看 console.log() 消息外，还可以使用控制台对任意 JavaScript 语句进行求值。对于调试而言，可以使用控制台测试 BUG 的潜在解决方法：

在 Console 中，输入 `parseInt(n) + parseInt(u)`。此语句有效，因为我们在特定的代码行暂停，此时 `n`（num1 的值）和 `u`（num2 的值）均在作用域内。

按 Enter 键。DevTools 对该语句进行求值并打印输出 15，即我们预期 demo 页面应产生的结果。

尝试修改代码

五、尝试修改代码

上一步我们已经找到了解决 BUG 的方法。接下来就是尝试通过编辑代码并重新运行 demo 来应用修正方案。我们可以在代码编辑窗口直接修改代码：

在代码编辑窗口中，关闭代码格式化功能，然后修改代码，将 n+u 替换为 parseInt(n)+parseInt(u)。

按 Command+S（Mac）或 Control+S（Windows、Linux）以保存更改。

点击 Deactivate breakpoints 按钮以取消激活断点。该按钮将变为蓝色，表示处于活动状态。完成此设置后，DevTools 将忽略您已设置的任何断点。

再次点击 num1+num2 按钮，此时将看到正确的计算结果！

提示：这样做只能修正在浏览器中运行的代码，无法为访问您页面的所有用户修正代码。为此，您需要修改自己服务器上的源代码。

其他断点类型

六、介绍其他几种断点类型

1. 代码行断点

直接点击行号左侧即可设置。

这是使用频率最高的一种断点方式。在已知需要检查的确切代码区域时，可以使用代码行断点。DevTools 始终会在执行此代码行之前暂停程序。

debugger 语句

在代码中调用 debugger 可在该行暂停。此操作相当于使用代码行断点，只是此断点是在代码内部设置，而不是在 DevTools 界面中设置。

console.log('a');
console.log('b');
debugger;
console.log('c');

条件代码断点 如果已知需要调查的确切代码区域，但只想在其他某些条件成立时才进行暂停，则可使用条件代码行断点。若要设置条件代码行断点：

1. 点击 Sources 标签。
2. 打开包含您想要中断的代码行的文件。
3. 导航至目标代码行。
4. 代码行的左侧是行号列。
5. 右键点击行号列。
6. 选择 Add conditional breakpoint（添加条件断点）。
7. 代码行下方将显示一个对话框。
8. 在对话框中输入判断条件。
9. 按 Enter 键激活断点。行号列顶部将显示一个橙色图标。

2. DOM 更新断点

如果想要暂停更改 DOM 节点或其子级的代码，可以使用 DOM 更改断点。若要设置 DOM 更改断点：

• 点击 Elements 标签。
• 导航至要设置断点的元素。
• 右键点击此元素。
• 将鼠标指针悬停在 Break on 上，然后选择 Subtree modifications（子树修改）、Attribute modifications（属性修改）或 Node removal（节点移除）。

Subtree

• modifications（子树修改）：在移除或添加当前所选节点的子级，或更改子级内容时触发这类断点。在子级节点属性发生变化或对当前所选节点进行任何更改时不会触发这类断点。
• Attributes modifications（属性修改）：在当前所选节点上添加或移除属性，或属性值发生变化时触发这类断点。
• Node Removal（节点移除）：在移除当前选定的节点时会触发。

4. XHR/Fetch 断点

如果想在 XHR 的请求网址包含指定字符串时中断，可以使用 XHR 断点。DevTools 会在 XHR 调用 send() 的代码行暂停。

注：此功能同样可用于 Fetch 请求。

例如，在您发现页面请求的是错误网址，并且您想要快速找到导致错误请求的 AJAX 或 Fetch 源代码时，这类断点非常有用。

若要设置 XHR 断点：

• 点击 Sources 标签。
• 展开 XHR Breakpoints 窗格。
• 点击 Add breakpoint（添加断点）。
• 输入要对其设置断点的字符串。DevTools 会在 XHR 的请求网址的任意位置显示此字符串时暂停。
• 按 Enter 键以确认。

这样就可以拦截包含getUserInfo字符串的请求，如果添加一个空字符串，则可以拦截所有请求！

5. 事件监听器断点

如果想要暂停触发事件后运行的事件监听器代码，可以使用事件监听器断点。您可以选择 click 等特定事件或所有鼠标事件等事件类别。

我们一开始使用的例子就是事件监听器断点，这里不再重复演示。

6. 异常断点

如果想要在引发已捕获或未捕获异常的代码行暂停，可以使用异常断点。

• 点击 Sources 标签。
• 点击 Pause on exceptions（引发异常时暂停）按钮 {:.devtools-inline}。启用后，此按钮变为蓝色。
• （可选）如果除未捕获异常以外，还想在引发已捕获异常时暂停，则勾选 Pause On Caught Exceptions 复选框。

7. 函数断点

如果想要在调用特定函数时暂停，可以调用 debug(functionName)，其中 functionName 是要调试的函数。您可以将 debug() 插入您的代码（如 console.log() 语句），也可以从 DevTools 控制台中进行调用。debug() 相当于在第一行函数中设置代码行断点。

function sum(a, b) {
 let result = a + b; // DevTools 会在此行暂停
 return result;
}
debug(sum); // 传递函数对象，而不是字符串。
sum();

如果想要调试的函数不在作用域内，DevTools 会引发 ReferenceError。

(function () {
 function hey() {
 console.log('hey');
 }
 function yo() {
 console.log('yo');
 }
 debug(yo); // 这行可以成功调用
 yo();
})();
debug(hey); // 这一行不能成功调用 hey() 不在作用域内

如果是从 DevTools 控制台中调用 debug()，则很难确保目标函数在作用域内。因此，通常不如直接使用代码行断点方便！

到此这篇关于在 Chrome DevTools 中调试 JavaScript 的实现的文章就介绍到这了，更多相关 Chrome DevTools 调试 JavaScript 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！