通过

使用工作区编辑文件（“文件系统”选项卡）

  • 项目

使用“源”工具中的“文件系统”选项卡定义工作区，将 DevTools 更改保存在源代码文件中，而不是仅保存在 Web 服务器返回的文件的暂时性副本中。

本教程提供在 DevTools 中设置和使用工作区的动手实践。 将文件添加到工作区后，使用 DevTools 在源代码中所做的更改将保存在本地计算机上。 这些更改在页面刷新时保留。

若要刷新所用技术的知识，请参阅以下文章：

简介

使用 DevTools 工作区 ，可以将对源代码的本地副本所做的更改保存到计算机上的同一文件，以便在页面刷新时保留更改。 下面是使用工作区的典型方案：

  • 桌面上有演示网站的源代码。

  • 你正在从源代码目录运行本地 Web 服务器，以便可通过 访问 localhost:8080站点。 注意：如果使用 Python 服务器选项，则默认端口号为 8000。

  • 你在 Microsoft Edge 中打开 localhost:8080 ，并且正在使用 DevTools 更改网站源代码，其中包括 CSS、HTML 和 JavaScript 文件。

下面的教程步骤将引导你完成此环境设置。

限制

如果使用新式框架，它可能会将源代码从易于维护的格式转换为经过优化以尽快运行的格式。 工作区通常能够通过使用 JavaScript 和 CSS 的 源映射 将优化代码映射回原始源代码。 但是，每个框架使用源映射的方式存在很大差异。

DevTools 不支持每个框架变体;例如，“工作区”功能 (“文件系统”选项卡) 不适用于“创建React应用框架”。

如果在将工作区与所选框架配合使用时遇到问题，或者确定所需的特定于框架的步骤，请在 Chrome DevTools 邮件列表中启动一个线程 ，或在 Stack Overflow 上提出问题 ，以便与 DevTools 社区的其他人员交换信息。

替代 是一项类似于工作区的 DevTools 功能。 如果想要试验对网页的更改，并且需要跨网页加载显示更改，但不关心将更改映射到网页的源代码，则可以使用替代。 但是，刷新网页时不会保存更改。

使用“替代”功能，可以在服务器上存储网页文件的本地副本。 刷新页面时，Microsoft Edge 加载文件的本地副本，而不是服务器上的文件。 若要了解有关替代的详细信息，请参阅 使用本地副本替代网页资源 (替代选项卡) 。

创建源文件目录

我们将设置演示文件，然后设置 DevTools。

  1. 在另一个窗口或选项卡中，转到 工作区演示源代码。

  2. 创建 app 目录，例如 ~/Desktop/app 或 C:\Users\myusername\app\。 将 、、README.md、 script.js和 styles.css 从演示源代码复制到index.html目录app。 ../shared/img/logo.png 在本教程的其余部分中，此目录称为 ~/Desktop/app 或 C:\Users\myusername\app\，不过你可以使用其他路径。

  3. 如果尚未安装，请安装 Node.js 和 npm。 有关详细信息，请参阅安装适用于 Visual Studio Code 的 DevTools 扩展中的安装Node.js 和 Node Package Manager (npm) 。

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

  5. 转到 app 创建的目录，例如 ~/Desktop/app 或 C:/Users/myusername/app。 如果使用 git bash shell，则它是一个 UNIX shell，因此即使在 Windows 上，也需要用引号包装反斜杠的目录路径，否则使用正斜杠而不是反斜杠。

  6. 运行以下命令之一，启动 Web 服务器：
    Node.js 选项：

    # Node.js option
cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
npx http-server  # Node.js

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

    # Python 2 option
cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
python -m SimpleHTTPServer  # Python 2

    # Python 3 option
cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
python -m http.server  # Python 3

  7. 在 Microsoft Edge 中打开选项卡，然后转到站点的本地托管版本。 应能够使用 localhost:8080访问它：

    DevTools 工作区演示

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

