Export CSS changes from inspector (webkit, firebug, etc)

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

Answer 1

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 2

In Chrome there is also the Changes tab in the console drawer that displays all the modifications of CSS. It's not an export, but at least it is very convenient to quickly grasp what has changed.