Edit files with Workspaces

本教程提供设置和应用工作区的实际练习，以便您能够在本人的我的项目中应用工作区。工作区使您可能将在 DevTools 中所做的更改保留到存储在计算机上的源代码中。

Overview

工作区使您可能将在 Devtools 中所做的更改保留到计算机上同一文件的本地正本。例如，假如：

(1) 您的桌面上有站点的源代码。
(2) 您正在从源代码目录运行本地 Web 服务器，以便能够通过 localhost:8080 拜访该站点。
(3) 您曾经在 Google Chrome 中关上了 localhost:8080，并且您正在应用 DevTools 来更改站点的 CSS。

启用工作区后，您在 DevTools 中所做的 CSS 更改将保留到桌面上的源代码中。

Limitations

如果您应用的是古代框架，它可能会将您的源代码从易于保护的格局转换为通过优化以尽快运行的格局。Workspaces 通常可能在源映射的帮忙下将优化后的代码映射回原始源代码。然而框架之间在如何应用源映射方面存在很多差别。Devtools 根本无法反对所有的变动。

比方，Workspaces 不反对 Create React App.

Related feature: Local Overrides

Local Overrides 是另一个相似于 Workspaces 的 DevTools 性能。当您想对页面的更改进行试验，并且须要跨页面加载查看这些更改时，请应用本地笼罩，但您不关怀将更改映射到页面的源代码。

只有以后被加载到 Chrome 开发者工具的 web 利用对应的文件夹色彩扭转了：

间接在 Chrome 开发者工具里批改 index.html:

加上 from Jerry 的字符串：

刷新之后，这个更改也被长久化了：

留神，如果间接在开发者工具 elements 标签页里批改 DOM，则批改不会长久化到 HTML 文件里。

起因如下：

您在 Elements 面板上看到的节点树示意页面的 DOM。
为了显示页面，浏览器通过网络获取 HTML，解析 HTML，而后将其转换为 DOM 节点树。
如果页面有任何 JavaScript，该 JavaScript 可能会增加、删除或更改 DOM 节点。CSS 也能够通过 content 属性更改 DOM。
浏览器最终应用 DOM 来确定它应该向浏览器用户出现什么内容。
因而，用户看到的页面的最终状态可能与浏览器获取的 HTML 有很大不同。

这使得 DevTools 难以确定应保留在 Elements 面板中所做更改的地位，因为 DOM 受 HTML、JavaScript 和 CSS 的影响。

简而言之，the DOM Tree !== HTML.

咱们在 Sources 标签页，即可批改 HTML 和 JavaScript 文件并长久化。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: