Making Drupal Themer’s Life Easier: Autosaving CSS Changes From The Chrome Browser

Theming in overall (not only in Drupal) can be a very painful process: themer looks at the .psd, then switches to his editor of choice, types some css rules, hits save, switches to a browser, hits refresh button and finally, looks at results. So much moves just to change only one css rule and check if it works! But what if this could be done more quickly, what if you could change css directly in your browser and have these changes automatically saved directly to your css file? Well, I’m in a rush to tell you great news: this is possible and today I will show you how to create a little setup which will make your dreams come true.

Ingredients of the system

1) Google Chrome Browser – it has great Developer panel (press F12) which lets you see the Dom and tweak CSS settings (and do many more other things), but it doesn’t save changes you made to css file, after you refresh the page all your changes are gone…
2) Chrome DevTools Autosave will save css and js after every change you make in a Chrome developer panel. Neat!

How to install?

Chrome DevTools Autosave has own installation intructions here: https://github.com/NV/chrome-devtools-autosave but I had several problems following these instructions, so I decided to write my own, more clear installation how to:

1) Install Chrome DevTools Autosave Extension

1.1 Make sure you have latest version of Google Chrome installed (https://www.google.com/chrome)
1.2 – Type chrome://flags/ in the Chrome address bar and enable Experimental Extension APIs
1.3 – Restart Google Chrome
1.4 – Install Chrome DevTools Autosave (open this link in Chrome: http://userscripts.ru/js/chrome-devtools-autosave/latest.crx)
So now we have the extension installed, but this is not the end. We need to install a node.js server on your computer which will work as a bridge between Chrome and your filesystem letting changes made in Chrome to be saved to your local .css/.js files.

2) Install Autosave Server

2.1 – Install node.js (http://nodejs.org/) Just follow nodejs.org instruction to install it on your machine. In most cases this is a one-click installation.
2.2 – Open a terminal (Terminal.app on Mac OS X or cmd.exe on Windows) and type: npm install -g autosave (if you’re under Mac OS or Linux, add sudo to the beginning of the command) – this should create an autosave server in your system.
2.3 – Run the server. Just type autosave in your command line.

3) Tune the extension

3.1 Open DevTools Autosave options page in Chrome (chrome://settings/extensions and then find your extension in the list)
3.2 By default, DevTools Autosave saves changes only to urls which start with file:// (local files), but I’m sure you want it to save css/js files located in your localhost (for example), in this case, your configuration settings should look like this:

3.3 Create file in a root of your user directory (in Windows it will look like C:\Users\UserName) called routes.js and put the following contents:

exports.routes = [{
from: /^http:\/\/localhost\//,
to: 'D:/wamp/www/'
}];

where you can change to: to your web server’s document path. Moreover, you can add as much configuration to this file as you want, it’s up to you. More info on configurations can be found here: https://github.com/NV/chrome-devtools-autosave-server/blob/master/README.mdown

3.4 After doing all these preparations, open your command line and type:
autosave --config routes.js
it will launch autosave server which will save every value you changed in a Chrome DevTools to the appropriate css file.

NOTES:
a) it can harm your css files so be sure to back them up
b) if something doesn’t work, check if you made configurations outlined in 3.2 and 3.3 right. If you’re sure that everything is correct, try to restart your browser.
c) While tweaking css, make sure you have Drupal css aggregation off, otherwise it will save changes to temporary aggregated css files.

My workflow

For me this setup is God’s bless. I cut my theme development times and css isn’t a pain for me, I just open Drupal page in a browser, change css live and see the results live, and behind the scenes, all my changes are being recorded to the css file. Cool!
So when I start working on a project I do the following:

1) Launch autosave server with autosave --config routes.js
2) Open Drupal website and edit css/js files!
3) Done!

Project notes

Chrome DevTools Autosave was created by Nikita Vasilyev (from Russia with love) and in case you have bug reports please report them on a project’s issue page: https://github.com/NV/chrome-devtools-autosave/issues