javascript源工具

最新推荐文章于 2024-09-06 14:31:06 发布

爱做ppt的阿伟

最新推荐文章于 2024-09-06 14:31:06 发布

阅读量93

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_73177400/article/details/128530841

版权

步骤 4：单步执行代码

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

单击“ 逐个执行下一个函数调用 (

) 。 DevTools 无需步入即可运行以下代码。

JavaScript复制
```
if (inputsAreEmpty()) {
```
备注

开发工具跳过几行代码。这是因为 inputsAreEmpty() 计算结果为 false，因此语句的代码 if 块不会运行。
在 DevTools 的 Sources 工具上，单击“ 单步执行下一个函数调用 (

) 一次单步执行函数运行时 updateLabel() 。

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

使用 " 源"工具查看、修改和调试前端 JavaScript 代码，并检查包含当前网页的资源。

导航器、编辑器和调试程序窗格

" 源 "工具具有三个窗格：

窗格	操作
导航器窗格	在从服务器返回的资源之间导航以构建当前网页。选择文件、图像和其他资源，并查看其路径。（可选）设置本地 Workspace 以将更改直接保存到源文件。
编辑器窗格	查看从服务器返回的 JavaScript、HTML、CSS 和其他文件。对 JavaScript 或 CSS 进行实验性编辑。在刷新页面之前，所做的更改将一直保留;如果使用 Workspaces 保存到本地文件，则页面刷新后将保留所做的更改。使用 Workspaces 或 Overrides 时，也可以编辑 HTML 文件。
调试器窗格	使用 JavaScript 调试器设置断点、暂停运行 JavaScript，并逐步执行代码，包括你进行的任何编辑，同时观察你指定的任何 JavaScript 表达式。观察并手动更改当前代码行范围内变量的值。

下图显示了 导航器 窗格，其中突出显示了 DevTools 左上角的红色框，右上角突出显示了 编辑器 窗格，底部突出显示了 调试器 窗格。最左侧是浏览器窗口的主要部分，显示呈现的网页灰显，因为调试程序暂停在断点上：

当 DevTools 宽时，调试器窗格放置在右侧，并包括 作用域 和监视：

若要最大化"源"工具的大小，请取消停靠"DevTools"到单独的窗口，并可以选择将"DevTools"窗口移动到单独的监视器。请参阅更改 DevTools 放置位置（取消停靠，停靠到底部，停靠到左侧）。

若要加载上面显示的调试演示网页，请参阅下面的使用调试器的基本方法。

使用"页面"选项卡浏览构建当前网页的资源

使用导航器窗格的"页"选项卡浏览从服务器返回的文件系统以构造当前网页。选择要查看、编辑和调试的 JavaScript 文件。 " 页面 "选项卡列出了页面已加载的所有资源。

若要在 “编辑器 ”窗格中显示文件，请在“ 页面 ”选项卡中选择一个文件。对于图像，将显示图像预览。

若要显示资源的 URL 或路径，请将鼠标悬停在资源上。

若要将文件加载到浏览器的新选项卡中，或显示其他操作，请右键单击文件名。

事件侦听器断点

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

在 “导航器”窗格中， (index) 默认选择。单击。get-started.js
在 “调试器 ”窗格中，单击“ 事件侦听器断点 ”以展开部分。 DevTools 显示事件类别的列表，例如动画和 剪贴板。
单击“展开” (

鼠标事件) 打开该类别。开发工具显示鼠标事件的列表，如单击和鼠标按下。每个事件旁边都有一个复选框。
选中单击旁边的复选框。现在开发工具设置为在运行任何 click 事件侦听器时自动暂停。
返回到演示，再次单击“ 添加数字 1 和数字 2 ”。开发工具暂停演示并在“源”具中突出显示一行代码。 DevTools 应在中的 get-started.js第 16 行暂停，如下一个代码片段所示。

JavaScript复制
```
if (inputsAreEmpty()) {
```
如果在其他代码行上暂停，请单击“ 恢复脚本执行 ” (

) ，直到在正确的行上暂停。

备注

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

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

步骤 6：检查变量值

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

方法 1：“作用域”窗格

如果在代码行上暂停，“ 范围 ”窗格将显示当前定义的局部变量和全局变量以及每个变量的值。如果适用，它还会显示关闭变量。双击变量值进行编辑。如果不在代码行上暂停，“ 作用域 ”窗格为空。

方法 2：监视表达式

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

选择“ 监视 ”选项卡。
单击 “添加监视表达式 ” (

) 。
键入 typeof sum。
按 Enter。 DevTools 显示 typeof sum: "string"。冒号右侧的值是监视表达式的结果。

备注

在以下屏幕截图中，监视表达式 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 + addend2 替换为 var 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 国际许可下获得许可。

建议的内容

使用本地副本替代网页资源（“替代”选项卡） - Microsoft Edge Development

替代功能是 Microsoft Edge DevTools 的“源”工具中的一项功能，可用于将网页资源复制到硬盘驱动器。刷新网页时，DevTools 不会加载资源，而是将其替换为本地副本。
修复控制台中报告的 JavaScript 错误 - Microsoft Edge Development

调试和解决控制台中报告的与 JavaScript 相关的错误。
更改开发工具放置位置（取消停靠，停靠到底部，停靠到左侧） - Microsoft Edge Development

如何将开发人员Microsoft Edge工具移动到浏览器窗口的底部或左侧，或者将 DevTools 撤消到单独的窗口中。
JavaScript 调试功能 - Microsoft Edge Development

在此 Microsoft Edge DevTools 调试功能的全面参考中发现新的调试工作流。