label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
的 label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; 行号为 34。 单击第 34 行。 DevTools 在 34 的左侧显示一个红色圆圈。 红色圆圈表示代码行断点位于此行上。 开发工具始终在运行此代码行之前暂停。
单击“ 恢复脚本执行 ” (
) 。 脚本将继续运行，直到达到第 34 行。 在行 31、32 和 33 行，DevTools 将每个变量的值打印到每行的分号右侧。 这些值为：
addend1 = “5”
addend2 = “1”
sum = “51”
步骤 6：检查变量值
addend1、addend2 和 sum 的值看起来可疑。 这些值用引号括起来，这意味着每个值都是一个字符串。 这是 Bug 原因的一个很好的线索。 下一步是收集有关这些变量值的详细信息。 开发工具提供了许多用于检查变量值的工具。
方法 1：“作用域”窗格
如果在代码行上暂停，“ 范围 ”窗格将显示当前定义的局部变量和全局变量以及每个变量的值。 如果适用，它还会显示关闭变量。 双击变量值进行编辑。 如果不在代码行上暂停，“ 作用域 ”窗格为空。
方法 2：监视表达式
“ 监视 ”窗格允许监视变量 (的值，例如 sum) 或表达式 (（如 typeof sum) ）。 可以将任何有效的 JavaScript 表达式存储在watch表达式中。
选择“ 监视 ”选项卡。
单击“添加watch表达式 (
) 。
键入 typeof sum。
按 Enter。 DevTools 显示 typeof sum: "string"。 冒号右侧的值是watch表达式的结果。
在以下屏幕截图中，watch表达式typeof sum显示在“监视”窗格中。 如果 DevTools 窗口较宽，“ 监视 ”窗格将显示在 “调试器 ”窗格中，然后显示在右侧。
正如猜想的那样，如果应为数字， sum 被评估为字符串。 现在确认值类型是 Bug 的原因。
方法 3：控制台
控制台允许查看console.log()输出。 还可以使用 控制台 在代码语句处暂停调试程序时评估任意 JavaScript 语句。 对于调试，可以使用 控制台 来测试 bug 的潜在修复。
如果 控制台 工具已关闭，请按 Esc 将其打开。 控制台工具将在 DevTools 窗口的下窗格中打开。
在控制台中，键入 parseInt(addend1) + parseInt(addend2)。 工具的语句暂停在作用域为 addend1 和 addend2 的代码行上。
按 Enter。 开发工具将评估该语句并打印 6，这是预期演示生成的结果。
步骤 7：应用修补程序
我们已确定针对 bug 的可能修复方法。 接下来，直接在 DevTools UI 中编辑 JavaScript 代码，然后重新运行演示以测试修补程序，如下所示。
单击“ 恢复脚本执行 ” () 。
在“编辑器”窗格中，将 行var sum = addend1 + addend2var sum = parseInt(addend1) + parseInt(addend2)替换为 。
按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存更改。
单击“ 停用断点” (
) 。 断点图标将变为灰色，以指示断点处于非活动状态。 设置“停用断点”时，开发工具会忽略你设置的任何断点。 下一个屏幕截图显示了演示的结果，其中更新和停用断点后 var sum 修复了 bug。
尝试使用具有不同值的演示。 演示现在计算正确。
此工作流仅将修补程序应用于从服务器发送的代码的本地副本。 调试项目时，在确定修补程序后，仍需要将此修复应用到服务器上的代码，例如编辑本地源代码，然后将固定代码重新部署到服务器。
祝贺你！ 现在，你已了解如何在调试 JavaScript 时充分利用 Microsoft Edge 开发工具。 本文中学习的工具和方法可以为你节省很多时间。
本文介绍了设置断点的两种方法。 DevTools 还提供了设置断点以在满足特定条件时暂停代码的方法，例如：
仅在提供的条件为 true 时触发的条件断点。
已捕获或未捕获异常的断点。
请求的 URL 与提供的子字符串匹配时触发的 XHR 断点。
有关何时以及如何使用每种类型的详细信息，请参阅 使用断点暂停代码。
本文不介绍几个代码单步执行控件。 有关详细信息，请参阅“JavaScript 调试功能”中的 单步执行代码行 。
JavaScript 调试功能 - 使用源工具中调试器的 UI。
源工具概述 - 介绍 JavaScript 调试器和代码编辑器。
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。
原始页面 在此处 找到，由 凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 创作。
此作品根据 Creative Commons 署名 4.0 国际许可获得许可。
) 鼠标 事件打开该类别。 开发工具显示鼠标事件的列表，如单击和鼠标按下。 每个事件旁边都有一个复选框。
) 。 DevTools 无需步入即可运行以下代码。
) 以逐行执行函数运行时