“I have used Mike repeatedly over almost a decade. He produces high quality, creative work at great value and has produced clear, user-friendly websites for every business venture that I have been involved in. He works quickly and the only time he doesn’t do what you ask is when he comes up with a better idea than yours! I can wholeheartedly recommend Mike’s work.”

— Mike Rigby (The Original Carbon Company)

Modern browsers now include a set of development tools allowing you to inspect various aspects of your HTML, CSS and scripting from within the browser itself. Nikita Vasilyev has now produced an extension for Chrome which allows changes to CSS and JS, made in the Chrome dev tools environment, to be automatically saved back into the source files. Excellent.

Installation is straightforward, if a little long-winded. Just follow the instructions. Addy Osmani’s produced a great walkthrough video and accompanying article. There are a few gotchas that might catch out the unwary or the uninitiated though.

  1. Don’t forget to click the ‘Install the Server’ link at the bottomof the ‘How To Install’ section.
  2. If you get errors about npm not being found during the server install (on Windows) then reboot your machine and try again.
  3. Once the server’s installed you need to run ‘autosave’ at a command prompt and this needs to be running whenever you want to autosave from the dev tools. You might want to start this automatically at boot up.
  4. If you’ve got a message in the command prompt after running ‘autosave’ saying something like Dev Tools Autosave 0.3.1 is listening on http://127.0.0.1:9104 then you should be all set.
  5. Note that the extension won’t save changes made to HTML files. So if you’ve got any inline CSS, changes made to it won’t be saved. Your CSS needs to be in an external .css file.
  6. If it seems to be setup OK but it’s still not saving, make sure you’re running the latest version of the extension. Go to chrome://extensions in your browser and check DevTools autosave is running at least version 1.1.1
  7. If you’re using SASS/SCSS/LESS for your CSS then obviously any changes you make to the CSS aren’t going to get ported back into the .sass/.scss/.less files.
  8. Finally, if you’re making quick experimental changes in the browser then keep in the back of your mind that you’re working on your CSS files and you’re busy overwriting their contents. Those quick ‘look-see’ changes you’re making are now persistent so it’s easy to lose stuff if you get too enthusiastic.