I have a question about reloading JavaScript files. I develop web pages front-ends and do a lot of coding in JS. Every time when I want to check an application's flow is correct (or do some debugging) I have to hit F5 key to reload whole page and it's scripts, and I have to wait. Waiting time depends on page's weight and sometimes I get impatient. Therefore I wonder if there is any way to reload only changed script file *.js? or maybe there is some plugin for Chrome to reload chosen script? It could be a very handy way to ease development. Thank you for replies.
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();
I have a question about reloading JavaScript files. I develop web pages front-ends and do a lot of coding in JS. Every time when I want to check an application's flow is correct (or do some debugging) I have to hit F5 key to reload whole page and it's scripts, and I have to wait. Waiting time depends on page's weight and sometimes I get impatient. Therefore I wonder if there is any way to reload only changed script file *.js? or maybe there is some plugin for Chrome to reload chosen script? It could be a very handy way to ease development. Thank you for replies.
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();
- 1 If possible one way to speed up your js developing is using online tools like jsfiddle or jsbin. Then you won't have to reload an entire page and just work on your scripts individually and then implement them to your site. – Paparappa Commented Dec 1, 2011 at 12:54
3 Answers
Reset to default 4As far as I know, there is no way to to do that. The problem is, you just cannot unload a script from a page, once it was evaluated.
Even if you remove the <script> node, it will not change the behavior. It might be possible with some third-party plugin for instance, but I'm almost sure its not possible with any vanilla js implementation.
Of course you could just load the same script file from your server and execute (eval) it, but again, you still didn't unload the previous code which could lead to very unexpectable behavior.
So, you have to keep your F5 key on its toes.
You might try the new Scratchpad feature in Firefox (I think it's been in releases since 7.0).
When I'm revving hard on a new piece of javascript I do it in the scratchpad and then copy out to my editor when I like it. Basically, I do all my work in functions and objects that can be redefined on the fly (doesn't everyone?). This way I can just re-run the function definition or reassign an objects method/data and it's a lot faster than waiting for refresh cycles.
In Dojo or CommonJS based frameworks its not a problem at all. Javascript code is usually hold in a module.
In our web-based IDE we reload scripts all the time like this (@reloadCustomMobileStack) :
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);
}
}
});
});
In order to use require.undef(module), you need to add this here to your Dojo config: has:{'dojo-undef-api': true}
Of course that won't work with any Javascript since Dojo/Common-JS Javascript is different but enables you also a kind of dependency injection or resolving.