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

Both Firefox and Chrome support this feature now, but worth to note that in some platforms if not all Chrome does not show it by default, you need to enable the "Changes" view to see it (in my Kubuntu Linux 20.04 it wasn't by default), here is how you can enable it: go to the "Customize and Control DevTools" button in the Developer Tools bar > "More tools" > "Changes", then the tab will appear at the button:

In Firefox there is no need to enable it, but if you come from the Chrom* world may be hard to find it. Just check the last section in the right at the "Inspector" tab:

Answer 2

In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css

Answer 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.

Answer 4

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 5

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:

Answer 6

If you're using the Firefox stock dev tools you can edit the css directly in the tools dialog - click the CSS viewport button (that's the button at the top with the {} symbol) and edit your css directly. It will update in realtime in the browser and when you're done just copy-paste it directly into your css file. Nice!