Quick Tip: On The Fly Editing With DevTools Autosave

Recently on Webdesigntuts+ we looked at Faster HTML/CSS Workflow with Chrome Developer Tools, and in today's Quick Tip we'll be getting you set up with a free plugin mentioned in that very tutorial. I promise this will seriously speed up your workflow – ready to get started?

Introducing DevTools Autosave

Today we're going to be walking through the complete setup of DevTools Autosave, but before we get started, let's take a look at what exactly this nifty Google Chrome extension does.

It's all well and good nudging a header around by a few pixels in Chrome Developer Tools, returning to your text editor, updating the CSS, saving the file and returning back to the browser for a quick refresh to make sure that everything looks great. But if you're anything like me, you'll often find yourself tweaking multiple declarations for multiple selectors in the Developer Tools, only to return to your stylesheet having lost track of exactly which rules needed changing.

As the name suggests, DevTools Autosave automatically updates your stylesheet with any and all changes that you make in Chrome Developer Tools on the fly — and if you use Developer Tools heavily, this can dramatically speed up site development. Of course you can also return to your text editor and update your stylesheet as per normal, making this a powerful and flexible addition to your workflow.

Oh, and by the way, this extension is not just for CSS and HTML… DevTools Autosave has JavaScript covered as well!

Command Prompt? Servers? Wha…?

Before we get started, let's quicky take a quick look at how DevTools Autosave may be different to other Chrome extensions that you may have used before.

Normally, installing a Chrome extension is as simple as going to the Chrome Web Store and clicking the 'Add to Chrome' button. DevTools Autosave is a bit different in the way that the extension relies on a locally installed server (in this case Node.js) to communicate the changes made in Chrome back to your local CSS, HTML and JS files.

To accomplish all of this, we need to use the Command Prompt (or Terminal window). If you've never used the Command prompt before, it's nothing to be scared of — it's dead easy to use, and I'll be walking you through every step.

Step 1: Install the Extension

To start with, head on over to the Chrome Web Store and install the extension.

After you select to add the extension to Chrome, you'll be asked to confirm the action. Once installed, a notification will pop up in the top right of your browser window to let you know that the extension is locked, loaded and running as required behind the scenes.

Step 2: Install Node.js

The next step is to head over to Node.js to download and install the latest release (at the time of writing v0.8.16).

Unpack and install to your preferred location.

Note: Node.js itself is a incredibly powerful development environment and its use is far beyond the scope of this quick tip. If you're interested in learning more about Node.js, check out Node.js for Beginners over at Nettuts+.

Step 3: Run the Server

Now that we have all of the infrastructure required to run DevTools Autosave, the next step is to run Node.js through the command prompt.

If you're using Windows like me, hit the Start button, type 'Command Prompt' in the search field and select 'Node.js Command Prompt'.

Alternatively, If you're using a Mac, navigate to your Applications Folder → Utilities → Terminal.app

At the prompt, run the following command: npm install -g autosave

You'll now see the terminal chatter away for a few moments:

Note: If your user account doesn’t have administrator permissions, you may need to add the sudo command in order to install things: sudo npm install -g autosave

Once complete, you can run DevTools Autosave.

Step 4: Run Autosave

The final step is to run the Extension itself. Run the following command at the prompt: autosave

You'll now receive a confirmation that DevTools Autosave is running locally, as follows:

And with those few quick steps, you're set up and ready to go.

Using DevTools Autosave

The beauty of DevTools Autosave (and why I prefer it to some similar apps) is that once it's running through the node.js server, everything else just works. There's no need to point the extension to local directories (unless you're running through a local server like WAMP or MAMP), and there's nothing to turn 'on' per se. Just fire up your text editor of choice, load up a .css or .js file and tweak to your heart's content in Chrome Developer Tools with all the changes saved.

DevTools Autosave has become an indespensible extension to my favorite browser, and I'm sure that you'll agree!

Will you be using DevTools Autosave? Do you prefer something else? If so, be sure to leave a comment below.

Further Resources

• Chrome DevTools Autosave on Github
• Node.js
• Faster HTML/CSS Workflow with Chrome Developer Tools on Webdesigntuts+
• Node.js for Beginners on Nettuts+
• A Designer’s Introduction to the Command Line on Webdesigntuts+