Chrome DevTools Autosave

20 seconds Screencast · 5 minutes intro by Addy Osmani

Chrome DevTools let you edit CSS and JavaScript. It even allows you to save it. You know it, right? I think, it’s annoying to "Save as..." every time you want to save. Chrome DevTools Autosave saves the files after every change for you!

How to Install

Chrome DevTools Autosave consists of a Chrome extension and a server. The extension pushes changed files to the server. The server resolves URL of these files and overwrites the old ones with the new ones.

Install the Extension

Install the Server

How to Use

$ autosave
DevTools Autosave is listening on http://127.0.0.1:9104

Open example/index.html locally (using file:// scheme).
Edit some CSS and JS.
That’s it. Files have been saved.

How Does It Work?

Google Chrome has an onResourceContentCommitted event that fires when you edit CSS and JavaScript.

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
    })
})

Nice, isn’t it?

More on Autosave protocol.

FAQ

I’m developing on http://localhost/ (or http://you-name-it/) instead of file://. Can I make Autosave work?

Sure, just add a new route to the extension’s options.

Similar Stuff

CSS-X-Fire is a similar tool for Firebug and IntelliJ IDEA