在 DevTools 中定义工作区

  1. 按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 打开 DevTools 控制台：

    DevTools 控制台

  2. 单击“ 源 (源”工具图标) 选项卡。

  3. 在左侧) 的“ 导航器 ”窗格 (中，单击“ 文件系统 ”选项卡 (，该选项卡与 “页面 ”选项卡) 分组：

    “文件系统”选项卡

  4. 单击“ 将文件夹添加到工作区”。 文件资源管理器或 Finder 打开。

  5. 转到 /app/ 创建的目录。 例如，在 “文件夹： ”文本框中，输入路径，例如 ~/Desktop/app 或 C:\Users\myusername\app\。 然后单击“ 选择文件夹” 按钮。

    DevTools 会提示是否授予 DevTools 对 app 目录的完全访问权限。

  6. 单击“ 允许 ”按钮，授予 DevTools 读取和写入目录的权限。

    在“ 文件系统 ”选项卡中，有一个绿点的页面图标，表示 index.html、 script.js和 styles.css。 绿点表示 DevTools 已在从 Web 服务器接收的页面的网络资源与目录中的本地源文件 app 之间建立映射：

    “文件系统”选项卡有一个绿点，指示从服务器接收的资源与本地源文件之间的映射

编辑 CSS 并保存对源文件所做的更改

若要在 CSS 文件中进行更改并将其保存到磁盘，请执行以下操作：

  1. 在 “源” 工具的“ 文件系统 ”选项卡中， (“ 页面 ”选项卡) 分组，选择 styles.css 在编辑器窗格中将其打开。 元素 color 的 h1 属性设置为 fuchsia：

    在文本编辑器中查看styles.css

  2. 选择 “元素 (元素”工具图标) 工具，然后在 DOM 树中展开 <body> 元素，然后选择元素 <h1> 。

    “ 样式 ”窗格显示应用于 元素的 <h1> CSS 规则。 映射 文件 (映射文件图标) 旁边的 styles.css:1 图标是带有绿点的页面。 绿点表示对此 CSS 规则所做的任何更改都映射到 styles.css 目录中 app ：

    “映射文件”图标，带有双向箭头的页面

  3. 将 元素的 color 属性 <h1> 的值更改为橙色。 为此，请在 <h1>DOM 树中选择 元素。 在 的 CSS 规则中 h1，单击 ， fuchsia开始键入 橙色，然后从颜色列表中选择 橙色 ：

    更改 styles.css 中的颜色属性

  4. 在文本编辑器（如Visual Studio Code）中app打开目录中的副本styles.css。 属性 color 现在设置为新颜色，在本示例中为橙色。 更改不仅在从 Web 服务器返回的文件的副本中进行了;工作区目录中的映射文件中 app 也进行了更改。

  5. 刷新页面。

元素的颜色 <h1> 仍设置为新颜色。 更改在刷新时保留，因为在进行更改时，DevTools 会将更改保存到磁盘。 刷新页面时，本地服务器从磁盘中提供文件的修改副本。

提示： 还可以通过单击彩色样本来打开颜色选取器以选取新颜色来更改颜色。 所选颜色的十六进制值是颜色名称。

编辑 HTML 并保存对源文件所做的更改

在 “元素” 工具中，可以在服务器返回的文件的副本中更改 HTML 标记。 但是，若要将编辑内容保存到本地源文件，需要使用 “源 ”工具而不是 “元素” 工具。

更改元素工具中的 DOM 树不会保存更改

可以使用 “元素” 工具中的 DOM 树对 HTML 内容进行更改，但对 DOM 树所做的更改不会保存到磁盘，只会影响当前的浏览器会话。

以下步骤演示在页面刷新之间不会保留 DOM 树中的编辑：

  1. 继续上述内容，选择“ 元素” 工具。

  2. 在 DOM 树的 元素中 <h1> ，选择文本字符串 DevTools Workspaces Demo，将其删除，键入文本字符串 I Love Cake，然后按 Enter。 呈现的网页显示新的标题文本：

    尝试从元素工具中的 DOM 树更改 HTML

  3. 在index.html文本编辑器（如 Visual Studio Code）中打开目录中的文件app。 未显示刚刚所做的更改;标题仍显示为“DevTools 工作区演示”。

  4. 在浏览器中，刷新演示页。 页面将还原为原始标题“DevTools Workspaces Demo”，因为带有编辑的 DOM 树被丢弃，并且 DOM 是从工作区目录中未 index.html 更改的文件 app 重新创建的。

从源工具更改 HTML 可保存更改

如果要保存对网页 HTML 的更改，请在 “源” 工具中使用在“ 文件系统 ”选项卡) (定义的工作区来编辑 HTML，而不是在 “元素” 工具的 DOM 树中更改 HTML。

  1. 继续上述操作，单击“ 源 (源”工具图标。) 选项卡。

  2. 在左侧的“导航器”窗格中，选择 。index.html 此时会打开页面的 HTML。

  3. 将 (文件中的 替换为 <h1>DevTools Workspaces Demo</h1><h1>I Love Cake</h1>，而不是 “元素” 工具) 中的 DOM 树。

  4. 按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存更改。

  5. 刷新页面。 呈现页中的标题将更改为“I Love Cake”，因为该字符串已保存在映射app目录中index.html：

    从源工具更改 HTML

  6. 在文本编辑器（如Visual Studio Code）中app打开目录中的副本index.html。

    元素 <h1> 包含新文本，因为你使用 源 工具的编辑器进行了更改以编辑 index.html 并保存更改，并且该文件在工作区中映射 (“ 文件系统 ”选项卡) ，文件图标上的绿色点表示。

编辑 JavaScript 并保存对源文件所做的更改

使用 DevTools 代码编辑器main是源工具。 但有时，在编辑文件时，你需要访问其他工具，例如 元素 工具或 控制台。 快速源工具仅提供源工具中的编辑器，而任何工具都处于打开状态。

打开 DevTools 代码编辑器以及其他工具：

  1. 继续上述操作，选择 “元素 (元素”工具图标。) 工具。

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

  3. 在 “运行 ”提示符下，开始键入 “快速”，然后选择“ 显示快速源”：

    使用命令菜单打开“快速源”工具

    在 DevTools 窗口的底部， “快速源 ”工具打开，其中显示 的内容 index.html，因为这是在 源 工具中编辑的最后一个文件。 如果需要，请单击“ 展开快速视图”，并确保选择了 “元素” 工具。

  4. 按 Ctrl+P (Windows、Linux) 或 Command+P (macOS) 显示命令菜单的“打开文件”提示：

    使用“打开文件”对话框打开 script.js

  5. 开始键入脚本，然后选择应用/目录中的 script.js。

    文件列表显示在 快速源 工具中。 在呈现的演示网页中， “使用工作区编辑文件” 超链接的样式不是斜体。

  6. 使用 快速源 工具将以下代码添加到 script.js的底部：

    document.querySelector('a').style = 'font-style:italic';

  7. 按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存更改。

  8. 刷新页面。 如果需要，请单击并按住“ 刷新 ”按钮，然后选择“ 硬刷新”。 页面上 带有工作区超链接的“编辑文件 ”现在已斜体化：

    页面上的链接现在已斜体化

另请参阅

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由凯斯·巴斯克创作。

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