调试 JavaScript

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

本教程介绍在 DevTools 中调试所有 JavaScript 问题的基本工作流程。请继续阅读，或观看本教程的视频版本。

重现 bug

找到一系列可一致重现错误的操作始终是调试的第一步。

  1. 在新标签页中打开此演示。
  2. 在 Number 1 框中输入 5。
  3. 在 Number 2 框中输入 1。
  4. 点击添加号码 1 和号码 2。按钮下方的标签显示 5 + 1 = 51。结果应为 6。这就是您要修正的 bug。

5 + 1 的结果是 51。应为 6。

在此示例中，5 + 1 的结果是 51。应为 6。

熟悉“Sources”面板界面

DevTools 可为更改 CSS、分析页面加载性能和监控网络请求等不同的任务提供许多不同的工具。您可在 Sources 面板中调试 JavaScript。

  1. 打开 DevTools，然后前往 Sources（来源）面板。

    “来源”面板。

来源面板包含三个部分：

“Sources”面板的 3 个部分。

  1. 显示文件树的页面标签页。此处列出页面请求的每个文件。
  2. Code Editor 部分。在网页标签页中选择文件后，此处会显示该文件的内容。

  3. Debugger 部分。检查页面 JavaScript 的各种工具。

    如果 DevTools 窗口较宽，默认情况下，调试程序位于 Code Editor 右侧。在本例中，作用域和监视标签页与断点、调用堆栈等一起作为可收起的部分。

宽窗口右侧的调试程序。

使用断点暂停代码

调试这种问题的常用方法是将多个 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() 方法相比，断点具有一些优势：

  • 使用 console.log() 时，您需要手动打开源代码，查找相关代码，插入 console.log() 语句，然后重新加载此页面，才能在控制台中看到这些消息。使用断点，无需了解代码结构即可暂停相关代码。
  • 在 console.log() 语句中，您需要明确指定要检查的每个值。使用断点，DevTools 会在暂停时及时显示所有变量值。有时在您不知道的情况下，有些变量会影响您的代码。

简言之，与 console.log() 方法相比，断点可帮助您更快地查找和修正错误。

