调试 JavaScript 入门

本文介绍使用 DevTools 调试任何 JavaScript 问题的基本工作流。

步骤 1：重现 Bug

调试的第一步是查找一系列可持续重现 bug 的操作。

1. 在新窗口或选项卡中打开演示网页 “开始调试 JavaScript ”。若要打开网页，请右键单击该链接，然后在弹出窗口中选择“在新选项卡中打开链接”或“在新窗口中打开链接”。 或者，可以按住 适用于 Windows、Linux) 或 macOS) 的命令 (ctrl (，然后单击链接。

   提示：在 InPrivate 模式下打开 Microsoft Edge，以确保 Microsoft Edge 以干净状态运行。 有关详细信息，请参阅 在 Microsoft Edge 中浏览 InPrivate

2. 在“数字 1”文本框中输入 5。

3. 在“数字 2”文本框中输入 1。

4. 单击 “添加数字 1”和“数字 2”。 按钮下方的标签显示 5 + 1 = 51，而不是预期结果 6：

   

步骤 2：熟悉源工具 UI

DevTools 为不同的任务提供了多种工具。 这些任务包括更改 CSS、分析页面加载性能以及监视网络请求。 源工具是调试 JavaScript 的地方。

1. 要打开 DevTools，请右击网页，然后选择“检查”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 将打开：

   

2. 选择 “源” 工具。 选择“ 页面 ”选项卡，然后选择 JavaScript 文件 get-started.js：

   

源工具 UI 包含三个部分：

• ) 左上角的“ 导航器 ”窗格 (。 此处列出了网页请求的所有文件。

• ) 右上角的 “编辑器 ”窗格 (。 在 “导航器 ”窗格中选择文件后，此窗格将显示该文件的内容。

• 调试 器 窗格 (底部) 。 此窗格提供用于检查网页的 JavaScript 的工具。 如果 DevTools 窗口较宽，则此窗格将显示在 “编辑器 ”窗格的右侧。

步骤 3：使用断点暂停代码

调试此类问题的常见方法是在代码中插入多个 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() 语句中，需要显式指定要检查的每个值。 通过断点，开发工具会及时显示所有变量的值。 有时，影响代码的变量被隐藏和混淆。

简言之，断点可以帮助你比 console.log() 方法更快地查找和修复 bug。

事件侦听器断点

如果你退后一步思考应用的工作原理，你可能会做出一个有据可知的猜测，即错误的总和 (5 + 1 = 51) 是在与“添加数字 1 和数字 2”按钮关联的事件侦听器中click计算的。 因此，可能想在 click 侦听器运行期间暂停代码。 事件侦听器断点 允许执行此操作：

1. 在 “导航器”窗格中， (index) 默认选择 。 单击 。get-started.js

2. 在 “调试器 ”窗格中，单击“ 事件侦听器断点 ”以展开部分。 DevTools 显示事件类别的列表，例如 动画 和 剪贴板。

3. 单击“ 展开 () 鼠标 事件打开该类别。 开发工具显示鼠标事件的列表，如单击和鼠标按下。 每个事件旁边都有一个复选框。

4. 选中旁边的复选框，单击：

   

   现在开发工具设置为在运行任何 click 事件侦听器时自动暂停。

5. 在呈现的演示网页中，再次单击“ 添加数字 1 和数字 2 ”按钮。 开发工具暂停演示并在“源”具中突出显示一行代码。 DevTools 在 中的 get-started.js第 16 行暂停，如下一个代码片段所示：

   if (inputsAreEmpty()) {
   

   如果在其他代码行上暂停，请单击“ 恢复脚本执行 ” () ，直到在正确的行上暂停。

   注意

   如果在另一行暂停，则将拥有一个浏览器扩展，此扩展会在你访问的每个网页上注册一个 click 事件侦听器。 你已在扩展的 click 侦听器中暂停。 如果使用 InPrivate 模式 在专用模式下进行浏览，这会禁用所有扩展，则每次都可能会看到在所需的代码行上暂停。

事件侦听器断点只是开发工具中提供的许多类型的断点之一。 记住所有不同的类型，以帮助你尽快调试不同的方案。 若要了解何时以及如何使用每种类型，请参阅 使用断点暂停代码。

步骤 4：单步执行代码

Bug 的一个常见原因是脚本以错误的顺序运行。 单步执行代码允许你演练代码的运行时。 一次浏览一行，以准确确定代码的位置以与不同的顺序运行。 立即尝试：

1. 单击“ 单步执行下一个函数调用 (下 ) 。 DevTools 在不单步执行代码的情况下运行以下代码：

   if (inputsAreEmpty()) {
   

   DevTools 跳过几行代码，因为 inputsAreEmpty() 计算结果为 false，因此语句的代码 if 块不会运行。

2. 在 DevTools 的 “源 ”工具上，单击“ 单步执行下一个函数调用 () 以逐行执行函数运行时 updateLabel() 。

这是单步执行代码的基本概念。 如果查看 中的 get-started.js代码，可以看到 bug 可能位于 函数中的 updateLabel() 某个位置。 可以使用另一种类型的断点 (代码行断点) 来暂停代码，使其更接近 bug 的可能位置，而不是单步执行每行代码。

步骤 5：设置代码行断点

代码行断点是最常见的断点类型。 到达要暂停的特定代码行时，使用代码行断点。

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

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

2. 的 label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; 行号为 34。 单击第 34 行。 DevTools 在 34 的左侧显示一个红色圆圈。 红色圆圈表示代码行断点位于此行上。 开发工具始终在运行此代码行之前暂停。

3. 单击“ 恢复脚本执行 () 按钮：

   

   脚本将继续运行，直到达到第 34 行。 在行 31、32 和 33 行，DevTools 将每个变量的值打印到每行的分号右侧。 这些值为：

   • addend1 = “5”
   • addend2 = “1”
   • sum = “51”

步骤 6：检查变量值

addend1、addend2 和 sum 的值看起来可疑。 这些值用引号括起来，这意味着每个值都是一个字符串。 这是 Bug 原因的一个很好的线索。 下一步是收集有关这些变量值的详细信息。 DevTools 提供了各种方法来检查变量值。

在“范围”窗格中检查变量值

如果在代码行上暂停，“ 作用域 ”窗格将显示当前定义的局部变量和全局变量以及每个变量的值：

“ 作用域 ”窗格还会显示关闭变量（如果适用）。 如果要编辑变量值，请在“ 作用域 ”窗格中双击该值。 如果不在代码行上暂停，“ 作用域 ”窗格为空。

通过监视表达式检查变量值

“ 监视 ”窗格允许监视变量 (的值，例如 sum) 或表达式 (（如 typeof sum) ）。 可以将任何有效的 JavaScript 表达式存储在watch表达式中。

1. 选择“ 监视 ”选项卡。

2. 单击“添加watch表达式 () 。

3. 键入watch表达式 typeof sum，然后按 Enter：

“ 监视 ”窗格显示 typeof sum: "string"。 冒号右侧的值是watch表达式的结果。 当它应为 sum 数字时，该 bug 是作为字符串计算的。

如果 DevTools 窗口较宽，“ 监视 ”窗格将显示在 “调试器 ”窗格中，然后显示在右侧。

通过控制台检查变量值

控制台允许查看console.log()输出。 还可以使用 控制台 在代码语句处暂停调试程序时评估任意 JavaScript 语句。 对于调试，可以使用 控制台 来测试 bug 的潜在修复。

1. 如果 控制台 工具已关闭，请按 Esc 将其打开。 控制台工具将在 DevTools 窗口的下窗格中打开。

2. 在 控制台中，键入表达式 parseInt(addend1) + parseInt(addend2)。 如果调试器暂停在范围中的代码addend2行addend1上，则针对当前范围计算表达式。

3. 按 Enter。 DevTools 评估 语句并在控制台中打印6，这是你期望演示生成的正确结果：

   

步骤 7：将修复应用到返回的代码，然后应用到实际源代码

我们已确定针对 bug 的可能修复方法。 接下来，直接在 DevTools UI 中编辑 JavaScript 代码，然后重新运行演示以测试修复，如下所示：

1. 单击“ 恢复脚本执行 ” () 。

2. 在“编辑器”窗格中，将 行var sum = addend1 + addend2var sum = parseInt(addend1) + parseInt(addend2)替换为 。

3. 按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存更改。

4. 单击“ 停用断点” () 。 断点图标将变为灰色，以指示断点处于非活动状态。 设置“停用断点”时，开发工具会忽略你设置的任何断点。 演示网页现在显示正确的值：

   

5. 尝试使用具有不同值的演示。 演示现在计算正确。

6. 调试自己的项目时，确定修补程序后，即可修复服务器上的实际源代码，例如编辑本地源代码，然后将固定代码重新部署到服务器。 前面的步骤仅对从服务器发送的代码的临时本地副本应用修补程序。

后续步骤

祝贺你！ 现在，你已了解如何在调试 JavaScript 时充分利用 Microsoft Edge 开发工具。 本文中学习的工具和方法可以为你节省很多时间。

本文介绍了设置断点的两种方法。 DevTools 还提供了设置断点以在满足特定条件时暂停代码的方法，例如：

• 仅在提供的条件为 true 时触发的条件断点。
• 已捕获或未捕获异常的断点。
• 请求的 URL 与提供的子字符串匹配时触发的 XHR 断点。

有关何时以及如何使用每种类型的断点的详细信息，请参阅 使用断点暂停代码。

有关用于单步执行代码的调试器按钮的详细信息，请参阅“JavaScript 调试功能”中的 单步执行代码 行。

另请参阅

• JavaScript 调试功能 - 使用源工具中调试器的 UI。
• 源工具概述 - 介绍 JavaScript 调试器和代码编辑器。

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 创作。

此作品根据 Creative Commons 署名 4.0 国际许可获得许可。