How to reload javascript file

Question

I have a question about reloading JavaScript files. I develop web page interfaces and do a lot of coding in JS. Every time I want to check the application flow correctly (or do some debugging), I have to press the F5 key to reload the whole page and its scripts, and I have to wait. The latency depends on the weight of the page, and sometimes I become impatient. So I'm wondering if there is a way to reload only the modified * .js script file? or maybe there is some kind of Chrome plugin to reload the selected script? This can be a very convenient way to facilitate development. Thanks for answers.

this one uses jQuery, it is here, for example:

var scs=$('script[type*=javascript]'); var scsl = scs.length; var scsi = 0; var o = []; var oi = 0; var ol = 0; var s = ''; var fws = 0; var sws = 0; var v = {}; function i1(){ fws = window.setInterval(function(){         v = $(scs[scsi]);                 s = v.attr('src');         if(typeof s!='undefined' && s.indexOf('http')==-1 && s.indexOf('index')==-1){                 console.log([scsl,scsi,s]);                 o.push({src:s});                 v.remove();         }         if(scsi==scsl){                 console.log(o);                 window.clearInterval(fws);                 ol = o.length; i2();         }         else{                 scsi++;         } },800); } function i2(){                 sws=window.setInterval(function(){                         v = o[oi];                         sc = $('<script>').attr({type:'text/javascript',src:v.src+'?t='+(new Date().getTime())});                         console.log([ol,oi,v.src]);                         $('head').append(sc);                         if(oi==ol-1){                                 window.clearInterval(sws);                         }                         else{                                 oi++;                         }                 },800); } i1(); 

Answer 1

As far as I know, there is no way to do this. The problem is that you simply cannot unload the script from the page once it is evaluated.

Even if you remove the <script> node, this will not change the behavior. This may be possible with some third-party plugins, but I'm pretty sure it is not possible with any javascript implementation.

Of course, you can just download the same script file from your server and execute (eval) it, but again you still haven’t uploaded the previous code, which can lead to very elusive behavior.

So you have to keep your F5 key on your toes.

Answer 2

You can try the new Scratchpad feature in Firefox (I think it was in versions with 7.0).

When I think hard about a new piece of javascript, I do it on notepad and then copy it to my editor when I like it. Basically, I do all my work on functions and objects that can be redefined "on the fly" (not all?). That way, I can simply rerun the function definition or reassign the method / data of the objects, and this is much faster than waiting for update cycles.

Answer 3

In Dojo or CommonJS, frameworks based on it are not a problem at all. Javascript code is usually stored in a module.

In our IDE web environment, we reload scripts (@reloadCustomMobileStack) all the time:

 define([ 'dojo/_base/declare', 'require' ], function(declare,require) { return dojo.declare("xappstudio.manager.DynamicScriptMixin", null, { _reloadModule:function(module,reload) { require.undef(module); var scripts = document.getElementsByTagName('script'); for (var i = scripts.length - 1; i >= 0; i--) { var script = scripts[i]; if (script.getAttribute('src') && script.getAttribute('src').length > 0 && script.getAttribute('src').indexOf(module)!=-1) { script.parentNode.removeChild(script); break; } } if(reload) { require([module], function(_moduleIn) { console.error('got module' + _moduleIn); }); } }, reloadCustomMobileStack:function() { var modulesToReload = [ 'cxapp/delegates/BootDelegate', 'cxapp/delegates/FormDelegate', 'cxapp/delegates/HeaderToolbarDelegate', 'cxapp/delegates/ImageResizeDelegate', 'cxapp/delegates/ServiceDelegate', 'cxapp/delegates/UrlDelegate', 'cxapp/manager/Context', 'cxapp/manager/CustomApplication', 'cxapp/manager/DataManager', 'cxapp/types/Types', 'cxapp/utils/RPCProxyPOSTEnvelope' ]; for(var i = 0 ; i < modulesToReload.length ; i++) { this._reloadModule(modulesToReload[i],true); } } }); }); 

To use "require.undef (module)"; you must add this here to your Dojo config: "has: {'dojo -undef-api: true}"

Of course, this will not work with any Javascript, since Dojo / Common-JS Javascript is different, but it allows you to inject or enable dependency as well.