logo标签列表

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

csswebkitgoogle-chrome-extensionweb-inspector
109

当我在使用CSS时，通常会在浏览器中测试 - 比如说Chrome - 右键单击一个元素，点击检查元素，并直接在那里编辑CSS。使用箭头键更改像边距和填充这样的东西使得对齐变得非常容易。

然后将这些更改应用到CSS文件并不是太难，但如果我能右键单击检查器中的选择器，选择“导出”或“复制”，并在剪贴板中获得内容，那就太棒了。

是否存在这样的功能？

写一个Safari/Chrome扩展应该不难。使用上下文菜单允许用户右键单击元素，然后获取对象的currentStyle属性，或许可以发送到剪贴板？ - tbeseda
也许在评论这里之前我应该去搜索一下。可能是https://dev59.com/k3VC5IYBdhLWcg3w2lGI的重复问题。 - MiffTheFox
啊，不错。我很想看看关于Chrome / WebKit的答案，但那些答案非常好。谢谢@MiffTheFox。 - hookedonwinter
看看Backfire：http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/ 没有尝试过，但听起来很有前途。 - Bryan Downing
@hookedonwinter，我认为现在是时候改变采纳的答案了 :) - Bryan Downing
1
@BryanDowning 搞定了！太棒了。感谢提醒。 - hookedonwinter
14个回答
80
我已经找到了答案，至少在Chrome v14中是这样的。 在Elements部分，只需单击CSS规则旁边的“filename:linenumber”链接。显示出来的CSS文件将包含所有修改内容。
就在这里： https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg
4
请注意，这也适用于通过检查器中的“+”图标添加的新CSS选择器。 - Jonathan Day
1
这仅适用于已添加到检查器样式表中的更改。它不适用于对现有类选择器的规则集进行的更改。 - ian.pvd
50
1
似乎你只能回滚到上一次刷新的状态。因此，如果你意外刷新/关闭标签页等操作，你将会失去更改。 - tomblah
这在现代打包工具如webpack中是如何工作的，其中所有的CSS都被捆绑成一个文件？ - mattgabor
我没有看到这个“本地修改”，这个答案过时了吗？ - Luke Pighetti
@LukePighetti 我在v79（2019年12月）中看到了它，如果我打开我感兴趣的源文件>右键单击>本地修改。这将在“控制台抽屉”上打开一个名为“更改”的选项卡，其中包含所有更改文件的左侧菜单。您还可以通过单击菜单省略号>更多工具>更改来访问它。 - xr280xr
12

在Chrome浏览器的控制台抽屉中，还有一个名为Changes 的选项卡，显示所有CSS修改内容。这不是一种导出方式，但至少很方便快速了解改变了什么。

Chrome开发工具中Changes选项卡的截图

2
此答案提供了一种内置的浏览器解决方案，可查看更改而无需安装其他扩展。它跟踪对任何样式表（或JS）所做的更改，并将其作为逐项差异与单独文件显示，并显示逐行添加、删除和单个字符更改。虽然没有导出功能，但它比2011年的当前最佳答案更好。 - ian.pvd
1
这些回答已经有9年了，其中有很多噪音，但这绝对是最好的答案。唯一缺少的是一种快速导出差异的方法，以便您可以在脚本或IDE中自动处理更改，而不必进行并排比较并手动调整样式表。 - Sami Fouad
11

Firediff 是一个 Firebug 的插件，用于跟踪 Firebug 中所做的更改。它会记录在 HTML 面板中的所有操作（非常好），但也会记录使用 Web Developer 工具栏扩展的简要信息（不是很好），例如按 Shift-Ctrl-F 获取 px 像素的字体大小信息。

我见过 Chrome 上的一个 Firebug 扩展，但没有测试过，我使用 Firefox 中的 Firediff 插件。

很酷的插件。绝对让我更接近我的目标。我会等待，看看是否会出现更好的东西（例如将格式化的CSS完全复制到剪贴板）。 - hookedonwinter
7
非常方便的工具！ - DanTheMann
2
除了 GitHub，所有链接都无法使用。请更新，听起来很有前途。 - Mirosław
7
现在Firefox和Chrome都支持这个功能，但值得注意的是，在某些平台上（如果不是全部），Chrome默认情况下不会显示它，您需要启用“更改”视图才能看到它（在我的Kubuntu Linux 20.04上，默认情况下没有显示）。这里是如何启用它的：进入开发人员工具栏中的“自定义和控制DevTools”按钮>“更多工具”>“更改”，然后选项卡将出现在底部。

enter image description here

在 Firefox 中不需要启用它，但如果你来自 Chrom* 的世界可能很难找到它。只需在 "检查器" 选项卡中的最后一节查看右侧即可：

enter image description here

谢谢 - 我的当前 Chrome 在 2020 年没有这个！ - Adam Hughes
5

我之前在SO上推荐过这个产品（我与他们没有任何关联）。

http://www.skybound.ca/

优秀的产品。听起来正是你想要的，而且更多。

编辑：这里有几个其他答案提到了谷歌浏览器链接到本地文件的能力（非常酷）。查看其他答案！
看起来非常棒。太遗憾了，它要价80美元。感谢@Bryan，好东西。 - hookedonwinter
2
这里的答案在过去几年中已经发生了变化。Chrome DevTools现在允许您将更改写回文件。令人兴奋的时刻！ - cloudworks
4
如果您编辑外部CSS，则可以将其最新修订版本从资源面板拖到支持DnD的任何文本编辑器中（请参见http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/，“保留更改”一节以了解更多详细信息）。您还可以在样式表资源的任何早期版本中还原CSS更改（在任何样式表修订版的右键弹出菜单中进行）。
4
如Cloudworks所述，这个问题的答案已经改变了。现在可以通过Chrome DevTools Autosave扩展程序来实现。该工具可以跟踪Chrome开发者工具控制台中所做的CSS和JavaScript更改，并将它们保存回本地文件。有关安装和设置扩展程序的说明，请参阅@addyosmani在他的博客上编写的指南here。

enter image description here

还有一个方便的屏幕录像，详细介绍了这个扩展。

2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接