从检查器(webkit,firebug等)导出CSS更改

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

然后不太难以接受这些更改并将它们应用到CSS文件中,但如果我可以在检查器中右键单击选择器并选择" export"那就太酷了。 或"复制",并在剪贴板中提供内容。

这样的事情存在吗?

12个解决方案
70 votes

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

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

这个地方到底是:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

Nicholas Zographos answered 2019-08-13T07:01:33Z
41 votes

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

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

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

Chris MacDonald answered 2019-08-13T07:02:12Z
11 votes

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

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

FelipeAls answered 2019-08-13T07:02:44Z
5 votes

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

[http://www.skybound.ca/]

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

编辑:这里的其他几个答案提到了谷歌浏览器链接到本地文件的能力(非常非常酷)。 看看其他答案!

Bryan Downing answered 2019-08-13T07:03:30Z
4 votes

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

Alexander Pavlov answered 2019-08-13T07:03:55Z
4 votes

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

enter image description here

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

Andrew Craswell answered 2019-08-13T07:04:28Z
3 votes

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

它被称为StyleURL - 它会对您在Chrome Inspector中所做的任何CSS更改进行输出,并输出有效的CSS作为差异:[https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp]

这是我添加" padding-bottom:50px" 到这个页面:StyleURL example diff

它也是开源的,也是GitHub上的:[https://github.com/Jarred-Sumner/styleurl-extension]

Jarred Sumner answered 2019-08-13T07:05:15Z
2 votes

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

Giorgio Tempesta answered 2019-08-13T07:05:40Z
0 votes

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

Abraham Brookes answered 2019-08-13T07:06:06Z
0 votes

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

在Inspector的“样式”部分中编辑现有CSS文件的CSS时,可以按Style Attribute重新保存整个文件并进行更改。 但是,如果您使用Sass /预处理器之类的元语言/使用捆绑等方式生成CSS,我不会认为这确实解决了这个问题,尽管CSS源地图可能也是如此。

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

官方的Apple文档有点过时,但在此处找到:Web Inspector教程 - 编辑代码来更改您的网页。

Taylor Edmiston answered 2019-08-13T07:06:54Z
0 votes

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

Frazer Kirkman answered 2019-08-13T07:07:20Z
-1 votes

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

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

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

Edwin Yip answered 2019-08-13T07:07:59Z
translate from https://stackoverflow.com:/questions/3355111/export-css-changes-from-inspector-webkit-firebug-etc