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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

概览

通过自动（或手动）连接到工作区文件夹，您可以将在 DevTools 中进行的更改保存到计算机上同一文件的本地副本。例如，假设：

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

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

此外，DevTools 通常能够借助源代码映射将优化后的代码映射回原始源代码。

为连接生成元数据

如需让 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 文件。

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

关联工作区文件夹

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

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

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

    “Workspace”标签页中相应文件夹旁边的“连接”按钮。

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

    提示您允许 DevTools 访问该文件夹。

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

    已连接并打开的工作区文件夹。

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

将更改保存回源文件夹

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

保存对 CSS 的更改

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