如何保存Chrome开发者工具中样式面板的CSS更改？

Question

如何保存Chrome开发者工具中样式面板的CSS更改？

htmlcssgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools

222

如何保存Google Chrome开发者工具的样式面板中的CSS更改？

在工具网站上提到，我们可以在资源面板中看到所有更改

enter image description here

但是我正在本地工作的CSS文件上，但是对于我来说更改在资源面板中没有显示

enter image description here

顺便问一下，你知道有没有Chrome开发者工具的附加组件或工具可以保存CSS更改吗？ 我知道Firebug有很多https://stackoverflow.com/search?q=firebug+CSS+changes+save

- Jitendra Vyas

现在有一个API可以让DevTools扩展程序接收有关正在更改的资源的通知，因此您可以创建一个扩展程序，将其与您选择的IDE集成，或者只是将资源内容发布到WebDAV服务器：http://developer.chrome.com/extensions/devtools.inspectedWindow.html#event-onResourceContentCommitted - caseq

9

我认为这个问题及其答案已经过时，因为Chrome将修改后的CSS保存功能移动到了“资源”面板中。这个功能相当混乱，有点误导性：我在这个相关的Stack Overflow帖子中详细探讨了Chrome的修改CSS保存功能：https://dev59.com/o2Qo5IYBdhLWcg3wfPfK。 - ChaseMoskal

可能是重复的问题，这里有一个相关的讨论：如何从检查器（webkit、firebug等）中导出CSS更改。 - mems

“本地覆盖”是一种新的方式，从Chrome 65开始可用。Overrides是不同于Workspaces的功能。 - Kayce Basques

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FajitaNachos · Answer 1

为了回答你关于能够保存更改的任何扩展的最后一部分问题，这里有一个hotfix。

它允许您直接从Chrome Dev Tools将更改保存到GitHub。然后，您可以在GitHub上设置一个post-receive hook来自动更新您的网站。