Is there a way to refresh just the javascript include while doing development?

Question

While doing development on a .js file I'd like to just refresh that file instead of the entire page to save time. Anyone know of any techniques for this?

Answer 1

Here is a function to create a new script element. It appends an incremented integer to make the URL of the script unique (as Kon suggested) in order to force a download.

var index = 0;
function refreshScript (src) {
  var scriptElement = document.createElement('script');
  scriptElement.type = 'text/javascript';
  scriptElement.src = src + '?' + index++;
  document.getElementsByTagName('head')[0].appendChild(scriptElement);
}

Then in the Firebug console, you can call it as:

refreshScript('my_script.js');

You'll need to make sure that the index itself is not part of the script being reloaded!

The Firebug Net panel will help you see whether the script is being downloaded. The response status should be "200 OK" and not "304 Not Modified. Also, you should see the index appended in the query string.

The Firebug HTML panel will help you see whether the script element was appended to the head element.

UPDATE:

Here is a version that uses a timestamp instead of an index variable. As @davyM suggests, it is a more flexible approach:

function refreshScript (src) {
  var scriptElement = document.createElement('script');
  scriptElement.type = 'text/javascript';
  scriptElement.src = src + '?' + (new Date).getTime();
  document.getElementsByTagName('head')[0].appendChild(scriptElement);
}

Alexei's points are also well-stated.