如果退一步思考应用的运作方式，您可以根据经验推测出，使用与 Add Number 1 and Number 2 按钮关联的 click 事件监听器时计算的和不正确 (5 + 1 = 51)。因此，您可能需要在 click 监听器运行时暂停代码。事件监听器断点可让您完成此任务：

  1. 在 Debugger 部分中，点击 Event Listener Breakpoints 以展开该部分。DevTools 会显示 Animation 和 Clipboard 等可展开的事件类别列表。
  2. 点击 Mouse 事件类别旁边的 Expand。 DevTools 会显示 click 和 mousedown 等鼠标事件列表。每个事件旁边都有一个复选框。

  3. 勾选点击复选框。DevTools 现在经过设置可以在任何 click 事件监听器运行时自动暂停。

    “click”复选框处于启用状态。

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

    function onClick() {

    如果是在其他代码行暂停，请按 Resume Script Execution，直到在正确的代码行暂停为止。

事件监听器断点只是 DevTools 提供的多种断点类型之一。您需要探索所有不同的类型，因为每种类型最终都可帮助您尽快调试不同情景的问题。如需了解使用每种类型的时机和方式，请参阅使用断点暂停代码。

单步调试代码

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

  1. 在 DevTools 的 Sources 面板上，点击 Step into next function call，一次一行地单步调试 onClick() 函数的执行。DevTools 突出显示下面这行代码：

    if (inputsAreEmpty()) {

  2. 点击 Step over next function call。

    DevTools 执行 inputsAreEmpty()，但不进入其中。请注意 DevTools 是如何跳过几行代码的。这是因为 inputsAreEmpty() 求值结果为 false，所以 if 语句的代码块未执行。

这就是单步调试代码的基本思路。如果您查看 get-started.js 中的代码，就会发现错误可能出在 updateLabel() 函数的某个位置。您可以使用另一种断点来暂停较接近极可能出错位置的代码，而不是单步调试每一行代码。

设置代码行断点

代码行断点是最常见的断点类型。如果您想在执行到某一行代码时暂停，请使用代码行断点：

  1. 查看 updateLabel() 中的最后一行代码：

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

  2. 在这行代码的左侧，您可以看到这行代码的行号是 32。点击 32。DevTools 会在 32 上方放置一个蓝色图标。这意味着这行代码上有一个代码行断点。DevTools 现在始终会在执行此行代码之前暂停。

  3. 依次点击 继续执行脚本。脚本将继续执行，直到第 32 行。在第 29 行、第 30 行和第 31 行上，DevTools 会在 addend1、addend2 和 sum 的声明旁边内嵌显示其值。

DevTools 在第 32 行代码行断点处暂停。

在此示例中，DevTools 会在第 32 行代码行断点处暂停。

检查变量值

addend1、addend2 和 sum 的值疑似有问题。这些值位于引号中，这意味着它们是字符串。这个假设有助于说明错误的原因。现在可以收集更多信息。DevTools 可提供许多用于检查变量值的工具。

方法 1：检查镜重

在某代码行暂停时，Scope 标签页会显示在执行此时刻定义的局部和全局变量，以及各变量值。其中还会显示闭包变量（如果适用）。如果不在任何代码行暂停，则 Scope 标签页为空。

双击变量值可进行编辑。

“范围”窗格。

方法 2：监视表达式

Watch 标签页可让您监视变量值随时间变化的情况。监视不仅限于变量。您可以在监视标签页中存储任何有效的 JavaScript 表达式。

立即尝试：

  1. 点击 Watch 标签页。
  2. 依次点击 添加监视表达式。
  3. 输入 typeof sum。
  4. 按 Enter 键。DevTools 会显示 typeof sum: "string"。冒号右侧的值就是表达式的结果。

“监视表达式”窗格

此屏幕截图显示了创建 typeof sum 监视表达式后的监视标签页（右下角）。

正如猜想，sum 的求值结果本应是数字，而实际结果却是字符串。现在已确定这就是错误的原因。

方法 3：控制台

除了查看 console.log() 消息以外，您还可以使用控制台对任意 JavaScript 语句求值。对于调试，您可以使用控制台测试错误的潜在解决方法。立即尝试：

  1. 如果您尚未打开 Console 抽屉式导航栏，请按 Escape 将其打开。该导航栏将在 DevTools 窗口底部打开。
  2. 在控制台中，输入 parseInt(addend1) + parseInt(addend2)。此语句有效，因为您会在特定代码行暂停，其中 addend1 和 addend2 在范围内。
  3. 按 Enter 键。DevTools 对语句求值并打印输出 6，即您预计演示页面会产生的结果。

对作用域内的变量求值后的 Console 抽屉。

此屏幕截图显示了对 parseInt(addend1) + parseInt(addend2) 求值后的 Console 抽屉。

应用修复

您已找到修正错误的方法。接下来就是尝试通过编辑代码并重新运行演示来使用修正方法。您无需离开 DevTools 就能应用修正。您可以直接在 DevTools 界面中修改 JavaScript 代码。立即尝试：

  1. 依次点击 继续执行脚本。
  2. 在 Code Editor 中，将第 31 行 var sum = addend1 + addend2 替换为 var sum = parseInt(addend1) + parseInt(addend2)。
  3. 按 Command + S (Mac) 或 Control + S（Windows、Linux）保存更改。
  4. 点击 Deactivate breakpoints。 其颜色会变为蓝色，表示处于活动状态。在完成此设置后，DevTools 会忽略您已设置的任何断点。
  5. 尝试使用不同的值运行演示。现在演示可以正确计算。

后续步骤

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

  • 仅在满足您指定的条件时触发的条件断点。
  • 发生已捕获或未捕获异常时触发的断点。
  • 当请求的网址与您提供的子字符串匹配时触发的 XHR 断点。

如需了解使用每种类型的时机和方式，请参阅使用断点暂停代码。

有几个代码单步执行控件未在本教程中予以说明。如需了解详情，请参阅单步执行时越过代码行。