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

Solution 1:

I have found the answer to this, at least as of Chrome v14.

While in the Elements section, just click on the "filename:linenumber" link next to the CSS rules. The CSS file that shows up will contain all of the modifications.

This place exactly:

Solution 2:

In Chrome, you can right-click a CSS file in the Sources tab and click "Local Modifications"

This shows you all of your local changes. Each revision is timestamped and you can rollback to any previous revision.

See the Live Editing and Revision History section of this tutorial.

Solution 3:

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.

Solution 4:

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.