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

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

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

使用 HTML、CSS 和 JavaScript 生成网页。 请参阅 Web 入门

使用 DevTools 对 CSS 进行基本更改。 请参阅 开始查看和更改 CSS

运行本地 HTTP Web 服务器。 请参阅：

使用本教程中使用的 Node.js () ：在安装用于Visual Studio Code的 DevTools 扩展中设置 localhost 服务器。

使用 Python：在如何设置本地测试服务器中运行简单的本地 HTTP 服务器？

使用 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。

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

在桌面上创建 app 目录。 将 、 styles.css和 script.js 文件的副本index.html从演示源代码保存到 app 目录中。 在本教程的其余部分中，此目录称为 ~/Desktop/app，不过可以使用其他路径。

安装 Node.js 和 npm。 有关详细信息，请参阅 安装 Node.js 和 Node 包管理器 (npm)

在 中 ~/Desktop/app启动本地 Web 服务器。 转到 文件夹， app 然后从命令提示符运行以下命令之一来启动 Web 服务器。 Node.js 选项：

在 Microsoft Edge 中打开一个选项卡，然后转到站点的本地托管版本。 应能够使用以下 URL 访问它： localhost:8080 或 http://0.0.0.0:8080。 注意： Python 服务器选项的默认端口号为 8000。 确切 的端口号 可能不同。

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

单击“ 源 ”选项卡。

在左侧) 的“ 导航器 ”窗格 (中，单击“ 文件系统 ”选项卡。

单击“ 将文件夹添加到工作区”。

打开文件资源管理器时，在“文件夹：”提示符中键入路径 (，例如 ~/Desktop/app) 。

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

在“ 文件系统 ”选项卡中，文件列表 () 显示一个页面图标，其中每个文件旁边都有一个双向箭头和一个绿点： index.html、 script.js和 styles.css。 (双向箭头颜色映射到 .html、 .js和 .css 文件类型。) 绿点表示 DevTools 已在从 Web 服务器接收的页面的网络资源与中的 ~/Desktop/app本地源文件之间建立映射：

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

打开 styles.css。 元素 color 的 h1 属性设置为 fuchsia。

选择 “元素” 工具。

应用于 元素的 CSS 规则显示在“ 样式 ”窗格中。 映射 文件 () 旁边的 styles.css:1 图标是带有双向箭头的页面。 此图标表示所做的任何更改都映射到 ~/Desktop/app/styles.css。

将 元素的 color 属性 的值更改为你喜欢的颜色。 为此，请在 DOM 树中选择 元素。 选择 fucshia，键入新颜色，然后从颜色列表中选择它：

在文本编辑器中打开 styles.css 。 属性 color 现在设置为新颜色，在本示例中为橙色。

刷新页面。

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

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

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

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

以下步骤演示如果不使用工作区，则不会在页面刷新时保留编辑。 我们现在将演示这一点，以便你以后不会花时间试图找出它不起作用的原因。

选择 “元素” 工具。

选择并编辑 元素的文本内容 h1 ，其中显示 Workspaces Demo，并将其替换为 I Love Cake。

在文本编辑器中打开 ~/Desktop/app/index.html 。 不会显示刚才所做的更改。

刷新页面。 页面将还原为原始标题。

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

单击“ 源 ”选项卡。

在“导航器”窗格中，单击“文件系统”旁边的“页面”选项卡。 如果未显示“ 页面 ”选项卡，请单击“ >> (更多选项卡) 然后选择” 页面”。

单击 (索引) 。 此时会打开页面的 HTML。

将Workspaces Demo替换为I Love Cake。 演示标题更改。

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

刷新页面。 元素 在刷新页面后继续显示新文本。

在文本编辑器中打开 ~/Desktop/app/index.html 。 元素 包含新文本。

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

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

选择 “元素” 工具。

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

在“运行”提示符下键入“快速”，然后选择“显示快速源”。 在 DevTools 窗口的底部，将显示 快速源 工具，其中显示了 的内容 index.html，这是在 源 工具中编辑的最后一个文件。

按 Ctrl+P (Windows、Linux) 或 Command+P (macOS) 打开“ 打开文件 ”对话框，如下一张屏幕截图所示。

在“打开”提示符下键入脚本，然后选择“应用/script.js”。

演示中的 “使用工作区编辑文件” 链接将定期设置样式。

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

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

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

注意

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

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