从检查器导出CSS更改（Webkit，Firebug等）

使用CSS时，通常会在浏览器（例如Chrome）中进行测试，右键单击元素，单击检查元素，然后在此处编辑CSS。使用箭头键更改诸如边距和填充之类的内容使排列内容变得非常容易。

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

是否存在这样的东西？

至少从Chrome v14起，我已经找到了答案。

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

这个地方正是：

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

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

请参阅本教程的“实时编辑和修订历史记录”部分。

Firediff是Firebug插件，可跟踪在Firebug中所做的更改。它记录了您将在HTML窗格中进行的所有操作（出色），还记录了您对Web Developer Toolbar扩展的简要使用（不太好），例如，按Shift-Ctrl-F键可获取以px为单位的字体大小信息。

我已经在Chrome浏览器中看到了Firebug扩展程序，但没有对其进行测试，我在Firefox中使用了Firediff。

我构建了一个Chrome扩展程序来实现此目的。

这称为StyleURL-它接受您在Chrome Inspector中所做的CSS更改，并将有效CSS作为差异输出：https : //chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

这是我在此页面添加“ padding-bottom：50px”的示例：

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

在Chrome浏览器中，控制台抽屉中还有“ 更改”标签，其中显示了所有CSS修改。这不是出口，但至少可以很方便地快速掌握已发生的变化。

我之前曾在SO上推荐过该产品（我不以任何方式隶属于他们）。

http://www.skybound.ca/

优秀的产品。听起来完全像您要找的东西，还有更多。

编辑：这里的其他几个答案都提到了Google Chrome浏览器可以链接到本地​​文件的功能（这非常酷）。查看其他答案！

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

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

还有一个方便的截屏视频，详细介绍了该扩展。

使用工作区，您可以在检查器（在Chrome中）中键入CSS时保存它们。问题在于，每个更改都会自动保存，并且无法禁用此功能，如http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/中所述，以及在Chrome开发者工具中禁用CSS更改的自动保存。

Firefox和Chrome现在都支持此功能，但是需要注意的是，在某些平台上，如果不是所有的Chrome默认都不显示它，则需要启用“更改”视图才能看到它（在我的Kubuntu Linux 20.04中不是默认情况下），下面是启用它的方法：转到“开发人员工具”栏中的“自定义和控制DevTools”按钮>“更多工具”>“更改”，然后该选项卡将出现在该按钮上：

在Firefox中，无需启用它，但是如果您来自Chrom *世界，可能很难找到它。只需检查“检查器”选项卡右侧的最后一部分：

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

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

在检查器的“样式”部分中为现有CSS文件编辑CSS时，您可以单击Cmd-S以重新保存更改后的整个文件。但是，如果您正在使用诸如Sass /预处理器/通过捆绑等方式生成CSS之类的元语言，尽管CSS源映射可能实现了此目的，但我认为这并不能真正解决该问题。

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

Apple的官方文档有些陈旧，但可以在以下位置找到：Web Inspector教程-编辑代码以更改您的网页。

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

我的Beta测试版产品LIVEditor正是这样做的。

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

这样，你就不必进行更改手动再在你的代码编辑器中后调整使用萤火虫或WebKit的开发工具吧。