在Chrome或Safari中完整的动态样式表编辑

Question

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

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

1. 列出包含所引用的当前样式表的列表
2. 选择您要编辑的那个，然后点击编辑按钮
3. 查看样式表中的所有代码
4. 立即进行更改并立即反映在页面上

构建这样做的东西真的很难吗？我认为一定是，b / c为什么两个浏览器的开发者社区会完全忽略它呢？如果有什么东西现在提供这种能力，我很乐意听到它;否则，也许有人会站出来为Chrome或Safari开发它。似乎开发CSS编辑应用程序的人将会全身心投入。

Answer 1

感谢你，我找到了它！

Chrome正在寻找Live Stylesheets extension。请务必在安装后重新启动Chrome以使用它。

Answer 2

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

Answer 3

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

以下是：Edit CSS files on the fly using Chrome DevTools

访问它的另一种方式：

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