Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 839
bjork24 Avatar asked Jan 24 '11 19:01

bjork24


People also ask

How do you edit a style sheet?

You can edit or remove a stylesheet that's already attached by hovering over it and clicking Edit to make changes to it or the X to remove it. After adding a stylesheet, click Publish changes in the upper right-hand corner to apply your changes to the live pages(s) using the template.

How do I save and edit CSS in Chrome?

To save your changes, press CTRL + S when editing the file.


2 Answers

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.

like image 66
Knu Avatar answered Nov 09 '22 03:11

Knu


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!

like image 33
Alexander Pavlov Avatar answered Nov 09 '22 02:11

Alexander Pavlov