Live reload JavaScript in Chrome

Question

I know you can live-edit JS from within the Source panel of Chrome Developer Tools, and I know there are systems for live-reloading of CSS, but can you live-reload JS from the source location (either a URL or local disk, or leveraging Workspaces somehow, or possibly even as a Chrome Developer Tools plugin)? In particular this would be insanely useful for CoffeeScript-to-JS setups.

Answer 1

It's surprisingly difficult to find anyone else trying to do this, considering how powerful it would be.

I've come close to achieving automatic live reloading of JS without page refresh; here's what I do:

1. In the inspector's sources tab, right click and choose "Add Folder to Workspace..."
2. Select to the local folder containing the .js you want to sync and click [okay].
3. Right click on the .js file nested inside your newly-added workspace folder and choose "Map to Network Resource", then select the matching .js from the page.
4. Make changes to the local .js file using an external editor.
5. Click on the .js file in the inspector, ensuring it has focus; this will trigger a "Recompilation and update" and your changes should be injected to the page.

Step 5 is the part that needs to be automated, somehow.

If you combine this with a file-watcher that automatically bundles your app into a single .js file, you can come close to automatic reload without refreshing the page.

Answer 2

Yes you can do that with grunt.js, or gulp.js. Other things like Codekit can do this, as can an add-on for Chrome called LiveReload.