在Chrome Dev工具中尝试将CSS更改持久保存到磁盘文件中

Question

我刚开始探索在Chrome Dev Tools中实时保存页面和样式更改的可能性。我按照这个短视频教程将项目文件映射到Dev Tools中的Sources选项卡。一切都很顺利，直到5:17左右，他在Elements选项卡中选择一个元素并进行了几个CSS样式更改，这些更改会自动保存到磁盘上的文件中。

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

我还尝试了这个SO问题中发布的解决方案，但在Elements选项卡中编辑样式后，我看不到指向Sources选项卡中文件的样式表链接，从而使更改得以保存。

有人能告诉我我缺少什么吗？谢谢！

- mikeym

---

你使用哪个集成开发环境（IDE）？例如，Sublime有一个名为Live-style的软件包，可以让你在开发工具中保存更改。 - Kamran Asgari

你正在更改的CSS是在外部文件中还是内联的？只有在Elements面板中进行更改时，才会保留外部CSS文件的更改。内联样式的更改必须在Sources面板中完成。 - Gideon Pyzer

@Gideon 所有的 CSS 都在外部文件中。就我所知，我已经按照教程做了一切。 - mikeym

@CameronA 感谢你的建议。如果当前问题没有其他解决方法，我一定会仔细研究它。 - mikeym

Answer 1

你需要确保将工作区映射到网络资源，以便自动保存更改。我已经列出了以下步骤，以确保正确地完成此操作。

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

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

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

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

你可以通过转到DevTools设置面板的工作区部分来查看实际所做的内容。我们添加了一个本地工作区，然后将URL映射到系统上的相对路径中，我的情况是在计算机上使用file://协议访问。

- Gideon Pyzer

---

感谢你的详细回复。是的，这些步骤大多都是我在教程中遵循的，但可悲的是它并没有解决我的问题。我看到你只是在使用磁盘上的路径来“服务”该网站。我在使用 python simple server，所以尝试不使用它，但还是无法解决问题。事实上，现在无论是否使用 python server，Map to Network Resource选项都已经完全消失了。不管怎么说，似乎我的Chrome / DevTools出了点问题。这是一个非常简单的过程，所以我想不出为什么它不起作用！ - mikeym

我也尝试过使用文件服务器，它可以正常工作。请确保你使用的是最新版本的Chrome浏览器，并创建一个新的Chrome账户来尝试一下。看看是否有所帮助。 - Gideon Pyzer

请确保在查找“映射到网络资源”选项时右键单击所映射的文件。这个小细节差点让我没看出来。 - Pocketsand