Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 462
hookedonwinter Avatar asked Jul 28 '10 16:07

hookedonwinter


People also ask

How do I save changes in inspect element in CSS?

Choose your local folder where the CSS files you're editing are located and now your files in the developer tools are associated with your local files (you'll see a little green dot). Now, every time you edit the source code you can click “Command + S” and save your code changes.

How do I save changes to CSS?

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


2 Answers

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:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

like image 85
Nicholas Zographos Avatar answered Sep 23 '22 02:09

Nicholas Zographos


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.

like image 44
Chris MacDonald Avatar answered Sep 22 '22 02:09

Chris MacDonald