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

Question

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

然后不太难以接受这些更改并将它们应用到CSS文件中，但如果我可以右键单击检查器中的选择器并选择“导出”或“复制”并拥有内容，那将会很酷可以在我的剪贴板中找到。

这样的事情是否存在？

Answer 1

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

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

这个地方完全是：

Answer 2

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

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

本教程的

See the Live Editing and Revision History部分。

Answer 3

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

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

Answer 4

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

http://www.skybound.ca/

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

Answer 8

我构建了一个完全可以做到这一点的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

Answer 9

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

Answer 10

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

Answer 11

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

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

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

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

Answer 12

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

中。

Answer 13

我的即时测试产品LIVEditor完全正确。

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

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