Live reload JavaScript in Chrome Live reload JavaScript in Chrome javascript javascript

Live reload JavaScript in Chrome


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.


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.