css - 尝试在 Chrome 开发工具中将 CSS 更改保存到磁盘上的文件

Question

我刚刚开始探索在 Chrome Dev Tools 中即时保存对页面所做的更改及其样式的可能性。

我关注了this short video关于通过 Sources 选项卡将磁盘上的元素文件映射到开发工具的教程。一切正常，直到 5 点 17 分左右，他在 Elements 选项卡中选择了一个元素，并进行了几个 CSS 样式更改，这些更改自动保存到磁盘上的文件中。

这对我不起作用。更改不会保存到文件中，当我刷新页面时会恢复为原始样式。我检查过 Sources 面板中相应的 CSS 文件旁边是否有星号，表示已进行更改，但那里什么也没有。

我也尝试过 this SO question 中发布的解决方案但在元素选项卡中编辑样式后我看不到样式表的链接，该链接将重定向回源选项卡中的文件，允许保存更改。

谁能告诉我我错过了什么？谢谢!

Answer 1

您需要确保将工作区映射到网络资源以自动保留更改。我已执行以下步骤以使其正常工作。

1. 选择源中的文件夹，然后单击“将文件夹添加到工作区”

1. 如果您在“源”中打开我们的样式表并转到“元素”面板进行更改，返回时您将看到打开的样式表的一个单独实例，其中包含未决更改。原因是 Chrome 还不知道如何将 URL 映射到您系统上的文件。

1. 选择“映射到网络资源...”。您会注意到“顶部”消失了。

1. 现在在“元素”面板中进行更改。当您返回 Sources 面板时，更改将自动显示，无需任何显式保存。

您可以转到 DevTools 设置面板的“工作区”部分，准确查看所做的工作。我们添加了一个本地工作区，然后将 URL(在我的例子中是在我的计算机上并使用 file:// 协议(protocol)访问)映射到系统上的相对路径。