在 Chrome 或 Safari 中进行完整的即时样式表编辑答案

【问题标题】：Full on-the-fly stylesheet editing in Chrome or Safari在 Chrome 或 Safari 中进行完整的即时样式表编辑
【发布时间】：2011-06-14 17:34:45
【问题描述】：

我讨厌 Firefox，我真的很讨厌，但作为一名 Web 开发人员，我依赖于 Firebug 提供的强大工具集。最近 Chrome 和 Safari 的检查工具允许用户编辑完整的块结构代码（以非常错误的方式），但您仍然无法编辑完整的样式表。通常当有人提出这个问题时，Chrome 和 Safari 开发人员会说“但你可以编辑 CSS”，这在一定程度上是正确的。您可以在两个浏览器中逐个编辑 CSS 属性（如果您有很多更改，则需要很长时间），但是无法查看完整的计算样式表，在其中进行编辑并立即查看结果。迄今为止，只有在 Firefox 上完整安装 Firebug 才能执行此操作。

在 Chrome 或 Safari 阵营中是否有任何动力来构建一个插件来匹配这个无与伦比的功能？允许您将 CSS 插入页面的廉价插件不是解决方案。真的很简单：

列出当前引用的样式表
选择您要编辑的，然后点击编辑按钮
查看样式表中的所有代码
进行更改并立即看到它们反映在页面上

构建这样的东西真的那么难吗？我想一定是，b/c 为什么两个浏览器的开发者社区会完全忽略它？如果现在有什么东西可以提供这种能力，我很想听听；否则，也许有人会站出来为 Chrome 或 Safari 开发它。似乎开发 CSS Edit 应用程序的人会全力以赴。

【问题讨论】：

I hate Firefox - 一个不常见的视图。有什么特别的原因吗？至于您的实际问题 - 我不经常发现自己使用 Firebug 的“更改实际 CSS 文本”功能，所以我不会错过 Chrome 中的它。 “逐个属性”的变化对我来说只是第二天性。显然，在 Chrome/Safari 中拥有您所说的 Firebug 功能会很好 - 但我认为这对大多数开发人员来说没什么大不了的。
“一个不常见的观点” - 几乎没有。 Firefox，尤其是 Gecko 渲染引擎，开始显示它已经过时了。在我的团队（大约 400 名专业人员）的开发人员中，经常听到它被称为“新 IE”。
我很抱歉，但这听起来完全是垃圾。 Firefox 3.6.13，甚至不是最新版本，在 Acid3 测试中得分高达 90 多岁。我真的很感兴趣 - 渲染引擎有什么问题让你讨厌它，以至于你的帖子的第一句话是I hate Firefox？
除了 Gecko 偶尔出现的行高和字间距错误外，Firefox 不稳定且占用内存（我在 Mac 上，听说在 Windows 上要好得多）。插入符号浏览错误把我逼疯了！对我来说，Firefox 已经成为千刀万剐的死神。我发现在我们越来越多的错误报告中，FF 是领先的浏览器。我已准备好进行更改，感谢下面的回答，我很高兴重新使用 Chrome。

标签： css plugins google-chrome safari firebug

【解决方案1】：

谢谢你，我找到了！

Chrome 的Live Stylesheets extension 正是您所寻找的。安装后请务必重启 Chrome 才能使用。

【讨论】：

未来的读者，请注意，使用 chrome 动态编辑 css 不再需要扩展。
@Mahn 没有嵌入样式表。
@Knu 您可以在开发人员工具的资源选项卡中编辑现有的 css 文件，并根据需要修改新的类和规则，它们会实时显示，不确定这是否算作为您嵌入？
@Mahn 我的意思是这种用例没有被涵盖。如果您没有外部样式表怎么办？
你到底为什么要在没有一个基本的起始 css 文件的情况下进行样式表编辑？

【解决方案2】：

您也可以在 Chrome DevTools 中编辑外部样式表（从 Chrome 15 左右开始）。只需双击资源面板中的样式表内容（或单击下面的“编辑”按钮），编辑，Ctrl-S 提交新修订，Esc 取消编辑。它会在您键入时更新您的页面！

【讨论】：

【解决方案3】：

您可以直接在 Chrome 上编辑您的 CSS 文件，而无需依赖任何扩展程序。

方法如下：Edit CSS files on the fly using Chrome DevTools

另一种访问方式：

右击页面，选择检查
在 DevTools 上，点击“Sources”
在“网络”窗格中找到 css 并单击它
更改 css 并保存（按 ctrl+s）

【讨论】：