从检查器（webkit，firebug等）导出CSS更改

Question

当我使用CSS时，我经常在浏览器中测试 - 比如说Chrome，右键单击一个元素，单击Inspect Element，然后在那里编辑CSS。使用箭头键来改变边距和填充等内容可以让事情变得非常容易。

然后将这些更改应用到CSS文件并不是很难，但如果我可以在检查器中右键单击选择器并选择“导出”或“复制”，并将内容提供给我，那将会很酷。剪贴板。

这样的事情存在吗？

Answer 1

我找到了答案，至少从Chrome v14开始。

在Elements部分中，只需单击CSS规则旁边的“filename：linenumber”链接。显示的CSS文件将包含所有修改。

这个地方到底是：

Answer 2

要专门为Safari添加答案 - 这是有可能的。

在Inspector的“样式”部分中编辑现有CSS文件的CSS时，可以点击Cmd-S以使用更改重新保存整个文件。但是，如果您正在使用像Sass /预处理器这样的元语言/使用捆绑等生成CSS，我认为这并不能解决这个问题，尽管CSS源映射可能是可行的。

当您在样式部分顶部编辑CSS时，在Style Attribute下添加内联样式（不绑定到现有CSS文件），似乎无法轻松导出所有这些更改。现在，我只是为每个元素手动复制和粘贴覆盖。

官方的Apple文档有点过时，但在这里找到：Web Inspector Tutorial - Editing Code to Change Your Webpage。

Answer 3

在Chrome中，您可以在css检查器中单击并按住+按钮，然后选择将更改添加到检查器样式表。它不像在css选择器中直接编辑那么方便，但你写的都将在inspector-stylesheet.css中

Answer 4

我的beta-soon产品LIVEditor就是这么做的。

为了让您轻松理解它，您可以将Firebug的检查器嵌入到文本编辑器中。

这样，在使用Firebug或Webkit的开发人员工具进行调整后，您无需在代码编辑器中再次手动进行更改。

Answer 5

在Chrome中，您可以在“来源”标签中右键单击CSS文件，然后点击“本地修改”

这会显示您所有的本地更改。每个修订都带有时间戳，您可以回滚到任何以前的修订版。

本教程的See the Live Editing and Revision History部分。

Answer 6

Firediff是一个Firebug附加组件，用于跟踪Firebug中所做的更改。它会在HTML窗格中记录您要做的所有事情（很棒），但也会简要使用Web Developer Toolbar扩展（不是那么好），比如Shift-Ctrl-F来获取px中的字体大小信息。

我在Chrome中看过Firebug扩展程序，但没有测试它，我在Firefox上使用Firediff。

Answer 7

我之前已经建议过这个产品（我没有以任何方式与他们联系）。

http://www.skybound.ca/

优秀的产品。听起来正是你正在寻找的东西以及更多。

编辑：这里的其他几个答案都提到了谷歌浏览器链接到本地​​文件的能力（非常非常酷）。看看其他答案！

Answer 8

如果编辑外部CSS，则可以将其最新版本从“资源”面板拖到任何支持DnD的文本编辑器中（有关更多详细信息，请参阅http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/，“持久更改”部分。）您还可以将CSS更改还原为任何更早版本样式表资源的版本（在任何样式表修订版的右键单击弹出菜单中。）

Answer 9

正如cloudworks所提到的，对此的回答已经改变。现在可以通过Chrome DevTools Autosave扩展很好地完成。此工具可跟踪Chrome开发者工具控制台中的CSS和JavaScript更改，并将其保存回本地文件。有关安装和设置扩展的说明，请参阅@addyosmani在其博客here上撰写的指南。

还有一个方便的screencast，详细说明了扩展。

Answer 10

我构建了一个Chrome扩展程序。

它被称为StyleURL - 它会在Chrome Inspector中进行任何CSS更改并输出有效的CSS作为diff：https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

这是一个例子，我在这个页面添加了“padding-bottom：50px”：

它是开源的，也是GitHub上的：https://github.com/Jarred-Sumner/styleurl-extension

Answer 11

使用Workspaces，您可以在检查器（在Chrome中）中键入CSS时保存CSS。问题是每个更改都会自动保存，并且无法禁用此功能，如http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/和Disable automatic saving of CSS changes in Chrome Developer Tools所述。

Answer 12

如果您正在使用Firefox股票开发工具，您可以直接在工具对话框中编辑css - 单击CSS视口按钮（这是顶部带有{}符号的按钮）并直接编辑您的CSS。它将在浏览器中实时更新，当您完成后，只需将其直接复制粘贴到您的css文件中即可。太好了！