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

27 Mar · by Tim Kamanin · 4 min read

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: 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 (
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:
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 ( Just follow instruction to install it on your machine. In most cases this is a one-click installation.
2.2 - Open a terminal ( 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: 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.

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:


Required for comment verification

Joshua Stewardson

Super awesome! This speeds my life up so much! Looks like the configuration can all be done in-browser now too on the Autosave extension's options page. No need to mess around with routes.js anymore!

Reply · 5 years, 8 months ago

Hi i got this message on the CMD "Cannot save. Chrome DevTools Autosave 0.x doesn't work with Autosave Server 1.x." I've install latest version that you mention in this post

Reply · 5 years, 8 months ago

oh mine, today it was almost working, instead I could not set proper config yet. now, I got returning this message X-URL header is missing despite console says it is working cannot save any change.. :( please help! my routes.js in Users/name/ exports.routes = [{ from: new RegExp('^http://localhost/~name/site/'), to: '/Users/name/Sites/site/'}];

Reply · 5 years, 8 months ago

Also found that the routes can be an array, so just do something like this in routes.js exports.routes = [{ from: new RegExp('^http://local\.lullabot\.com/'), to: '/Users/sirkitree/Sites/' }, { from: /^http:\/\/localhost\:8080\//, to: '/Users/sirkitree/github/irc/public/' }]; And add in your address within the browser extension options.

Reply · 5 years, 8 months ago

A very good alternative is to use Firefile with Firefox :

Reply · 5 years, 8 months ago

I follow this step by step but I can't get it working. I'm very excited to get it working since I spend half of my day working with styles. I guess my mistake is in routes.js. I have Mamp installed in Mac Snow leopard. exports.routes = [{ from: /^http:\/\/localhost\//, to: '/Applications/MAMP/htdocs/' }];

Reply · 5 years, 8 months ago
Mark Muhleder

That is really pretty sweet. I've been using CSS X-fire for a while, but that still requires heading back to the IDE to apply changes, and can get a bit fiddly if you have some old changes which you don't want to apply. Would be cool if there was a button or shortcut in chrome to quickly enable/disable the autosave.

Reply · 5 years, 8 months ago
Chris Pomeroy

wow, so you use effectively use the browser as an editor? What are the benefits to doing it this way than using an ide or notepad and something like LiveJS? One less program running? This seems like it would be helpful with modifying existing style rules, but adding new rules may be awkward inside chrome inspector... Chris

Reply · 5 years, 8 months ago
Guy Bedford

The main feature of Live CSS is that you do see the changes live in the browser as you change the CSS and this works for the LESS editing as well. Are you sure the live changes weren't working with Live CSS? Do report an issue if it isn't working for you, and I'd be happy to look into it.

Reply · 5 years, 8 months ago
Nexii Malthus

Thanks so much for this article, this is insanely awesome stuff! It's a seriously huge implication to move CSS into live-editing with autosave like this. It upgrades the whole workflow into realtime.

Reply · 5 years, 8 months ago
Simon Rogers

Or you can just install the live_css module.... Lets you edit, see and save css in any drupal site, and works with all modern browsers. Best of all it supports LESS out of the box, or with the LESS module. Well worth a look.

Reply · 5 years, 8 months ago

Awesome, I was really excited when I heard about Dev Tools but this seems like an awful lot of work and local overhead for not that great of a payoff. I might eat my words if and when I get around to trying this though! :)

Reply · 5 years, 8 months ago