6

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?

2 Answers 2

7

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! :)

10
  • 3
    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 Jul 21, 2012 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. Jul 21, 2012 at 16:33
  • 1
    You don't need to copy everything over. Just summarize the concept so that your answer can stand without having to follow the link. Jul 21, 2012 at 16:42
  • 1
    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, 2012 at 16:56
  • 3
    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: youtube.com/… this is really interesting, there are also other new features like CSS autocomplete and CSS revision. Jul 23, 2012 at 7:20
1

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.

You must log in to answer this question.

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