以下小节包含导航器窗格：
使用“页面”选项卡浏览构建当前网页的资源
使用“导航器”窗格的“页面”选项卡浏览从服务器返回的文件系统以构建当前网页。 选择要查看、编辑和调试的 JavaScript 文件。 “页面”选项卡列出了页面已加载的所有资源。
要在编辑器窗格中显示文件，请在页面选项卡中选择一个文件。 对于图像，将显示图像的预览。
要显示资源的 URL 或路径，请将键盘悬停在该资源上。
要将文件加载到浏览器的新选项卡中，或显示其他操作，请右键单击文件名。
页面选项卡中的图标
页面选项卡使用以下图标：
按文件夹或简单的文件夹列表对文件进行分组
“页面”选项卡显示按服务器和目录分组的文件或资源，或者显示为简单列表。
修改资源分组时间，配置：
在导航器竖框（左侧）选项卡后面，选择...（更多选项）按钮。 将出现一个菜单。 选择或清除“按文件夹分组”选项。 使用“文件系统”选项卡定义本地工作空间
使用“导航器”窗格的“文件系统”选项卡将文件添加到工作区，以便将在 DevTools 中所做的修改保存到本地文件系统。
工作区中的文件在 DevTools 中通过文件名旁边的红点表示。
默认情况下，在源工具中编辑文件时，刷新网页时将放弃更改。 源工具使用 Web 服务器返回的后端资源的副本。 当您更改服务器返回的后端文件时，更改不会保留，因为您没有修改源文件。 您还需要将编辑应用到实际源代码，然后重新部署到服务器。
相比之下，使用 Workspace 时，刷新网页时会保留对后端代码的修改。 对于 Workspace，每当您编辑服务器返回的后端代码时，源工具都会将编辑应用于本地源代码。 稍后，为了让其他用户查看修改，只需将修改后的源文件重新部署到服务器即可。
如果服务器返回的 JavaScript 代码与本地 JavaScript 源代码相同，则工作区工作正常。 当工作流涉及源代码转换（例如缩小或 TypeScript 编译）时，工作区无法正常工作。
也可以看看：
使用“覆盖”选项卡覆盖包含本地文件的服务器文件
使用导航器竖框的“覆盖”选项卡将页面资源（例如图像）替换为本地文件夹中的文件。
即使服务器已经发送了资源，此选项卡中的项目也会覆盖服务器发送到浏览器的内容。
替代功能类似于工作区。 当您想要试验对网页所做的更改，并且需要在刷新页面后保留更改，但不关心将更改映射到页面的源代码时，请使用覆盖。
覆盖服务器返回的文件的文件在 DevTools 中由文件名对面的白点表示。
也可以看看：
使用 Microsoft Edge 扩展的内容脚本选项卡
使用导航器竖框的“内容脚本”选项卡可查看已安装的 Microsoft Edge 扩展加载的任何内容脚本。
当调试器单步执行您不理解的代码时，您可能需要将该代码添加到“忽略列表”中以防止单步执行该代码。 看。
也可以看看：
使用“代码片段”选项卡在任何网页上运行 JavaScript 代码片段
使用导航器窗格的“代码片段”选项卡创建和保存 JavaScript 代码片段，以便您可以在任何网页上轻松运行这些代码片段。
例如，假设您经常在控制台中输入以下代码，将 jQuery 库插入到页面中，以便可以从控制台运行 jQuery 命令：
let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);
相反，您可以将此代码保存在片段中并随时轻松运行。 当您按 Ctrl+S（Windows、Linux）或 Command+S（macOS）时，DevTools 会将代码片段保存到文件系统。
有多种方法可以运行代码片段：
代码片段类似于小书签。
也可以看看：
使用命令菜单打开文件
要打开文件，除了使用源工具中的导航器窗口之外，您还可以使用 DevTools 中任何位置的命令菜单。
要显示并选择所有 .js 文件的列表，请键入 .js。
如果打字的话？ ，“命令菜单”将显示多个命令，包括...打开文件。 如果按 Backspace 键清除命令菜单，则会显示文件列表。
有关详细信息，请参阅使用 Microsoft Edge DevTools 命令菜单运行命令。
使用编辑器窗口查看或编辑文件
使用编辑器窗格可以查看从服务器返回的后端文件来组成当前网页，包括 JavaScript、HTML、CSS 和图像文件。 当您在编辑器窗格中编辑后端文件时，DevTools 会更新网页以运行修改后的代码。
编辑器窗格对各种文件类型具有以下支持级别：
文件类型支持的操作
JavaScript
查看、编辑和调试。
CSS
查看和编辑。
超文本标记语言
查看和编辑。
图片
“查看”。
默认情况下，刷新页面时将放弃编辑。要了解如何将更改保存到文件系统，请参阅前面的使用文件系统选项卡
以下小节包含编辑器窗格：
也可以看看：
编辑 JavaScript 文件
要在 DevTools 中编辑 JavaScript 文件html搜索代码，请使用源工具中的编辑器窗格。
要将文件加载到编辑器窗格中，请使用导航器窗格（左）中的“页面”选项卡。 或者使用命令菜单，如下所示：在 DevTools 的右上角，选择“自定义和控制 DevTools (...)”，然后选择“打开文件”。
也可以看看：
保存和撤消
要使 JavaScript 更改生效，请按 Ctrl+S（Windows、Linux）或 Command+S (macOS)。
如果文件被修改，文件名前面会出现一个星号。
默认情况下，刷新页面时您的编辑将被丢弃。 要了解有关将更改保存到本地文件系统的更多信息，请参阅使用工作空间编辑文件（文件系统选项卡）。
查找和替换
要查找当前文件中的文本，请选择编辑器窗格以使其获得焦点，然后按 Ctrl+F（Windows/Linux）或 Command+F（macOS）。
要查找和替换文本，请选择“查找”文本框右侧的“替换”按钮。 查看可编辑文件时，将出现“替换”按钮。
显示所做的更改
要查看对文件所做的更改，请右键单击编辑器窗格，然后选择本地修改。
抽屉在 DevTools 底部打开，在“更改”选项卡中显示您的更改。
函数中的修改生效
DevTools 不会重新运行脚本，因此唯一生效的 JavaScript 更改是您在函数中所做的更改。 例如，在右图中，我们在服务器返回的 JavaScript 中添加了以下代码：
提交表单后（在全局范围内），它不会运行，但在函数内部，它会运行，console.log('A')console.log('B')onClick 将 B 输出到控制台：
使用特殊副本重新缩放 JavaScript 文件
要使用漂亮副本重新格式化文件以使其可读，请选择编辑器窗格的顶部（“
)”（显示为大括号）。或者，如果“编辑器”窗格底部出现“漂亮复制”按钮，您可以选择该键。
重新格式化的文件显示在新选项卡中，文件名后附加 :formatted。 重新格式化的代码是只读的。
使重构文件滚动到缩小文件中所选文件的代码：
如果重新打开的文件选项卡已打开，请将其关闭。 在编辑器窗格中选择缩小文件中的一些代码。 选择“彩色复印”按钮。 格式化的代码显示在新选项卡中，并滚动到所选代码。
有关详细信息，请参阅使用临时副本。
将精简代码映射到源代码以显示可读代码
来自预处理器的源映射导致 DevTools 加载原始 JavaScript 源文件以及服务器返回的缩小的转译 JavaScript 文件。 然后，在设置断点并单步执行代码时查看原始源文件。 同时，Microsoft Edge 运行精简的代码。
在编辑器窗格中，如果右键单击 JavaScript 文件并选择添加源映射html搜索代码，将出现一个弹出框，其中包含源映射 URL 的文本框和添加按钮。
即使在组合、缩小或编译后端代码时，源映射方法也能保持其可读性和可调试性。 详细信息请参见。
从源代码转换为编译后的后端代码
如果您使用转换 JavaScript 文件的框架（例如 React），则本地源 JavaScript 可能与服务器返回的后端 JavaScript 不同。 此方案不支持工作空间，但此方案支持源映射。
在开发环境中，服务器可能包含 React 的源映射和原始文件或 .ts.jsx。 源工具显示此类文件，但不允许编辑此类文件。 当您设置断点并使用调试器时，DevTools 将显示原始文件或文件，但实际上单步执行 .ts.jsx JavaScript 文件的缩小版本。
在这种情况下，源工具可用于检测并增量执行从服务器返回的转换后的后端 JavaScript。 使用调试器定义 Watch 表达式，并使用控制台输入 JavaScript 表达式来操作范围内的数据。
编辑 CSS 文件
在 DevTools 中编辑 CSS 有两种方法：
源码工具支持直接编辑CSS文件。 例如，如果您在通过工作区编辑文件（文件系统选项卡）教程中编辑 CSS 文件以匹配下面的样式规则，则渲染网页左上角的元素 H1 将修改为红色：
h1 {
color: green;
}
CSS 更改立即生效； 无需自动保存修改。
也可以看看：
编辑 HTML 文件
在 DevTools 中编辑 HTML 有两种方法：
与 JavaScript 或 CSS 文件不同，Web 服务器返回的 HTML 文件无法直接在源工具中编辑。 要使用源代码编辑器工具编辑 HTML 文件，HTML 文件必须位于工作区或替代选项卡上。 请参阅当前文章的以下小节：
要保存更改，请在 Windows/Linux 上按 Ctrl+S 或在 macOS 上按 Command+S。 已编辑的文件标有星号。
要查找文本，请在 Windows/Linux 上按 Ctrl+F，或在 macOS 上按 Command+F。
要撤消编辑，请在 Windows/Linux 上按 Ctrl+Z 或在 macOS 上按 Command+Z。
要在编辑 HTML 文件时查看其他命令，请右键单击编辑器窗格中的 HTML 文件。
也可以看看：
访问行号或功能
要转到行号或符号（例如在编辑器窗格中打开的文件中的函数名称），您可以使用命令菜单，而不是滚动整个文件。
在导航器窗格中，选择省略号 (...)（更多选项），然后选择打开文件。 将显示“命令菜单”。键入以下字符之一： 字符 命令名称 用途
去排队
转到行号。
转到符号
转到函数。 当您键入时，命令菜单会列出在编辑器窗格中打开的 @JavaScript 文件中找到的函数。
有关详细信息，请参阅使用 Microsoft Edge DevTools 命令菜单运行命令。
使用不同工具时显示源文件
在 DevTools 中查看源文件的主要位置是源工具。 但有时您需要在查看或编辑源文件时访问其他工具，例如元素或控制台。 您可以使用“”中的快速源工具，该工具显示在 DevTools 的顶部。
使用快速源码工具：
选择源工具以外的工具，例如元素工具。
按 Ctrl+Shift+P（Windows、Linux）或 Command+Shift+P (macOS)。 命令菜单将打开。
输入“Quick”并选择“显示快速源”。
在 DevTools 窗口的顶部，会出现 Bin，并选择 Quick Source 面板。 “快速源代码”面板包含您在源代码工具中编辑的最后一个文件，该文件位于 DevTools 代码编辑器的简化版本中。
按 Ctrl+P（Windows、Linux）或 Command+P (macOS) 打开“打开文件”对话框。
使用调试器调试 JavaScript 代码
使用 JavaScript 调试器增量调试服务器返回的 JavaScript 代码。 调试器包括调试器窗格和在编辑器窗格中的代码行上设置的断点。
使用调试器，您可以单步执行代码，同时观察您指定的任何 JavaScript 表达式。 观察并自动修改变量值，并手动显示哪些变量在当前句子的范围内。
调试器支持标准调试操作，例如：
DevTools 中的调试器设计为外观、感觉和工作方式与 Visual Studio Code 中的调试器类似。
以下小节介绍了调试：
使用调试器的基本技巧
要对 JavaScript 代码进行故障排除，您可以在编辑器窗格中插入 console.log() 语句。 另一种更强大的方法是使用 DevTools Microsoft Edge 调试器。 一旦熟悉了调试器方法，使用调试器实际上比 console.log() 更简单。
要在网页上使用调试器，通常设置一个断点，然后从网页发送表单，如下所示：
在新窗口或选项卡中打开演示：使用 Microsoft Edge DevTools 开始调试 JavaScript 网页。
右键单击网页上的任意位置并选择“检查”。 或者，按 F12。 然后，DevTools 窗口将打开，位于演示网页对面。
在 DevTools 中，选择“源”选项卡。
在“导航器”窗格（左侧）中，选择“页面”选项卡，然后选择一个 JavaScript 文件，例如 get-started.js。
在编辑器窗格中，选择可疑代码行附近的行号以在该行上设置断点。 在右图中，断点设置在 var sum = addend1 + addend2; 行上。 （更新：自 2022 年起，断点现在由白色圆圈指示，而不是白色圆圈。）
在网页中，输入值并提交表单。 例如，输入数字（例如 5 和 1），然后选择按键将数字 1 和 2 相加。
调试器运行 JavaScript 代码，然后在断点处暂停。 调试器现在进入暂停模式，因此您可以检查范围内的属性值并逐渐执行代码。
在上图中，我们添加了 Watch 表达式 sum，并在 sumtypeof sum 断点上添加了两行。
检查“范围”窗格中的值，该窗格显示当前断点范围内的所有变量或属性及其值。
此时，您可以在“监视”窗格中添加表达式。 这个表达式和console.log这句调试代码时写的表达式是一样的。
要运行 JavaScript 命令来操作当前上下文中的数据，请使用控制台。 如果要打开 DevTools 底部抽屉中的控制台，请按 Esc。
使用“调试器”窗格底部的控件（例如步骤 (F9)）来单步执行代码。
此演示中的错误是您需要首先将输入数据从字符串转换为数字。
要修复此错误，请刷新页面以重置 Web 表单，然后修改以下行：
var sum = addend1 + addend2;
接受者：
var sum = parseInt(addend1) + parseInt(addend2);
按 Ctrl+S（Windows、Linux）或 Command+S (macOS) 将更改保存到本地缓存文件中。
在网页中输入 5 和 1，然后单击“添加”按钮。 今天，Scope>Local>Total：是数字 6，而不是字符串“51”。
也可以看看：
调试器监控和范围界定相对于 console.log 的优点
这三种方式是等价的：
当变量 sum 在范围内时，sum 及其值将手动显示在调试器窗格的“范围”部分中，并且还将覆盖在估计 sum 的编辑器窗格中。 为此，您可能不需要为 sum 定义监视表达式。
调试器提供了比句子更丰富、更灵活的 console.log 和环境显示。 例如，在调试器中，您可以在单步执行代码时显示和修改所有当前定义的属性和变量的值。 您还可以在控制台中发出 JavaScript 语句，例如修改范围链表中的值。 （要显示主机，请按 Esc。）
刷新网页时，断点和监视表达式会保留。
直接从 Visual Studio Code 调试
若要使用功能更齐全的 Visual Studio Code 调试器而不是 DevTools 调试器，请使用适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展。
此扩展允许从 Microsoft Visual Studio Code 中访问 Microsoft Edge DevTools Elements 和 Web 工具。
有关详细信息，请参阅用于 Web 开发的 Visual Studio Code 和 GitHub 自述文件页面：适用于 Visual Studio Code 的 Microsoft Edge 开发人员工具。
有关调试的文章
以下文章介绍了调试器窗格和断点：
也可以看看
注意
本页面的部分内容根据 Google 创建和共享的作品进行修改，并根据知识共享署名 4.0 国际许可中所述的条款使用。 找到的原始页面，由 Keith Basker（技术诗人、Chrome DevTools 和 Lighthouse）创建。
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。
