使用快速源工具显示或编辑源文件

使用 “快速源 ”工具可在显示 源工具以外的 工具的同时显示或编辑源文件。 “快速源”工具始终显示在“源”工具中打开的相同文件。

在 DevTools 中查看源文件的主要位置是在 “源” 工具中。 但有时需要在查看或编辑源文件时访问其他工具，例如 Elements 或 控制台。 使用 “快速源 ”工具，默认情况下，该工具在 DevTools 底部的“ 快速视图 ”面板中打开。

将“快速源”工具与“源”工具结合使用

若要在 DevTools 底部的“快速视图”中显示“快速源”工具，必须在 DevTools 顶部的“活动栏”中打开“源”工具以外的工具。

“ 快速源 ”工具提供了在 “源” 工具中打开的文件的备用显示方式。 快速源工具具有部分功能。 若要获得完整功能，请使用 源 工具。

如果在一个工具中打开或关闭某个文件，则该文件将在另一个工具中打开或关闭。 在这两个工具中，每个打开的文件都有一个选项卡。

通过选择工作区文件夹在 DevTools 中编辑本地源文件

这是一个端到端教程，介绍了演示 快速源 工具的所有步骤，可使用 MicrosoftEdge / 演示 存储库中的 ToDo Web 应用。

通过在“源”工具中选择本地文件夹作为工作区，可以在显示其他工具的同时从“快速源”工具中编辑文件，并将这些编辑保存到本地驱动器。 这样，您可以在使用其他工具（如 Elements 或 Network）时编辑“快速源”工具中的文件，并将编辑保存到本地驱动器上的相应源文件中。

要在 快速源 工具中编辑源文件，您需要执行以下操作：

1. 可以本地访问网页源文件，例如克隆的存储库。

2. 在“ 工作区 ”选项卡的“ 源 ” (“ ) 工具中，添加源文件的本地文件夹。

3. 在 “工作区 ”选项卡中，打开一个文件，如 .js 文件。

4. 在 “活动栏”中，选择“ 源 ”工具以外的其他工具，如 “元素” 工具。

5. 在 DevTools 底部的 “快速视图 ”面板中，打开 “快速源 ”工具。 打开 .js 的文件显示在简化的编辑器中， 元素工具仍 显示。

下面的教程详细介绍了这些步骤。

具有本地源文件，例如克隆的存储库

要使用 快速源 工具在本地保存更改，必须具有与 Web 服务器文件匹配的本地源文件。 确保本地驱动器上存在与 Web 服务器返回的瞬态文件匹配的源文件。

例如，如果尚未完成，请将 MicrosoftEdge/Demos 存储库克隆到本地驱动器，如下所示：

1. 如果尚未完成， 请下载 git 并安装它。

2. 如果尚未完成，请从 Node.js安装最新版本的 Node.js 和 npm 。

3. 转到新窗口或选项卡中的 MicrosoftEdge/演示 存储库。

4. 单击“ 代码 ”下拉按钮。

5. 单击“ 将 URL 复制到剪贴板 ”按钮。

   

   URL 将复制到剪贴板： https://github.com/MicrosoftEdge/Demos.git

   或者，如果已安装 GitHub Desktop，请单击“ 使用 GitHub Desktop 打开 ”以克隆存储库，然后跳过下面的命令提示符步骤。

   或者，可以使用 Visual Studio Code 的源代码管理窗格克隆存储库，并跳过下面的命令提示符步骤。

6. 假设已安装 git，请打开命令提示符。

7. 将存储库克隆到本地驱动器，输入从 GitHub 存储库复制的 URL 字符串。 如果使用命令提示符：

   # example location where the repo directory will be added:
   cd ~/GitHub
   git clone https://github.com/MicrosoftEdge/Demos.git
   

   有关克隆存储库的详细信息，请参阅：

   • 在 DevTools 示例代码中将“MicrosoftEdge / Demos”存储库克隆到驱动器。
   • 在为 WebView2 设置开发环境中克隆 WebView2Samples 存储库。 显示不同的示例存储库，但显示了几个工具的步骤。
   • 克隆存储库 - GitHub docs.

现在，你拥有了一个源文件的本地文件夹，其中 (如) 与 /demo-to-do/ Web 服务器上的文件匹配。

继续下一部分。

启动 localhost 服务器

1. 转到命令提示符，例如 git bash shell 或 Microsoft Visual Studio Code 中的“终端”窗格。

2. 转到克隆的 /demo-to-do/ 目录，例如 C:\Users\localAccount\GitHub\Demos\demo-to-do\.

   如果你使用 git bash shell，它是一个 UNIX shell，所以即使在 Windows 上，你也需要用反斜杠包装在引号中，或者使用正斜杠而不是反斜杠。

3. 创建一个名为 “test” 的工作分支并切换到 (以避免在 “main” 分支) 中更改演示文件：

   git checkout -b test
   

   这相当于：

   git branch test
   git switch test
   

4. 运行以下命令之一，以启动 Web 服务器：

   # Node.js option
   cd ~/GitHub/demos/demo-to-do
   npx http-server  # Node.js
   

   有关详细信息和选项，请参阅安装适用于 Visual Studio Code 的 DevTools 扩展中的启动服务器 (npx http-server) 。

   # Python 2 option
   cd ~/GitHub/demos/demo-to-do
   python -m SimpleHTTPServer  # Python 2
   

   # Python 3 option
   cd ~/GitHub/demos/demo-to-do
   python -m http.server  # Python 3
   

5. 在 Microsoft Edge 中打开一个选项卡，然后转到站点的本地托管版本。 你应该能够使用以下 localhost:8080方法访问它：

   

   另一个常见的等效 URL 是 http://0.0.0.0:8080。 Python 服务器选项的默认端口号为 8000。 确切的 端口号 可能有所不同。

   DevTools 工作区演示 网页随即打开。

