源工具概述

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

详细内容：

• 导航器、编辑器和调试程序窗格
• 使用导航器窗格选择文件
  • 使用"页面"选项卡浏览构建当前网页的资源
  • 使用"文件系统"选项卡定义本地 Workspace
  • 使用"覆盖"选项卡覆盖包含本地文件的服务器文件
  • 将"内容脚本"选项卡用于Microsoft Edge扩展
  • 使用"代码段"选项卡在任何网页上运行 JavaScript 代码段
  • 使用命令菜单打开文件
• 使用编辑器窗格查看或编辑文件
  • 编辑 JavaScript 文件
  • 使用非常打印重新格式化缩小的 JavaScript 文件
  • 将缩小代码映射到源代码以显示可读代码
  • 从源代码转换到编译的前端代码
  • 编辑 CSS 文件
  • 编辑 HTML 文件
  • 访问行号或函数
  • 使用不同的工具时显示源文件
• 使用调试器窗格调试 JavaScript 代码
  • 使用调试器的基本方法
  • 调试器监视和作用域比 console.log 的优点
  • 直接从Visual Studio Code调试
  • 有关调试的文章

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

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

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

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

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

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

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

使用导航器窗格选择文件

使用 左侧 ( 导航器窗格) 导航从服务器返回的资源之间导航以构建当前网页。 选择文件、图像和其他资源，并查看其路径。

若要访问“导航器”窗格的任何隐藏选项卡，请单击“ 更多选项卡 () 按钮。

以下子部分涵盖导航器窗格：

• 使用"页面"选项卡浏览构建当前网页的资源
• 使用"文件系统"选项卡定义本地 Workspace
• 使用"覆盖"选项卡覆盖包含本地文件的服务器文件
• 将"内容脚本"选项卡用于Microsoft Edge扩展
• 使用"代码段"选项卡在任何页面上运行 JavaScript 代码段
• 使用命令菜单打开文件

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

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

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

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

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

"页面"选项卡中的图标

" 页面 "选项卡使用下列图标：

• 窗口图标以及标签 top表示main文档框架，即 HTML 框架：
• 云图标表示源：
• 文件夹图标表示目录：
• 页面图标表示资源：

按文件夹或文件夹对文件进行分组简单列表

" 页面 "选项卡显示按服务器和目录分组的文件或资源，或作为简单列表。

若要更改资源的分组时间，请进行配置：

1. 在导航器窗格（左侧）选项卡旁边，选择 ... （更多选项）"按钮。 将显示菜单。
2. 选择或清除" 按文件夹分组" 选项。

使用"文件系统"选项卡定义本地 Workspace

使用导航器窗格的"文件系统"选项卡将文件添加到工作区，以便在 DevTools 中所做的更改保存到本地文件系统。

默认情况下，在 源 工具中编辑文件时，刷新网页时将放弃更改。 Sources工具使用 Web 服务器返回的前端资源的副本。 修改服务器返回的这些前端文件时，更改不会保留，因为您未更改源文件。 您还需要在实际源代码中应用您的编辑，然后重新部署到服务器。

相比之下，使用 Workspace 时，刷新网页时，对前端代码所做的更改将保留。 对于 Workspace，当您编辑服务器返回的前端代码时，"源"工具还会将编辑应用于本地源代码。 然后，对于其他用户查看更改，只需将已更改的源文件重新部署到服务器。

如果服务器返回的 JavaScript 代码与本地 JavaScript 源代码相同，工作区可正常工作。 当工作流涉及源代码转换（如缩小或 TypeScript 编译）时，工作区不能正常工作。

另请参阅：

• 使用工作区编辑文件（“文件系统”选项卡）
• 在“源”工具中打开演示文件夹，并在DevTools 的示例代码中编辑文件。

使用"覆盖"选项卡覆盖包含本地文件的服务器文件

使用导航器窗格的"替代"选项卡，使用本地文件夹中的文件替代页面资产（如图像）。

此选项卡中的项目会覆盖服务器发送到浏览器的内容，即使服务器已发送资产。

替代 功能 类似于工作区。 当您要尝试对网页所做的更改，并且需要在刷新网页后保留更改，但您不关心将更改映射到网页的源代码时，请使用 Overrides。

覆盖服务器返回的文件的文件在整个 DevTools 中由文件名旁边的紫色点指示。

另请参阅：

• 使用本地副本替代网页资源（“替代”选项卡）
• 将已处理的代码映射到原始源代码，以便进行调试
• 键盘快捷方式中的源工具键盘快捷方式

将"内容脚本"选项卡用于Microsoft Edge扩展

使用导航器窗格的内容脚本选项卡查看已安装的Microsoft Edge扩展插件加载的任何内容脚本。

当调试器单步执行你无法识别的代码时，你可能希望将该代码添加到 “忽略列表”，以避免单步执行该代码。 请参阅 将内容脚本添加到忽略列表。

