Surf the Dream A discourse of links and articles from Justin Avery

Saving changes to CSS in Development Tools (chrome & firefox)

A little known fact is that you can save the CSS changes you make in your development tools. I wish I knew this a few years ago.

From the google blog…

Upon an external style sheet rule modification, the respective resource text is updated in the Resources panel, and the revision history is stored for such style sheet resources until the DevTools window is closed.
Activate the Resources panel, find tutorial.css in the resource tree. Note that the tree node is expandable. Click the arrow next to the node title, and you will see all the resource modifications that you have made above.
Select any revision to see its differences from the original stylesheet resource, highlighted line-wise.

You can drag and drop a stylesheet revision node into most text editors to export the revision content.

https://developers.google.com/chrome-developer-tools/docs/elements-styles#persist

If you’re not a fan of Chrome and are using Firebug with Firefox instead you can use the CSS Updater or track the changes using FireDiff.

These tools are extremely handy when you’re working on any site, and I always use them now if I’m responsively retrofitting a site.

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as justinavery.me (now my resume) and JaveryDesign.com (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter