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

Question

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 1

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.

Solution 2

You can edit external stylesheets in Chrome DevTools, too (since Chrome 15 or so). Just double-click the stylesheet contents in the Resources panel (or click the "Edit" button below), edit, Ctrl-S to commit a new revision, Esc to cancel editing. And it updates your page as you type!

Comments

[Mahn]

Readers of the future, note that an extension is not anymore necessary to edit css on the fly with chrome.

[Knu]

@Mahn not embedded style sheets.

[Mahn]

@Knu you can just edit the existing css files in the resources tab of the developer tools and hack away new classes and rules as you like and they show up in real time, not sure if that counts as embedded for you?

[Knu]

@Mahn my point is that this kind of use cases isn't covered. What if you don't have external style sheets?

[Mahn]

Why on the earth would you do stylesheet editing without at a very least one basic starting css file?

[Mahn]

Besides, the original question was specifically asking for: 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 — and this is something chrome can indeed do now out of the box.