Export CSS changes from inspector (webkit, firebug

Question

When I'm working with CSS, I'll often test in a browser - say, Chrome - right click an element, click Inspect Element, and edit the CSS right there. The use of arrow keys to change things like margin and padding makes lining things up super easy.

It's not too hard to then take those changes and apply them to the CSS file, but it would be cool if I could just right click the selector in the inspector and select "export" or "copy", and have the contents available in my clipboard.

Does something like this exist?

Answer 1

My in-beta-soon product LIVEditor does this exactly.

To let you understand it easily, you can think of Firebug's inspector is embedded into your text editor.

That way you don't have to make the changes manually again in your code editor after you tweaking it using Firebug or Webkit's developer tools.

Answer 2

With Workspaces you can have your CSS saved as you type them in your inspector (in Chrome). The problem is that every change is automatically saved and there's no way to disable this feature, as pointed in http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ and Disable automatic saving of CSS changes in Chrome Developer Tools.

Answer 3

I've suggested this product on SO before (I'm not affiliated with them in any way).

http://www.skybound.ca/

Excellent product. Sounds like exactly what you're looking for and much more.

EDIT: Several other answers here have mentioned Google Chrome's ability to link to your local files (which is very very cool). Check out the other answers!

Answer 4

I built a Chrome extension that does exactly this.

It's called StyleURL - it takes whatever CSS changes you made in Chrome Inspector and outputs valid CSS as the diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Here's an example where I added "padding-bottom: 50px" to this page:

It's open-source and on GitHub too: https://github.com/Jarred-Sumner/styleurl-extension

Answer 5

To add an answer for Safari specifically — it's kind of possible.

When you edit CSS in the Styles section in the Inspector for an existing CSS file, you can hit Cmd-S to re-save the entire file with the changes. However, if you're using a meta language like Sass / preprocessor / generating your CSS with bundling etc, I don't think this really solves that problem, though it may be possible with CSS source maps.

When you edit CSS at the top of the Styles section, under Style Attribute to add inline styles (not tied to an existing CSS file), it doesn't seem possible to easily export all of those changes. For now, I'm just copying and pasting the overrides manually for each element.

The official Apple docs are a little dated but found here: Web Inspector Tutorial - Editing Code to Change Your Webpage.

Answer 6

Firediff is a Firebug add-on that tracks changes done in Firebug. It logs everything you'll do in the HTML pane (great) but also your brief use of the Web Developer Toolbar extension (not so great), say Shift-Ctrl-F to obtain a font-size information in px.

I have seen a Firebug extension in Chrome but didn't test it, I use Firediff with Firefox.