设置 Chrome DevTools 工作区，将修改保存到源码文件

设置工作区后，你在 DevTools 中所做的修改可以写回计算机上的源文件。你可以让本地服务器提供一个配置文件，使 DevTools 自动连接工作区文件夹，也可以在 Sources 面板手动添加工作区位置。

概览

通过自动或手动方式连接工作区文件夹，你在 DevTools 中对某个文件所做的修改，就能保存到计算机上的同一文件的本地副本。假设：

• 网站的源代码位于你的桌面上。
• 你从源代码目录运行本地 Web 服务器，因此可通过 localhost:PORT 访问网站；服务器还会提供一个包含元数据的简单 JSON 文件，后文将介绍它。
• 你在 Google Chrome 中打开了 localhost:PORT，正用 DevTools 修改网站的 CSS。

连接工作区文件夹后，你在 Sources 面板中对 CSS、HTML 和 JavaScript 文件所做的修改，可以保存到计算机上的源代码。不过，DevTools 不会保存你在 Elements 面板中对 DOM 所做的修改。

此外，DevTools 通常能够借助源映射（source maps），将经过优化的代码映射回原始源代码。

生成连接元数据

示例中的 UUID 与路径均为占位值；请换成随机生成的第4版 UUID 和项目根目录路径。

要让 DevTools 自动发现工作区文件夹，生成一个随机的第4版 UUID，并写入以下 JSON 文件：

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

将 JSON 文件放到 path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json。最后运行本地 HTTP 服务器，确保它也提供这个 JSON 文件。

也可以跳过这一步，直接按后文的方法手动连接文件夹。

连接工作区文件夹

以下步骤及后续操作使用官方 Automatic Workspace Folders Demo 演示这项功能。

1. 在 Chrome 中访问本地托管的页面，本例地址为 localhost:8000，然后打开 DevTools。
2. 在 Sources > Workspace 中，点击文件夹旁的 Connect。

3. 出现提示时，点击 Edit files，允许 DevTools 访问文件夹。

4. 连接成功后，可以在 Workspaces 标签中打开该文件夹。

Workspace 标签会在 HTML、CSS 和 JavaScript 文件旁显示绿色圆点。这表示 DevTools 已在页面的网络资源与文件夹中的文件之间建立了映射。

将修改保存回源代码文件夹

你可以保存对已连接工作区文件夹内任意 CSS、HTML 和 JavaScript 文件的修改。

保存 CSS 修改

提示：连接工作区文件夹后，AI assistance 面板可以自动将 CSS 修改保存到源文件。

1. 在 Sources > Workspaces 中，从已连接的工作区文件夹打开一个 CSS 文件。
2. 修改 CSS。这时修改会实时应用到页面，但尚未写入源文件。
3. 保存修改，例如按 Ctrl / Cmd + S，然后在源文件中查看保存的结果。Sources 面板会在文件名旁显示绿色圆点。

应用和保存 CSS 修改不需要重新加载页面。操作流程可观看 Google 官方CSS修改演示视频。

保存 HTML 修改

1. 在 Sources > Workspaces 中，从已连接的工作区文件夹打开一个 HTML 文件。
2. 修改 HTML。此时修改既不会实时应用到页面，也还没有写入源文件。
3. 保存修改，例如按 Ctrl / Cmd + S，然后在源文件中查看保存的结果。Sources 面板会在文件名旁显示绿色圆点。
4. 重新加载页面，查看修改生效后的结果。

操作流程可观看 Google 官方HTML修改演示视频。你可以从 Sources 面板应用并保存 HTML 修改，但不能从 Elements 面板这样做。

为什么不能从 Elements 面板修改并保存 HTML？

• Elements 面板中看到的节点树代表页面的 DOM。
• 为了显示页面，浏览器从网络获取 HTML、解析它，再将它转换为 DOM 节点树。
• 页面中的 JavaScript 可以增加、删除或修改 DOM 节点；CSS 的 content 属性也会影响最终呈现。
• 浏览器最终使用 DOM 决定向用户显示什么内容。
• 因此，用户看到的页面最终状态，可能与浏览器获取的 HTML 相差很大。
• DOM 受到 HTML、JavaScript 和 CSS 共同影响，DevTools 很难确定应将 Elements 面板中的某次修改保存到哪个源文件位置。

也就是说，DOM 树 !== HTML。

保存 JavaScript 修改

1. 在 Sources > Workspaces 中，从已连接的工作区文件夹打开一个 JavaScript 文件。
2. 修改 JavaScript。此时修改既不会实时应用到页面，也尚未写入源文件。
3. 保存修改，例如按 Ctrl / Cmd + S，然后在源文件中查看保存的结果。Sources 面板会在文件名旁显示绿色圆点。
4. 如果本地 HTTP 服务器监听源文件变更并自动重新加载页面，保存后就能看到修改生效；否则，按原文流程重新部署本地服务器。

操作流程可观看 Google 官方JavaScript修改演示视频。

提示：修改 JavaScript 时，有时需要同时访问 Elements 或 Console 等其他面板。可以使用 Drawer 并重新排列面板。

断开工作区文件夹连接

在 Sources > Workspace 中右键点击文件夹，在菜单中选择 Remove from workspace，再点击 Remove。

修改或删除元数据 JSON 文件中的 UUID，也会断开该文件夹的连接。

手动连接工作区文件夹

1. 打开本地托管的页面，再打开 DevTools。
2. 在 Sources > Workspace 中点击 Add folder manually，然后选择包含源文件的文件夹。

也可以直接将文件夹拖入 Sources 面板。

3. 接着完成前面“连接工作区文件夹”的第3、4步，即授予访问权限并打开文件夹。

限制

现代框架通常会把便于维护的源代码，转换成适合高效运行的优化格式。工作区文件夹连接通常能够借助源映射，将优化后的代码映射回原始源代码。

DevTools 社区持续支持不同框架和工具提供的源映射能力。如果工作区与所用框架配合时出现问题，或者经过自定义配置后成功运行，可以在邮件列表中发起讨论，或在 Stack Overflow提问，与 DevTools 社区分享经验。

后续步骤

可以在 Settings > Workspace 中管理已配置的所有文件夹。

接下来，可以继续学习如何使用 DevTools 修改 CSS和调试 JavaScript。

另请参阅

Local overrides 是另一项有些相似的 DevTools 功能，可以模拟网络内容或请求头。这样就能自由尝试修改页面，无需等待后端跟进。Local overrides 的修改在重新加载页面后仍会保留，但不会映射到页面的源代码。

来源与许可

译自 Google Set up workspaces to save changes to source files。作者：Kayce Basques、Sofia Emelianova；原文最后更新于2025年9月2日 UTC。

文字内容（除另有说明外）采用 CC BY 4.0，代码示例采用 Apache 2.0。本页文字是基于 Google 公开材料的中文翻译，参见 Google Developers Site Policies。

截图来自上述 Google 官方文档，保持原图，用于解释 DevTools 工作区操作；参见 Google 截图使用规则。Chrome 和 Google 的商标归 Google LLC 所有，本页不表示 Google 的认可或赞助。Java 是 Oracle 及其关联公司的注册商标。