Saving your CSS changes in the Google Chrome inspector

• 1 min read
chromecssguide
This post was published in 2012 and is kept here for reference. It may contain information that's outdated or inaccurate. All external links and references have been updated to point to archived versions on archive.org where possible.

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

[Comments]

Want to comment? You can do so via Github.
Comments via Github are currently closed.

[Webmentions]

Want to reply? I've hooked up Webmentions, so give it a go!