如何像在 Firebug for Firefox 中一样在 Chrome 中编辑 CSS？答案

【问题标题】：How do I edit CSS in Chrome like in Firebug for Firefox?如何像在 Firebug for Firefox 中一样在 Chrome 中编辑 CSS？
【发布时间】：2014-03-04 06:58:29
【问题描述】：

我一直在 Firefox 中使用 Firebug 编辑 CSS，但最近注意到 Chrome 正在更快地呈现我的页面（使用滚动、交互元素等）并且想要切换到它。

我发现 Chrome 显示了计算出的 CSS 以及堆栈中哪些属性被否决了，我可以逐个更改它们，但我喜欢 Firebug 的是我可以在实时文本编辑器中编辑整个样式表. Chrome 开发人员面板中是否有相同的功能，或者是否有一个 Chrome 扩展程序可以让我以这种方式更改样式表？

【问题讨论】：

欢迎广大开发者在 chrome 中等待这个功能，这样我们就可以永久切换到 chrome。

标签： css google-chrome

【解决方案1】：

在当前版本的 Chrome（我正在运行 16）中，您不需要任何外部插件。右键单击页面中的任意位置，选择inspect element，然后在显示的窗口中单击Resources 选项卡，然后在左侧面板中选择要编辑的样式表。要开始编辑，您需要先双击 CSS 文本。

【讨论】：

这可行，但很糟糕。如果您不小心离开了页面，您的所有编辑都会丢失，并且在我尝试编辑的网站上，它非常很慢。就像 300 波特一样慢。
确实，如果您关闭页面，所有编辑都会丢失 - 在我习惯之前发生过几次。我从来没有遇到过任何性能问题，我正在使用一台 3 岁的普通机器。但是，如果我能开箱即用地完成这项工作，我喜欢不必启动任何第 3 方附加组件。
我发现速度与我的 css 中有 base64 编码的 png 的事实有关。由于某种原因，每一次按键都会重新请求该资源。所以 chrome 中的“资源”列表会变得巨大。不知道那里发生了什么。但是在没有 base64 编码的 png 的情况下编辑其他 css 文件效果很好。
你不能直接编辑文件，这很尴尬。

【解决方案2】：

试试StyleBot。它还可以保存编辑后的 CSS。

【讨论】：

真的很有帮助。我尝试了几个 chrome 扩展，我也使用了这个。相信我，这是我发现的在 chrome 中编辑样式表的最佳扩展。所有其他扩展都不允许您编辑本地样式表。此外，著名的 FireBug 是 chrome 的可怕扩展。
我似乎无法让它在 mac 下工作......有人知道为什么吗？
您可以在 StyleBot 的哪个位置看到整个样式表以添加/编辑规则？

【解决方案3】：

您可以通过双击元素面板样式窗格中的条目或空白区域来编辑任何属性或创建新属性。目前无法像文本一样编辑整个 css 文件。

【讨论】：

【解决方案4】：

我使用 live.js！当您编辑您的 css 文件时，它会在您的浏览器中实时显示结果，而无需刷新。 http://livejs.com/

我花费了无数个小时来测试我能找到的几乎所有 Chome 扩展（包括 stylebot），以模仿 Firefox 中 Firebug 的实时 CSS 编辑。迄今为止，没有人拥有相同的工作流程。 Live.js 是最接近的。

【讨论】：

【解决方案5】：

您是否尝试过 Web Developer Toolbar 扩展的 CSS->Edit CSS 工具？

【讨论】：

这是我最喜欢的创作风格的方式。我将 WDT 的“编辑 CSS”功能与 Firebug 结合使用（查看标记），这是最好的。我唯一的不满是用于 Chrome 的 WDT 是一个 sub 1.0 版本并且有很多错误，所以我不得不在 Firefox 中进行创作。此外，如果您使用的是 CSS 预处理器，那么此时您确实无法充分利用浏览器内的创作/编辑工具。实际上，我昨天刚刚在博客上讨论了这个问题：blog.joelglovier.com/post/30395741197/…

【解决方案6】：

https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm

Chrome 的 Web 开发者工具栏 > CSS > 编辑 CSS

【讨论】：

【解决方案7】：

有一个半工作的firebug extension，但还不完全完美。

【讨论】：

【解决方案8】：

用户Firebug Lite。它还可以作为 Chrome 的扩展程序使用。

【讨论】：

我试过 Firebug Lite，它没有实时的 CSS 文本编辑器，并且显示了一大堆样式表中不存在的计算样式。
@Jason：当我开始输入您的答案时，您的答案并不存在。但在我按下提交按钮之前，我决定仔细检查 URL：-P
@Tom：我刚刚尝试了 Firebug Lite，发现我可以在 Chrome 中实时修改 CSS - 就像在 Firefox 中一样。你确定它不起作用？
它可以实时更改样式，但它没有像 Firebug for Firefox 这样的文本编辑器中的样式表。在每个字段中输入每个值是一件令人头疼的事情。
Dude Firebug lite 目前处于起步阶段。他们仍在开发它。当前版本不允许编辑本地样式表。

【解决方案9】：

你正在寻找这个 - Live Stylesheets

【讨论】：

【解决方案10】：

正是出于这个原因，我在 4 年前写了LiveCSSEditor。 Firefox 中的 FireBug 可以让我徒手将 CSS 写入页面，但 Chrome 中没有其他功能。

我今天仍在使用它，但尚未找到更好的解决方案。它也可能对您有用。 :)

【讨论】：