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

Question

109

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

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

是否存在这样的功能？

- hookedonwinter

写一个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个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Edwin Yip · Answer 1

我的即将推出的产品LIVEditor可以完美实现这一点。

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

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

- Frazer Kirkman · Answer 2

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

- Abraham Brookes · Answer 3

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

- Taylor D. Edmiston · Answer 4

针对 Safari 的问题，添加答案是有可能的。

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

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

官方的 Apple 文档有点过时，但可以在此处找到：Web Inspector 教程 - 编辑代码以更改网页。