尝试在Chrome开发工具中将CSS更改持久化到磁盘上的文件

我刚刚开始探索在Chrome开发工具中动态保存对页面所做更改及其样式的可能性

我已经学习了通过

Sources

选项卡将磁盘上的项目文件映射到开发工具的教程。一切正常，直到5:17左右，他在

Elements

选项卡中选择了一个元素，并进行了几个CSS样式的更改，这些更改会自动保存到磁盘上的文件中

这对我不管用。更改不会保存到文件中，当我刷新页面时，页面将恢复为原始样式。我已经检查了

Sources

面板中相应的CSS文件旁边是否有一个星号，表示已经进行了更改，但是没有任何内容

我还尝试了发布的解决方案，但在“元素”选项卡中编辑样式后，我没有看到指向样式表的链接，该链接将重定向回“源”选项卡中的文件，从而允许保存更改

---

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

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

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

如果您在Sources中打开我们的样式表，并转到Elements面板进行更改，那么返回后您将看到一个单独的样式表实例，其中包含待定的更改。原因是Chrome还不知道如何将URL映射到系统上的文件

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

现在在“图元”面板中进行更改。返回“源”面板时，更改将自动显示，无需任何显式保存

通过转到DevTools设置面板的工作空间部分，您可以确切地看到所做的工作。我们添加了一个本地工作区，然后将URL映射到系统上的相对路径，在我的例子中，URL位于我的计算机上，通过

文件：//

协议访问

---

您正在使用哪个IDE，例如，有一个名为Live style for sublime的软件包，可用于保存开发人员工具中的更改。您正在外部文件或内联文件中更改的CSS是什么？在“元素”面板中进行更改时，仅保留外部CSS文件。必须在“源”面板中更改内联样式。@Gideon所有CSS都位于外部文件中。据我所知，我所做的一切都和教程一样。@CameronA谢谢你的提示。如果没有其他解决当前问题的方法，我一定会看一看。谢谢你的冗长回复。是的，这些都是我在教程中遵循的步骤。很遗憾，我还没有把它修好。我看到您只是使用磁盘上的路径来“服务”站点。我使用的是

python简单服务器

，所以没有它就试过了。运气不好。事实上，现在

映射到网络资源

选项完全没有了

python服务器

。不管是什么，我的Chrome/DevTools似乎不知怎么搞砸了。这是一个非常简单的过程，所以我不明白为什么它拒绝工作！我也试过使用一个文件服务器，它对我有效。确保您拥有最新版本的Chrome，然后尝试使用新的Chrome配置文件。查看是否有此帮助。在查找“映射到网络资源”选项时，请确保右键单击/cmd并单击映射文件。抓住我了。