Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

One of things I love of modern browsers is how you can edit the css and get to see the results in real time. Often when designing frontend elements, I find myself adjusting many css properties directly in chrome, and only when I'm happy with the result I copy back all the changes to my original css files. I'm not sure how common this practice is, but it works for me.

The question: Is there any way, perhaps an extension, that can compare the original page css in google chrome to the edited one and output all the changes? This may sound lazy, but it can make sense: if you've been editing CSS for about an hour on chrome, tracking back all the changes accross all divs and classes can be time consuming, and that's where a tool to output the changes immediately would save a lot of time.

Edit: Or perhaps this can be done with some javascript wizardry in the console?

share|improve this question
up vote 7 down vote accepted

You may be interested in this neat functionality built into Google Chrome:

Change CSS and SAVE on local file system using Chrome Developer Tools

enter image description here

I tried it now and it works great highlighting the changed lines. Just click Save and you're done! :)

share|improve this answer
Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Thanks – Oliver Salzburg Jul 21 '12 at 16:29
@OliverSalzburg I think there's no need here... If I'd include the essential parts I'd copy the post. The post is full of pictures that highlight the entire process. – Leniel Macaferi Jul 21 '12 at 16:33
You don't need to copy everything over. Just summarize the concept so that your answer can stand without having to follow the link. – Oliver Salzburg Jul 21 '12 at 16:42
Terrific, it must have been a newly added feature to chrome because I didn't notice the changes being highlighted in the resources page of chrome before but they indeed show up now! Thank a lot! – Mahn Jul 21 '12 at 16:56
Hello, I'm the author of the blog article. I've discovered the "save as" option watching a Google IO 2011 presentation, here is the link:… this is really interesting, there are also other new features like CSS autocomplete and CSS revision. – Matteo Conta Jul 23 '12 at 7:20

Chrome now does this automatically. I'm using v33 but this has been there for a while now.

  1. Simply make a change to the css file and save it from the Sources panel.
  2. All subsequent changes will be saved automatically.

Note that if you are using Workspaces, the file in the file system itself will be seen as modified in the sources panel instead of multiple versions of the same file.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .