JavaScript and possible browser cache problem

Question

Hello! I am a JavaScript newbie and I am experiencing the following problem:

I would write JS code in a separate file, include the file in the html code. JS code runs great. No problems. I would go ahead and make some changes to the JS code, click 'refresh' in the browser window and sometimes there is a problem. The changes I have made to the JS code have messed things up. The code doesn't work the way it's supposed. So I start looking for the problem, but the code is perfectly fine. So I clear the browser's cache - still nothing. I undo the changes to JS code, everything works. I put the new code back in - after a few 'refresh' clicks - all of a sudden it works. I am having this problem using Safari 4, Firefox 2.0. I have not tried a different browser.

My question is - Do I have to disable browser caching using some JS technique or simply from the browser or there is a different problem? Thank you for your time and help!

Answer 1

If you reference your JS file with a random key that would defeat caching:

eg:

var randomnumber=Math.floor(Math.random()*10000)
var scriptfile='http://www.whatever.com/myjs.js?rnd='+randnumber;

Good for debugging if nothing else.

Answer 2

I find when I am debugging some JS I just have the URL to the javascript open in another tab. When I upload I switch to the tab first, hit refresh and then test the code. That, or turn of caching in the FireFox WebDeveloper plugin.

Answer 3

When you reload/refresh a web page most of the time scripts are reloaded from cache. You can force the browser to reload the external script file(s) by holding down the shift key while clicking the refresh button.

If that doesn't work you might want to check if there is a proxy server sitting between you and the web page. If it is a local web page, the shift button should do the trick.

Answer 4

Personally, I force the refresh with CTRL + F5.

Answer 5

Thank you guys for all the help! :)