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

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

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.

I suggest you to use Firebug for this purpose. See this video, it helped me a lot.

http://encosia.com/2009/09/21/updated-see-how-i-used-firebug-to-learn-jquery/

If you're talking about the unfortunate case of client-side/browser caching of your .js file, then you can simply version your .js file. You can:

• Rename the .js file itself (not preferred)
• Update the include line to reference yourfile.js?1, yourfile.js?2, etc.. Thus forcing the browser to request the latest version from the server. (preferred)

Unfortunately, you have to refresh the web page to see edits to your JavaScript take place. There is no way that I know of to edit JavaScript in "real-time" and see those edits effect without a refresh.

You can use Firebug to insert new JavaScript, and make real-time changes to DOM objects; but you cannot edit JavaScript that has already been run.

If you just fed up refilling the forms while developing just use form recover extensions like this one https://addons.mozilla.org/ru/firefox/addon/lazarus-form-recovery/