另请参阅：

• 在 Azure 中运行简单的本地 HTTP 服务器如何设置本地测试服务器？ at MDN - 显示 Python。

继续下一部分。

选择源文件的本地文件夹作为工作区

1. 从上面继续，右键单击演示网页，然后选择 “检查”。

   DevTools 随即打开。

2. 在 DevTools 顶部的 “活动栏 ”中，选择 “源” (“ ) 工具，选择“ 工作区 ”选项卡 (与 “页面 ”选项卡) 分组，然后在 “工作区 ”选项卡中，单击“ 添加文件夹 ”按钮。

   “ 选择文件夹 ”对话框将打开。

3. 导航到文件夹，例如 C:\Users\localAccount\GitHub\Demos\demo-to-do，然后单击“ 选择文件夹 ”按钮。

   在 DevTools 顶部，会显示一条消息，显示“DevTools 请求对路径>的<完全访问权限”。

4. 单击 “允许 ”按钮。

   文件树demo-to-do显示在“源”工具的“工作区”选项卡中。 HTML、JS 和 CSS 文件有一个绿色的“映射”点。

5. 在 “工作区 ”选项卡中，展开文件树，然后单击一个或多个文件，例如 to-do.js。

   该文件将在 “源” 工具中打开：

   

打开快速源工具并编辑文件

假设想要继续查看 “元素 ”工具，但希望同时查看和编辑通过 “源” 工具打开的源文件。

1. 继续上述操作，在 DevTools 顶部的 “活动栏 ”中，选择“ 源 ” (“ ) 工具以外的工具，例如 “元素” (“ ) 工具。

2. 如果 “快速视图 ”工具栏未显示在 DevTools 底部，请按 Esc。

3. 在 DevTools 底部的 “快速视图 ”工具栏中，单击“ 更多工具 ”按钮，然后选择“ 快速源”。

   “ 快速源 ”工具在 DevTools 底部的 “快速视图 ”中打开：

   

   todo.js 显示，因为该文件已在 “源” 工具中打开。

4. 在演示“待办事项”网页中，删除所有任务。

5. 单击 “快速源 ”面板，然后按 Ctrl+F。

   在 快速源 工具中，将显示 查找 UI。

6. 输入 “无任务”，然后按 Enter。

7. 在代码行中，更改 no tasks 为 0 tasks.

   星号将显示在“文件名”选项卡上。

8. 按 Ctrl+S。

   星号从“文件名”选项卡中删除。

9. 刷新演示网页 (Ctrl+R) 。

10. 如果呈现的网页没有从“否”更改为“0”，并且 JS 文件名选项卡上不再有绿色的“映射”点，请长按或右键单击 Microsoft Edge 中的 “刷新 ”按钮，然后选择“ 硬刷新 ” (Ctrl+Shift+R) 。

    呈现的网页从“否”更改为“0”，并且 JS 文件名选项卡上有一个绿色的“映射”点。

    

现在，在 DevTools 中编辑文件夹的文件时，不仅会对服务器返回的暂时性文件进行编辑，还会保存到本地驱动器上的源文件中。 可以在显示其他工具 (的同时从 “快速源 ”工具中编辑文件，也可以从“ 源 ”工具) 中编辑文件。

本教程步骤到此结束。

另请参阅：

• 将本地文件夹添加到工作区，以便使用 DevTools 编辑文件并将更改保存到“源工具概述”中的磁盘。
• 在工作区中编辑和保存文件 (源工具 工作区选项卡)
  • 第 6 步：将 JavaScript 更改保存到工作区中的磁盘 教程 (源工具 工作区选项卡)

使用命令菜单打开文件

使用 命令菜单 打开文件将在 “快速源 ”工具和 “源 ”工具中打开该文件。

若要打开 命令菜单，请执行以下任一操作：

• 选择 “自定义和控制 DevTools>运行命令”。

• 按Ctrl+Shift+P (Windows, Linux) 或Command+Shift+P (macOS)。

• 在空的快速源工具 (或源工具) 中单击“运行命令”链接。

若要使用命令菜单的“打开文件”提示打开文件，请执行以下任一操作：

• 选择源工具> “页面”选项卡旁边) >“打开文件”旁边 (更多选项。

• 选择 “自定义和控制 DevTools>打开文件”。

• 按 Ctrl+P (Windows、Linux) 或 Command+P (macOS) 。

• 当 “快速源 ”工具 (或 “源 ”工具) 为空时，单击工具说明中的 “打开文件 ”链接：

  

  将显示命令菜单的“打开文件”提示。

  要在面板中的说明中显示 “打开文件 ”链接，您可能需要向下滚动或向上拖动 “快速视图 ”分隔线以使 “快速视图 ”面板更高。

快速源工具中的键盘快捷方式

快速源工具具有简化的 UI。 使用以下键盘快捷方式。

• Ctrl+F - 查找。

• Ctrl+S - 保存。 如果 HTML、JS 或 CSS 文件名上不再有绿色“映射”点，请长按或右键单击 Microsoft Edge 中的 “刷新 ”按钮，然后选择“ 硬刷新 ” (Ctrl+Shift+R) 。

• Ctrl+P - 使用 命令菜单打开文件。 这与转到 “源” 工具，然后单击 “工作区 ”选项卡中的文件具有相同的效果。

关闭文件

要关闭文件，请单击文件选项卡中的 x 按钮。

文件已在 快速源 工具和 源 工具中关闭。

另请参阅

• 源工具概述
  • 快速源工具，用于在“源工具概述”中使用其他工具时显示源文件
  • 使用更改工具跟踪对文件的更改