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.

Solution 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.

Solution 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.

Comments

[jfriend00]

Do you mean something other than reloading the page? It's not clear how you can reload the global state of one script without reloading the others too.

[Yang]

@jfriend00: No global state is reloaded, it's hot code swapping. I mean the mechanism already exists and works right there in your Sources panel: edit the script, save, and existing closures use the new code. (Brute force manual approach is to compile your new JS, then copy and paste it in there.)

[namuol]

An alternative approach to your problem might be to use a livecoding tool like COLT, which works with external editors.

[Yang]

I already use grunt-livereload. It works without refreshing only for CSS; on JS changes, it reloads the full page for me.

[Vetras]

if you (like me) wanted this to allow live edit of JS, it wont work. You'll get the "worspace mapping mismach error". I found this however: stackoverflow.com/questions/29351513/…

[nf071590]

I was wondering if either of you guys have gained any progress in this since this post over a year ago. I'm still struggling and even though npm livereload provides this option: applyJSLive tells LiveReload to reload JavaScript files in the background instead of reloading the page. The default for this is false. Setting this to true still refreshes the page.

[partizanos]

Small addition. If you load from local file it does work you must runt the local file through a web server e.g python -m http.server in the folder your .html exists otherwise the option match to local file never appears and then you can have the save and reload functionality. I mention it because I hadn't found the problem through reading the post