另请参阅：

• 内容脚本
• 创建扩展教程，第 2 部分

使用"代码段"选项卡在任何网页上运行 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 具有焦点时，按 Ctrl+P (Windows、Linux) 或 Command+P (macOS) 打开 命令菜单，然后键入 ！。

代码段 类似于小书签。

另请参阅：

• 在任何网页上运行 JavaScript 的代码片段

使用命令菜单打开文件

若要打开文件，除了在源工具中使用导航器窗格外，还可以从 DevTools 中的任意位置使用命令菜单。

• 在 DevTools 中的任何位置，在 Windows/Linux 上按 Ctrl+P ，或在 macOS 上按 Command+P 。 将显示"命令"菜单，并列出源工具的"导航器"窗格选项卡中的所有资源。
• 或者，在源工具的"导航器"窗格的选项卡旁，选择"...（更多选项）"按钮，然后选择"打开文件"。

若要显示和选取所有 .js 文件的列表，请键入 .js。

如果键入 ？，“命令菜单”会显示多个命令，包括 ...打开文件。 如果按 Backspace 清除命令菜单，将显示文件列表。

有关详细信息，请参阅 Run commands with the Microsoft Edge DevTools Command Menu。

使用编辑器窗格查看或编辑文件

使用 " 编辑器"窗格查看从服务器返回的前端文件，以撰写当前网页，包括 JavaScript、HTML、CSS 和图像文件。 在 编辑器 窗格中编辑前端文件时，DevTools 会更新网页以运行修改后的代码。

" 编辑器 "窗格对各种文件类型的支持级别如下：

文件类型	支持的操作
JavaScript	查看、编辑和调试。
CSS	查看和编辑。
HTML	查看和编辑。
图片	“查看”。

默认情况下，刷新网页时将放弃编辑。 若要了解如何将更改保存到文件系统，请参阅上面的使用"文件系统"选项卡定义本地 Workspace。

以下子部分涵盖"编辑器"窗格：

• 编辑 JavaScript 文件
• 使用非常打印重新格式化缩小的 JavaScript 文件
• 将缩小代码映射到源代码以显示可读代码
• 从源代码转换到编译的前端代码
• 编辑 CSS 文件
• 编辑 HTML 文件
• 访问行号或函数
• 使用不同的工具时显示源文件

另请参阅：

• 在“源”工具中打开演示文件夹，并在DevTools 的示例代码中编辑文件。

编辑 JavaScript 文件

若要在 DevTools 中编辑 JavaScript 文件，请在源工具中使用编辑器窗格。

若要将文件加载到"编辑器"窗格中，请使用导航器窗格（左侧）中的"页"选项卡。 或者使用 命令菜单，如下所示：在 DevTools 的右上角，选择 “自定义并控制 DevTools (...”) 然后选择“ 打开文件”。

另请参阅：

• 在“源”工具中打开演示文件夹，并在DevTools 的示例代码中编辑文件。

保存和撤消

若要使 JavaScript 更改生效，请按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 。

如果更改文件，文件名旁边将出现一个星号。

• 若要保存更改，请在 Windows/Linux 上按 Ctrl+S 或在 macOS 上按 Command+S 。
• 若要撤消更改，请在 Windows/Linux 上按 Ctrl+Z 或在 macOS 上按 Command+Z 。

默认情况下，刷新网页时将放弃您的编辑。 若要详细了解如何在本地文件系统中保存更改，请参阅使用 Workspaces 编辑文件（文件系统选项卡）。

查找和替换

若要在当前文件中查找文本，请选择 “编辑器 ”窗格以使其具有焦点，然后在 Windows/Linux 上按 Ctrl+F ，或在 macOS 上按 Command+F 。

若要查找和替换文本，请选择“查找”文本框左侧的“替换 (A-B>) ”按钮。 查看可编辑文件时，将显示“替换 (A-B>) ”按钮。

使用非常打印重新格式化缩小的 JavaScript 文件

在编辑器窗格中打开缩小的文件时，系统会自动重新格式化这些文件。

