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

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. 在来源 > 工作区中，点击文件夹旁边的关联。