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.
- Don’t forget to click the ‘Install the Server’ link at the bottomof the ‘How To Install’ section.
- If you get errors about
npmnot being found during the server install (on Windows) then reboot your machine and try again.
- 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.
- 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:9104then you should be all set.
- 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
- 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://extensionsin your browser and check DevTools autosave is running at least version 1.1.1
- 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
- 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.