若要将文件还原为原始缩小状态，请单击“编辑器”窗格底部 (“漂亮的打印”按钮（显示为大括号）。

有关详细信息，请参阅使用非常打印 重新设置缩小的 JavaScript 文件。

将缩小代码映射到源代码以显示可读代码

来自预处理器的源映射会导致 DevTools 加载原始 JavaScript 源文件，以及服务器返回的缩小的已转换 JavaScript 文件。 然后，在设置断点并逐步执行代码时查看原始源文件。 同时，Microsoft Edge运行缩小代码。

在“编辑器”窗格中，如果右键单击 JavaScript 文件，然后选择“添加源映射”，将显示一个弹出框，其中包含“源地图 URL”文本框和“添加”按钮。

即使组合、缩小或编译前端代码，源映射方法也保持其可读和可调试性。 有关详细信息，请参阅将处理的代码映射到原始源代码，以便进行调试。

从源代码转换到编译的前端代码

如果使用转换 JavaScript 文件（如 React）的框架，则本地源 JavaScript 可能不同于服务器返回的前端 JavaScript。 此方案不支持工作区，但在此方案中支持源代码映射。

在开发环境中，服务器可能包括源地图和原始或 .ts.jsx 用于React。 源 工具 显示这些文件，但不允许编辑这些文件。 当你设置断点并使用调试器时，DevTools 将显示原始或文件，但实际上是分步调试 .ts.jsx JavaScript 文件缩小版本。

在此方案中， 源 工具可用于检查和逐步执行从服务器返回的转换的前端 JavaScript。 使用调试器定义 Watch 表达式，并使用控制台输入 JavaScript 表达式以操作范围内的数据。

编辑 CSS 文件

在 DevTools 中编辑 CSS 的方法有两种：

• 在 “元素” 工具中，一次通过用户界面控件处理一个 CSS 属性。 在大多数情况下，建议使用此方法。 有关详细信息，请参阅 开始查看和更改 CSS。
• 在 “源”工具中 ，使用文本编辑器编辑 CSS 文件。

源工具支持直接编辑 CSS 文件。 例如，如果你编辑通过 Workspaces（文件系统选项卡）编辑文件教程中的 CSS 文件以匹配下面的样式规则，则呈现的网页左上角的元素 H1 将更改为绿色：

h1 {
  color: green;
}

CSS 更改会立即生效;无需手动保存更改。

另请参阅：

• 在“样式”窗格中编辑 CSS 字体样式和设置
• 键盘快捷方式中的源工具键盘快捷方式
• 在“源”工具中打开演示文件夹，并在DevTools 的示例代码中编辑文件。

编辑 HTML 文件

在 DevTools 中编辑 HTML 的方法有两种：

• 在 "元素 "工具中，通过用户界面控件一次处理一个 HTML 元素。
• 在 "源 "工具中，使用文本编辑器。

与 JavaScript 或 CSS 文件不同，无法在"源"工具中直接编辑 Web 服务器返回的 HTML 文件。 若要使用“源编辑器”工具编辑 HTML 文件，HTML 文件必须位于工作区或“ 替代 ”选项卡上。请参阅当前文章的以下小节：

• 使用"文件系统"选项卡定义本地 Workspace
• 使用"覆盖"选项卡覆盖包含本地文件的服务器文件

若要保存更改，请在 Windows/Linux 上按 Ctrl+S 或在 macOS 上按 Command+S 。 编辑后的文件标有星号。

若要查找文本，请在 Windows/Linux 上按 Ctrl+F ，或在 macOS 上按 Command+F 。

若要撤消编辑，请在 Windows/Linux 上按 Ctrl+Z 或在 macOS 上按 Command+Z 。

若要在编辑 HTML 文件时查看其他命令，请在"编辑器"窗格中右键单击 HTML 文件。

另请参阅：

• 在“源”工具中打开演示文件夹，并在DevTools 的示例代码中编辑文件。

访问行号或函数

若要转到行号或符号 (如编辑器窗格中打开的文件中的函数名称) ，可以使用命令菜单，而不是滚动整个文件。

1. 在 导航器 窗格中，选择省略号 （...）（更多选项），然后选择 打开文件。 将显示"命令菜单"。
2. 键入下列字符之一：

Character	命令名称	用途
:	转到行	转到行号。
@	转到符号	转到函数。 键入 时，命令菜单会列出在"编辑器"窗格中打开的 @ JavaScript 文件中找到的函数。

有关详细信息，请参阅 Run commands with the Microsoft Edge DevTools Command Menu。

使用不同的工具时显示源文件

在 DevTools 中查看源文件的主要位置是源工具。 但有时需要在查看或编辑源文件时访问其他工具，例如 元素 或 控制台。 可以使用“箱”中的“快速源”工具，该工具显示在 DevTools 的底部。

若要使用 快速源工具：

1. 选择除"源"工具 外 的其他工具，如 "元素" 工具。

2. 按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 。 命令菜单将打开。

3. 键入 “快速”，然后选择“ 显示快速源”。

   在“DevTools”窗口的底部，将显示“箱”，以及被选中的“快速源”面板。 “快速源”面板包含你在“源”工具中编辑的最后一个文件，该文件位于精简版本的 DevTools 代码编辑器中。

4. 按 Ctrl+P (Windows、Linux) 或 Command+P (macOS) 打开“ 打开文件 ”对话框。

使用调试器窗格调试 JavaScript 代码

使用 JavaScript 调试程序逐步调试服务器返回的 JavaScript 代码。 调试器包括 调试器 窗格，以及在 编辑器 窗格中的代码行上设置的断点。

借助调试器，你可以逐步调试代码，同时观察你指定的任何 JavaScript 表达式。 观察并手动更改变量值，并自动显示当前语句范围内哪些变量。

调试器支持标准调试操作，例如：

• 设置断点以暂停代码。
• 逐步执行代码。
• 查看和编辑属性和变量。
• 监视 JavaScript 表达式的值。
• 查看调用堆栈（到目前为止函数调用的序列）。

DevTools 中的调试器旨在外观、感觉和工作，如Visual Studio Code中的调试器Visual Studio。

以下小节包括调试：

• 使用调试器的基本方法
• 调试器监视和作用域比 console.log 的优点
• 直接从Visual Studio Code调试
• 有关调试的文章

使用调试器的基本方法

若要对 JavaScript 代码进行故障排除，可以在代码中插入 console.log() 语句。 另一种更强大的方法是使用 DevTools Microsoft Edge调试器。 熟悉调试器方法后，使用调试器实际上可以比 console.log() 更简单。

若要在网页上使用调试器，通常设置断点，然后从网页发送表单，如下所示：

1. 在新窗口或选项卡中打开演示：开始使用 Microsoft Edge DevTools 调试 JavaScript 网页。

2. 右键单击网页中的任意位置，然后选择“检查”。 或者，按 F12。 DevTools 窗口随即打开，位于演示网页旁边。

3. 在 DevTools 中，选择“源”选项卡。

4. 在 导航器 窗格（左侧）中，选择 页 选项卡，然后选择 JavaScript 文件，例如 get-started.js。

5. 在 "编辑器 "窗格中，选择可疑代码行附近的行号，以在该行上设置断点。 在下图中，在 行 上设置了断点 var sum = addend1 + addend2;。

6. 在网页中，输入值并提交表单。 例如，输入数字（如 5 和 1），然后选择按钮 添加数字 1 和数字 2。

   调试程序运行 JavaScript 代码，然后在断点处暂停。 调试程序现在进入暂停模式，因此你可以检查范围内属性的值，并逐步执行代码。

   

   在上图中，我们添加了 Watch 表达式和 ，并跨 sumtypeof sum 断点添加了两行。

7. 检查"范围"窗格中 的值， 其中显示当前断点范围内的所有变量或属性及其值。

   此时，可以在“观看”窗格中添加表达式。 这些表达式与在语句中编写以调试代码 console.log 的表达式相同。

   若要运行 JavaScript 命令以操作当前上下文中的数据，请使用控制台。 如果要在 DevTools 底部的抽屉中打开控制台，请按 Esc。

8. 使用 “调试器 ”窗格顶部的控件（如 步骤 (F9) ）逐步完成代码。

   此演示中的 bug 是你需要首先将输入数据从字符串转换为数字。

9. 若要修复此 bug，请刷新页面以重置网页窗体，然后更改行：

   var sum = addend1 + addend2;
   

   收件人:

   var sum = parseInt(addend1) + parseInt(addend2);
   

10. 按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存本地缓存文件中的更改。

11. 在网页中输入 5 和 1 ，然后单击“ 添加 ”按钮。 现在，范围>本地>总计：是数字 6，而不是字符串“51”。

另请参阅：

• 键盘快捷方式中的源工具键盘快捷方式
• JavaScript 调试入门 - 使用包含一些表单控件的现有简单网页的教程。

调试器监视和作用域比 console.log 的优点

这三种方法是等效的：

• 临时添加 语句 console.log(sum) 和 console.log(typeof sum) 代码，其中 sum 位于范围内。

• 当调试器在sum在范围内时暂停时，在 DevTools 的控制台窗格中发出语句sum和console.log(typeof sum)。

• 设置 监视表达式sum 和 typeof sum 调试 器窗格中 的。

当变量sum在范围内时，sum及其值将自动显示在调试器窗格的"范围"部分中，并且也会覆盖在计算sum的编辑器窗格中。 因此，您可能不需要为 定义 Watch 表达式 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 开发的 Visual Studio Code 和 GitHub 自述页面：适用于 Visual Studio Code 的 Microsoft Edge 开发人员工具。

有关调试的文章

以下文章涵盖调试 器 窗格和断点：

• 调试 JavaScript 入门 - 使用现有简单项目的教程（通过屏幕捕获）。

• JavaScript 调试功能 - 如何使用调试器设置断点、逐步调试代码、查看和修改变量值、观看 JavaScript 表达式以及查看调用堆栈。

• 使用断点暂停代码 - 如何在调试器中设置基本和专用断点。

另请参阅

• 在“源”工具中打开演示文件夹，并在DevTools 的示例代码中编辑文件。
• 键盘快捷方式中的源工具键盘快捷方式

注意

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

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