Google Chrome 具有实时 CSS 编辑功能并将更改保存回原始文件。可以吗？

Question

我喜欢现代浏览器的一点是，你可以编辑 CSS 并实时查看结果。在设计前端元素时，我经常会直接在 Chrome 中调整许多 CSS 属性，只有当我对结果满意时，我才会将所有更改复制回原始 CSS 文件。我不确定这种做法有多普遍，但对我来说很有效。

问题：是否有任何方法（也许是扩展）可以将 Google Chrome 中的原始页面 CSS 与编辑后的页面 CSS 进行比较并输出所有更改？这可能听起来很懒，但却很有意义：如果您已经在 Chrome 上编辑 CSS 大约一个小时，那么追溯所有 div 和类中的所有更改可能会很耗时，而这时，一个可以立即输出更改的工具可以节省大量时间。

编辑：或者也许可以使用控制台中的一些 javascript 向导来完成此操作？

Answer 1

您可能对 Google Chrome 内置的这个简洁功能感兴趣：

使用 Chrome 开发者工具更改 CSS 并保存在本地文件系统上

我现在试过了，它能很好地突出显示更改的行。只需单击“保存”即可完成！:)

Answer 2

Chrome 现在会自动执行此操作。我使用的是 v33，但此问题已经存在一段时间了。

1. 只需对 css 文件进行更改并从“源”面板保存即可。
2. 所有后续更改将自动保存。

请注意，如果您使用工作区，则文件系统本身中的文件将在源面板中被视为已修改，而不是同一文件的多个版本。