在 Chrome DevTools 中调试 JavaScript 入门

在 Chrome DevTools 中调试 JavaScript 入门

如果您使用 console.log() 来查找和修正代码中的错误，可以考虑改用本教程介绍的工作流程。 其速度快得多，也更有效。

第 1 步：重现错误

重现错误始终是调试的第一步。“重现错误”是指找到一系列总是能导致错误出现的操作。

您可能需要多次重现错误，因此要尽量避免任何多余的步骤。

第 2 步：使用断点暂停代码

DevTools 让您可以暂停执行中的代码，并对暂停时刻的所有变量值进行检查。 用于暂停代码的工具称为断点。 立即试一试：

按 Command+Option+I (Mac) 或 Ctrl+Shift+I（Windows、Linux）在演示页面上打开 DevTools。

1. 点击 Sources 标签。

2. 点击 Event Listener Breakpoints 将该部分展开。DevTools 显示一个包含 Animation 和 Clipboard 等可展开事件类别的列表。

3. 在 Mouse 事件类别旁，点击 Expand Expand 图标。

DevTools 显示一个包含 click 等 Mouse 事件的列表，事件旁有相应的复选框。 1. 选中 click 复选框。

返回至演示页面，再次点击 Add Number 1 and Number 2。DevTools 暂停演示并在 Sources 面板中突出显示一行代码。

当您选中 click 复选框时，就是在所有 click 事件上设置了一个基于事件的断点。 点击了任何节点，并且该节点具有 click 处理程序时，DevTools 会自动暂停在该节点 click 处理程序的第一行。

注：这不过是 DevTools 提供的众多断点类型中的一种。应使用的断点类型取决于您要调试的问题类型。

第 3 步：单步调试代码

一个常见的错误原因是脚本执行顺序有误。 可以通过单步调试代码一次一行地检查代码执行情况，准确找到执行顺序异常之处。

从左到右依次为:

• 重置调试器,使用后会立即回复到未暂停的状态

• 跳过函数调用, 使用后不会进入函数声明里,而是直接在当前函数里出结果

• 单步, 通常情况下也会单步库代码

• 直接从当前函数退出,将回退到上一个调用它的函数,这个一般用于函数体很长想要立即退出时使用

第 4 步：设置另一个断点

打完另外的断点后, 重置调试器会变成单步(只执行断点)的调试。

第 5 步：检查变量值

使用watch

可以看出watch里可以填表达式。

第 6 步：应用修正

您已找到错误的潜在解决方法。剩下的工作就是编辑代码后重新运行演示页面来测试修正效果。 您不必离开 DevTools 就能应用修正。 您可以直接在 DevTools UI 内编辑 JavaScript 代码。 立即试一试：

1. 在 DevTools 的 Sources 面板上的代码编辑器中，将 var sum = addend1 + addend2 替换为 var sum = parseInt(addend1) + parseInt(addend2);。它就是您当前暂停位置上面那行代码。

2. 按 Command+S (Mac) 或 Ctrl+S（Windows、Linux）保存更改。代码的背景色变为红色，这表示在 DevTools 内更改了脚本。

3. 点击 Deactivate breakpoints 停用断点。它变为蓝色，表示处于活动状态。 如果进行了此设置，DevTools 会忽略您已设置的任何断点。

4. 点击 Resume script execution

5. 使用不同的值测试演示页面。现在演示页面应能正确计算求和

切记，此工作流程只对运行在浏览器中的代码应用修正。 它不会为所有运行您的页面的用户修正代码。 要实现该目的，您需要修正运行在提供页面的服务器上的代码。

注意要按一次保存

后续步骤

恭喜！现在您已掌握了在 DevTools 中调试 JavaScript 的基础知识。

本教程只向您介绍了两种设置断点的方法。DevTools 还提供了许多其他方法，其中包括：

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

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

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