如何在Firebug for Firefox中编辑Chrome中的CSS？

I've been editing CSS using Firebug in Firefox, but recently noticed that Chrome is rendering my pages much quicker (with scrolling, interactive elements etc) and wanted to switch to it.

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

I found Chrome shows the computed CSS and what attributes are overruled in the stack and I can alter them one-by-one but what I liked about Firebug was that I could just edit the entire stylesheet in a real-time text editor. Is this same feature somewhere in the Chrome developer panel, or is there a Chrome extension that lets me alter the stylesheets this way?

我发现Chrome显示了计算出的CSS以及在堆栈中推翻了哪些属性，我可以逐个改变它们，但我喜欢Firebug的是我可以在实时文本编辑器中编辑整个样式表。这是Chrome浏览器面板中的某个功能，还是Chrome扩展程序可以让我以这种方式更改样式表？

10 个解决方案

#1

Try StyleBot. It can also save edited CSS.

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

#2

In current versions of Chrome (I'm running 16) you don't need any external add-ons. Right click anywhere in your page, choose inspect element, then in the window that shows up click the Resources tab, then in the left panel select the stylesheet you want to edit. To begin editing you need to first double click, over the css text.

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

#3

You can edit any property or create a new property by double click on an entry or empty space in Elements panel's styles pane. There is no way to edit entire css file just as text at the moment.

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

#4

I use live.js! As you edit your css file it shows you the results realtime in your browser without having to refresh. http://livejs.com/

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

I've spend countless hours testing almost every Chome extension i could find (including stylebot) to mimic the live CSS editing of Firebug in Firefox. None to date have that same workflow. Live.js is the closest.

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

#5

Have you tried the Web Developer Toolbar extension's CSS->Edit CSS tool?

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

#6

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

Web Developer Toolbar for Chrome > CSS > Edit CSS

适用于Chrome的Web开发人员工具栏> CSS>编辑CSS

#7

there's a semi-working firebug extension but it's not exactly perfect yet.

有一个半工作的firebug延伸，但它还不完美。

#8

User Firebug Lite. It's also available as an extension to Chrome.

用户Firebug Lite。它也可以作为Chrome的扩展。

#9

You are looking for this - Live Stylesheets

您正在寻找这个 - Live Stylesheets

#10

I wrote the LiveCSSEditor 4 years ago for exactly this reason. FireBug in Firefox would let me free-hand write CSS into the page, but nothing else in Chrome would.

正是出于这个原因，我4年前写了LiveCSSEditor。 Firefox中的FireBug让我可以随心所欲地将CSS写入页面，但Chrome中没有任何其他功能。

I still use it today and have yet to find a better solution. It may work for you as well. :)

我今天仍然使用它，还没有找到更好的解决方案。它也可能对你有用。 :)

#1