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

Open chrome://flags/ and enable Experimental Extension APIs
Restart the browser
Install Chrome DevTools Autosave

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 a 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?

Chrome DevTools Autosave sends the new content of the edited file to the server using POST method. There are couple custom headers:
X-URL: URL of edited CSS or JavaScript
X-Type: 'script', 'stylesheet' or 'document' (happens when you add new CSS rule)

The server finds file location by its URL. Out of the box it works only with file:// scheme, i.e. file:///tmp/index.html → /tmp/index.html.

FAQ

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

Yes, you can!

Similar Stuff

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