Search code examples
csspluginsgoogle-chromesafarifirebug

Full on-the-fly stylesheet editing in Chrome or Safari

I hate Firefox, I really do, but as a web developer I'm chained to it b/c of the robust set of tools that Firebug offers. Recently Chrome and Safari's inspection tools allowed users to edit full chunks structural code (in a very buggy manner), but you still can't edit full stylesheets. Usually when someone brings this up, Chrome and Safari developers say "BUT YOU CAN EDIT CSS," and that's true, to an extent. You can edit CSS property-by-property (which takes forever if you have a lot of changes) in both browsers, but there is no way to see the full computed stylesheet, make edits within it, and immediately see the results. To date, only a full install of Firebug on Firefox allows you to do this.

Has there been any momentum in either of the Chrome or Safari camps to build a plugin to match this unparalleled function? Cheap plugins that allow you to insert CSS into the page are not the answer. It's really simple:

  1. Have a list with the current stylesheets that are being referenced
  2. Choose the one you want to edit, and click an edit button
  3. See all the code in the stylesheet
  4. Make changes and see them reflected on the page immediately

Is it really that hard to build something that does this? I think it must be, b/c why else would the developer communities of two browsers completely ignore it? If there's something out there that now offers this capability, I'd love to hear it; otherwise, maybe someone will step up to the plate and develop it for either Chrome or Safari. It seems like the guys who developed the CSS Edit app would be all over this.

Solution

  • Thanks to you I found it!

    The Live Stylesheets extension for Chrome is what you are looking for. Be sure to restart Chrome after installation to use it.