Auto-saving CSS And JavaScript Changes Locally From The Chrome Developer Tools

[vimeo clip_id="33765496" width="535" height="301" title="1" byline="0" portrait="1"]

Today we're going to take a look at how you can greatly simplify how you locally develop for the web.We all have our own workflow when it comes to working on the front-end, but there are some common steps we almost all use:

• Experiment with changes to styles, scripts or markup using some web developer tools
• Go back to a text editor to apply those changes and save them
• Refresh the browser to ensure our changes have been saved
• Continue debugging

Whilst this workflow works fine, it can be made a lot easier thanks to a new extension for Google Chrome called the Chrome DevTools Autosave (by Nikita Vasilyev).

Chrome DevTools Autosave allows you to make live changes to local CSS and JavaScript files directly from inside the Chrome Developer Tools. Happy with that border-radius you've just tweaked in the browser? Satisfied with that minor JS fix you just tried out? With Autosave, changes you make inside the browser are automatically saved to their corresponding local files. 

This removes the need to constantly switch back and forth between a text-editor and your browser to make such changes and can be a real time-saver.  For all the details on what Autosave is capable of, check out the screencast I've recorded above.

How does it work?

Locally saving to files from Autosave is possible thanks to the onResourceContentCommitted event in Chrome 15+, which fires whenever changes are made to CSS and JavaScript for a page. For those interested, usage of the event itself looks a little like this:

chrome.experimental.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(event) {
    //event.url
    //event.type // 'script', 'stylesheet' or 'document' (happens when you add new CSS rule)
    event.getContent(function(content) {
        //content - all the content of updated file as a string
    });
});

The extension itself relies on a local node server running (which we'll discuss shortly). Changes made from within the Chrome Developer Tools are pushed to the server, which then resolves the local URLs of these files and overwrites the old ones with the new ones.

Note: For those with an earlier version of Chrome, I've been happily using Autosave with the Chrome Canary builds which you can grab from here.

Getting Setup

The installation process for Chrome DevTools Autosave will probably take less than 3-5 minutes.  Assuming you have access to or have installed Chrome 15+, the two setup steps are as follows:

Installing The Extension

• Open chrome://flags/ and enable Experimental Extension APIs (it won't work without this!)
• Restart your browser
• Download the extension and install it

Installing The Server

Autosave uses a local node server to save files. To install, simply complete the following steps:

1. Install Node.js if you don't already have it.
2. Run npm install -g autosave in a terminal/console.

Usage

Run node chrome-devtools-autosave-server/index.js from the command-line and then simply open up a local page you wish to edit. As long as you're accessing it using the file:// scheme, you should be able to easily make changes from inside the Chrome Developer Tools and have them instantly saved to the local CSS or JavaScript copies of those files. It's as simple as that!.

Pro-tips

• Whenever Autosave updates a local file, a 'Saved a <filetype> to <filename>' notification will be output at the console. You don't need to keep a constant watch for this, but if you'd prefer to avoid refreshing to see if changes have been saved for sure, it's certainly an alternative.
• Not only does Autosave support what I demonstrated in the screencast, but it can also let you do the following:
  • Adding comments like /*hello world*/
  • Editing multiple-properties at the same time. e.g if you wanted to to add a value for the background-image then add an override for that value if the browser supports CSS3 gradients (the old progressive enhancement trick), this is also supported:  

    background-image: url(some_gradient.png);
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.03, #6E9577), color-stop(0.52, #8FB39B))

  • Update existing JavaScript functions without the need to reload the page at all. Definitely useful.
• One trick I didn't see documented was this: although your changes may be made to local files instantly, if you go back to the Resources tab after making a change and click on the drop-down arrow next to any modified stylesheets or scripts, you can get a version history of what's you've updated (as long as you haven't refreshed). This isn't specific to this extension, but can come in useful if you accidentally wipe out a bunch of things you'd like to revert back to.

Conclusions

And that's it. I personally found Autosave very useful for working on smaller projects and it does do everything it says on the tin.

If you choose to use it, just keep in mind that although we're typically used to using the developer tools for debugging or experimentation, removing whole rules in your styles (even if just to try something out) will result in them being removed from the local file too.

As long as you're aware of this, it's a really neat tool to have in your utility belt and I'm happy to recommend checking it out. Please help us spread the word if you find it useful.