尝试将CS​​S更改保留在Chrome开发工具中的磁盘上文件

Question

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

我已经按照this short video教程通过Sources标签将磁盘上的项目文件映射到Dev Tools。一切正常，直到5:17左右，他在Elements选项卡中选择一个元素并进行多次CSS样式更改，这些更改会自动保留到磁盘上的文件中。

这对我不起作用。更改将不会保存到文件，当我刷新页面时，将恢复为原始样式。我已经检查了Sources面板中相应CSS文件旁边是否有星号，表示已经进行了更改，但没有任何内容。

我也尝试过在this SO question中发布的解决方案，但在编辑Elements选项卡中的样式后，我没有看到样式表的链接，该样式将重定向回Sources选项卡中的文件，允许更改为得救。

谁能告诉我我失踪了什么？谢谢！

Answer 1

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

1. 在“来源”中选择文件夹，然后点击“将文件夹添加到工作区＆＃39;
”



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



1. 选择＆＃39;映射到网络资源...＆＃39;。你会发现＆＃39; top＆＃39;消失。



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



您可以通过转到DevTools设置面板的“工作区”部分来确切了解所执行的操作。我们添加了一个本地工作区，然后将URL（在我的情况下是在我的计算机上并使用file://协议访问）映射到系统上的相对路径。