Saving your CSS changes in the Google Chrome inspector

June 22 2012 • 2 min read

chromecssguide

This post was published in 2012 and is kept here for reference. It may contain information that's outdated or inaccurate.

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 is also available in plain text

[Archived comments]

Jim Hohl commented November 05, 2012

Cool suggestion but I didn’t see any children on my css file: http://prntscr.com/izf8u - all those files called “css” are Google Fonts included for testing and the other style.css seems to be coming from the inspector.

Max Glenister commented December 11, 2012

It looks as if this has now been moved to the ‘Sources’ section of the Developer Tools, with a much more intuitive way to access local modifications - http://uk.omg.li/LVeE

Uri commented February 15, 2013

Hey Max,Your right they did move it to the ‘Sources’ section but how do you save the revisions. I was only able to save using the contextual menu when clicking on the actual css file using save as… but when I open up the css it stills only shows original css and not any of the changes?

Andreas Linnert commented May 07, 2013

I’m having the same problem here. The only way I found is to copy/paste every changed file… And currently I’m using Chrome 26

Max Glenister commented May 31, 2013

Apologies for the delay replying, Disqus doesn’t seem to notify me of the discussions…After you’ve made changes to your page styles, if you locate the stylesheet you’ve changed in the ‘sources’ tab, and right click on the filename or in the source code, you can hit ‘save as’.This worked for me, and reflects the changed styles. Hope that helps!

Max Glenister commented May 31, 2013

Hi Andreas, see my reply to Uri above – apologies for the delay!

Nirav Mehta commented March 04, 2014

The way I got this to work is to click on the CSS file name (appears above the name of class / element you are changing in the Styles tab inspector). This opens up the “changed” CSS. You can save it from here now.HTH.

Samuel Stroh commented April 06, 2014

I just have to thank yo men, thankx a llot, that’s why i love Internet, there’s allways an answere to what im looking for and free :D

Max Glenister