Auto-saving CSS and JavaScript changes from the Chrome Developer Tools
MIT License
DevTools Autosave on Google I/O 2012 Intro to DevTools Autosave version 0.x (a bit outdated)
Chrome DevTools let you edit CSS and JavaScript. It even allows you to save it. I think, its annoying to choose a folder you want to save to for every file. DevTools Autosave saves the files on every change for you!
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.
$ 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. Thats it. Files have been saved.
Google Chrome has an onResourceContentCommitted event that fires when you edit CSS and JavaScript.
chrome.experimental.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {
resource.url
resource.type // 'script', 'stylesheet' or 'document' (happens when you edit inline JS or CSS)
content // all the content of updated file as a string
})
Nice, isnt it?
More on Autosave protocol.
Im developing on
http://localhost/
(orhttp://you-name-it/
) instead offile://
. Can I make Autosave work?
Sure, just add a new route to the extensions options.
All the alternative listed below miss one Autosaves feature: saving newly added CSS rules to the last stylesheet file.
Latest Chrome DevTools support Workspaces which makes Chrome DevTools Autosave obsolete.
The same as Autosave but doesnt require you to install the server and does both ways syncing!
Two-way sync, requires to install Node and write JS config files.
Works only with JetBrains IDEs, such as WebStorm.