设置工作区以保存对源文件所做的更改

Kayce Basques

Sofia Emelianova

通过设置工作区，将您在开发者工具中所做的更改保存回计算机上的源文件。您可以通过提供配置文件来自动将工作区文件夹连接到开发者工具，也可以在来源面板中手动添加工作区位置。

概览

自动（或手动）连接到工作区文件夹后，您就可以将开发者工具中所做的更改保存到计算机上同一文件的本地副本中。例如，假设：

• 您在桌面上拥有网站的源代码。
• 您正在从源代码目录运行本地 Web 服务器，以便可以通过 localhost:PORT 访问该网站，并且该网站还提供包含元数据的简单 JSON 文件（稍后会介绍）。
• 您在 Google Chrome 中打开了 localhost:PORT，并正在使用开发者工具更改该网站的 CSS。

关联工作区文件夹后，您在源代码面板中对 CSS、HTML 和 JavaScript 文件所做的更改都会保存到计算机上的源代码中。不过，开发者工具不会保存您在元素面板中对 DOM 所做的更改。

此外，借助源代码映射，开发者工具通常能够将优化后的代码映射回原始源代码。

为连接生成元数据

若要让开发者工具自动发现您的工作区文件夹，请生成一个随机的版本 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 文件。

或者，您也可以跳过此步骤，手动设置文件夹连接。

关联工作区文件夹

注意： 此步骤和后续步骤使用自动工作区文件夹演示来展示该功能。

如需关联文件夹，请执行以下操作：

1. 在 Chrome 中，前往本地托管的网页（在本示例中为 localhost:8000），然后打开开发者工具。

2. 在来源 > Workspace 中，点击文件夹旁边的关联。

   

3. 出现提示时，点击修改文件，以允许开发者工具访问您的文件夹。

   

4. 关联后，您可以在工作区标签页中打开该文件夹。

   

Workspace 标签页会在 HTML、CSS 和 JavaScript 文件旁边显示一个绿点。这些绿点表示开发者工具已在网页的网络资源与文件夹中的文件之间建立了映射。

将更改保存回来源文件夹

您可以将更改保存到关联的工作区文件夹中的任何 CSS、HTML 和 JavaScript 文件。

保存对 CSS 的更改

提示： 连接工作区文件夹后，AI 辅助面板可以自动将 CSS 更改保存到源代码中。

如需保存对 CSS 的更改，请执行以下操作：

1. 在源代码 > 工作区中，打开已连接的工作区文件夹中的 CSS 文件。

2. 更改您的 CSS。

   注意： 更改会应用于实时页面，但尚未应用于源代码。

3. 保存更改（例如，按 Ctrl / Cmd + S），然后查看源文件中应用的更改。Sources 面板会在文件名旁边显示一个绿点。

   注意： 您无需重新加载页面即可应用和保存 CSS 更改。

如需了解工作流程，请观看以下视频：

保存对 HTML 的更改

如需保存对 HTML 的更改，请执行以下操作：

1. 在源代码 > 工作区中，打开已连接的工作区文件夹中的 HTML 文件。

2. 对 HTML 进行更改。

   注意： 更改不会应用于实际网页，也不会应用于来源。

3. 保存更改（例如，按 Ctrl / Cmd + S），然后查看源文件中应用的更改。Sources 面板会在文件名旁边显示一个绿点。

4. 重新加载页面即可看到更改生效。

如需了解工作流程，请观看以下视频：

注意： 您可以在来源面板中应用和保存 HTML 更改，但无法在元素面板中执行此操作。

为什么无法通过 Elements（元素）面板更改 HTML？

• 您在元素面板上看到的节点树表示页面的 DOM。
• 为了显示网页，浏览器会通过网络提取 HTML，解析 HTML，然后将其转换为 DOM 节点树。
• 如果网页包含任何 JavaScript，该 JavaScript 可能会添加、删除或更改 DOM 节点。CSS 也可以通过 content 属性更改 DOM。
• 浏览器最终会使用 DOM 来确定应向浏览器用户呈现哪些内容。
• 因此，用户看到的网页最终状态可能与浏览器提取的 HTML 大不相同。
• 这使得开发者工具很难确定应将元素面板中所做的更改保存在何处，因为 DOM 会受到 HTML、JavaScript 和 CSS 的影响。

简而言之，DOM 树 !== HTML。

保存对 JavaScript 的更改

如需保存对 JavaScript 的更改，请执行以下操作：

1. 在源代码 > 工作区中，打开已连接的工作区文件夹中的 JavaScript 文件。

2. 更改 JavaScript。

   注意： 更改不会应用于实际网页，也不会应用于来源。

3. 保存更改（例如，按 Ctrl / Cmd + S），然后查看源文件中应用的更改。Sources 面板会在文件名旁边显示一个绿点。

4. 如果您的本地 HTTP 服务器会监听实时源文件更改并自动重新加载页面，那么您在 DevTools 中保存更改后，就会看到更改已应用。否则，请重新部署本地服务器。

如需了解工作流程，请观看以下视频：

提示： 更改 JavaScript 时，有时您需要访问其他面板，例如 Elements 面板或 Console。为此，您可以使用抽屉式导航栏和重新排列面板。

移除工作区文件夹连接

如需移除工作区文件夹连接，请在源代码 > 工作区中右键点击相应文件夹，从下拉菜单中选择从工作区中移除，然后点击移除。

注意： 在元数据 JSON 文件中更改或删除文件夹的 UUID 也会断开文件夹的连接。

手动关联工作区文件夹

1. 在本地托管的网页上打开开发者工具。

2. 在来源 > Workspace 中，点击手动添加文件夹。然后选择包含源文件的文件夹。

   

   注意： 您也可以将文件夹拖动到来源面板中。

3. 然后，按照关联工作区文件夹中的第 3 步和第 4 步操作。

限制

如果您使用的是现代框架，它可能会将您的源代码从易于维护的格式转换为经过优化、可尽快运行的格式。工作区文件夹连接通常能够借助源代码映射将优化后的代码映射回原始源代码。

开发者工具社区致力于支持各种框架和工具中的 Source Map 提供的功能。 如果您在使用工作区和所选框架时遇到问题，或者在进行一些自定义配置后使其正常运行，请在邮寄名单中发起讨论或在 Stack Overflow 上提问，与 DevTools 社区的其他成员分享您的知识。

后续步骤

您可以在 设置 > 工作区中管理所有已设置的文件夹。

接下来，了解如何使用开发者工具更改 CSS 和调试 JavaScript。

另请参阅

本地覆盖是开发者工具中另一项类似的功能，可让您模拟 Web 内容或请求标头。这样，您就可以自由地对页面进行更改实验，而无需等待后端跟进。使用本地替换功能时，更改会在网页加载后保留，但不会映射到网页的源代码。