Skip to content

Auto-saving CSS and JavaScript changes from the Chrome Developer Tools

Notifications You must be signed in to change notification settings

drewcovi/chrome-devtools-autosave

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

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

About

Auto-saving CSS and JavaScript changes from the Chrome Developer Tools

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%