In the process of rapid prototyping and trying out new CSS styles I often find myself making changes to styles within the inspector in Google Chrome. This works quite well, but I’ve always had a process like the following:
- Try some CSS changes in the inspector
- Copy the new CSS styles (or even type them!) in to my local stylesheet
- Refresh the page, or open the page in a new tab and compare the CSS styles
- Repeat until correct
Today I realised that the inspector in Google Chrome saves states of your CSS edits as you make them, so you can revert to an earlier state, and even export the modified stylesheet from a given state.
It turns out this has been available in Webkit for nearly 18 months! You can read some more information about it over on Surfin’ Safari or check out my primer below.
A quick primer on how to export CSS changes from the inspector
Make your changes
Click the ‘Sources’ tab in the inspector
Find the CSS file that you made changes to (notice it now has an asterisk next to it)
Right click in the file, and choose “Local modifications…” You can now see a list of the changes you’ve made
Right click in the file again, and choose “Save as…”
This post was written way back in 2012. There's a chance that it's no-longer correct, or it has been superseded by a newer post. I commend you for making it this far through my archive! I made some updates to this post on 13 March 2013. You can look at the edit history on GitHub.
Take a look in the Archive to see if I've written a newer post on the subject.