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...

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

Comments

Submitted by Alex on Tue, 2012-03-27 17:02

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

Submitted by Simon Rogers on Tue, 2012-03-27 17:21

Or you can just install the live_css module....

http://drupal.org/project/live_css

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.

Submitted by Tim on Tue, 2012-03-27 19:03

Never heard of this module before but will try it out to check whay works best, thanks for a tip!

Submitted by Tim on Tue, 2012-03-27 19:18

Well I checked the http://drupal.org/project/live_css module and what can I say - it works different, it just shows you css file contents and lets you edit them in a sidebar in the browser. You don't see any changes happening live (in dom) like in case of true live editing with Chrome DevTools. The cool thing which Chrome DevTools Autosave lets you do is live inspection of the code, live tweaking (so you see CSS tweaking results right away) and auto-saving. In my opinion, it is worth to do all the setup I described in the post, it makes CSS life much much more easier.

Submitted by Nexii Malthus on Tue, 2012-03-27 21:05

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.

Submitted by Guy Bedford on Tue, 2012-03-27 21:28

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.

Submitted by Chris Pomeroy on Tue, 2012-03-27 22:09

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

Submitted by Tim on Tue, 2012-03-27 23:05

Yes you're right, adding styles isn't comfortable through the browser, I'm using this setup to effectivelly tweak rules live and add properties to already existing css rules. This setup is very helful when you need to create some pixel-perfect theming. Of course I don't leave my IDE closed, but now, I use it much more rarely to just add some new style rules.

Submitted by Mark Muhleder on Wed, 2012-03-28 00:12

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.

Submitted by Tim on Wed, 2012-03-28 00:42

Submit this feature in plugin's issue queue. I made a bat file and saved it on the desktop, now to run autosave I just click on it and voila...

Submitted by chefnelone on Wed, 2012-03-28 00:18

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/simplementeweb.com/sites/all/themes/omega_subtheme/css'
}];

Submitted by Tim on Wed, 2012-03-28 00:39

chefnelone, to: should point to your localhost webdir root, in your case, I guess, it is: /Applications/MAMP/htdocs so try the following:

exports.routes = [{
from: /^http:\/\/localhost\//,
to: '/Applications/MAMP/htdocs'
}];

Submitted by chefnelone on Wed, 2012-03-28 09:58

Thanks for answer me. That's is what I did first, but not working.
After I change a style should I do something to get it saved?

Submitted by Tim on Wed, 2012-03-28 12:05

No, it saves automatically, what's url of your local site? Is it 'localhost'?

Submitted by Lucas on Wed, 2012-03-28 03:49

A very good alternative is to use Firefile with Firefox : https://addons.mozilla.org/firefox/addon/firefile/

Submitted by sirkitree on Sat, 2012-03-31 02:12

Also found that the routes can be an array, so just do something like this in routes.js

exports.routes = [{
  from: new RegExp('^<a href="http://local">http://local</a>\.lullabot\.com/'),
  to: '/Users/sirkitree/Sites/lullabot.com/docroot/'
},
{
  from: /^http:\/\/localhost\:8080\//,
  to: '/Users/sirkitree/github/irc/public/'
}];

And add in your address within the browser extension options.

Submitted by gg4u on Sun, 2012-04-01 17:38

oh mine, today it was almost working, instead I could not set proper config yet.
now, I got 127.0.0.1:9104 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/'}];

Submitted by azul on Tue, 2012-06-19 04:41

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

Submitted by Joshua Stewardson on Sat, 2012-07-21 23:27

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!

Add new comment

You are here