如何像在 Firebug for Firefox 中一样在 Chrome 中编辑 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3783186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I edit CSS in Chrome like in Firebug for Firefox?
提问by Tom
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 扩展程序可以让我以这种方式更改样式表？
回答by pax
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）中，您不需要任何外部加载项。右键单击页面中的任意位置，选择检查元素，然后在显示的窗口中单击资源选项卡，然后在左侧面板中选择要编辑的样式表。要开始编辑，您需要首先双击 css 文本。
回答by loislo
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 文件。
回答by Jose Browne
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 是最接近的。
回答by Stan Rogers
Have you tried the Web Developer Toolbar extension's CSS->Edit CSS tool?
您是否尝试过 Web Developer Toolbar 扩展的 CSS->Edit CSS 工具？
回答by Drew
https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
Web Developer Toolbar for Chrome > CSS > Edit CSS
适用于 Chrome 的 Web 开发人员工具栏 > CSS > 编辑 CSS
回答by Tomasz Karbownicki
You are looking for this - Live Stylesheets
您正在寻找这个 -实时样式表
回答by Jeremy Baker
I wrote the LiveCSSEditor4 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. :)
我今天仍在使用它，但尚未找到更好的解决方案。它也可能对你有用。:)
回答by Jason
there's a semi-working firebug extensionbut it's not exactly perfect yet.
有一个半工作的萤火虫扩展，但它还不完全完美。
回答by slebetman
User Firebug Lite. It's also available as an extension to Chrome.
用户Firebug 精简版。它也可以作为 Chrome 的扩展程序使用。
