28

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.

Yang
  • 16,037
  • 15
  • 100
  • 142
  • 1
    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. – jfriend00 Feb 22 '14 at 03:07
  • 1
    @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.) – Yang Feb 22 '14 at 08:09
  • An alternative approach to your problem might be to use a livecoding tool like [COLT](http://colt.io), which works with external editors. – namuol Jun 13 '14 at 08:24

2 Answers2

36

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.

namuol
  • 9,816
  • 6
  • 41
  • 54
  • 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: http://stackoverflow.com/questions/29351513/chrome-dev-tools-workspace-mapping-mismatch – Vetras Oct 28 '15 at 11:52
  • 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. – nf071590 Jan 15 '16 at 17:45
  • 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 – partizanos May 24 '16 at 11:34
3

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.

thatgibbyguy
  • 4,033
  • 3
  • 23
  • 39
  • 5
    I already use grunt-livereload. It works without refreshing only for CSS; on JS changes, it reloads the full page for me. – Yang Feb 22 '14 at 08:05