Javascript debugging difficult as browser doesn't refresh the scripts!

Question

Hi, I'm trying to debug a Javascript written in the Mootools framework. Right now I am developing a web application on top of Rails and my webserver is the rails s that boots WEBrick.

When I modify a particular tree.js file thats called with in one a mootools init script,

    require: {
        css: [MUI.path.plugins + 'tree/css/style.css'],
        js: [MUI.path.plugins + 'tree/scripts/tree.js'],
        onload: function(){
            if (buildTree) buildTree('tree1');
        }
    },

the changes are not loaded as the headers being sent to the client are Last Modified: 10 July, 2010..... which is obviously not true since I just modified the file.

How do I get rid of this annoying caching. If I go directly to the script in my browser (Chrome) it doesn't show the changes until I hit refresh, but this doesn't fix my problem when I go back to my application and hit refresh, it still loads the pre-modified script.

Answer 1

This has happen to me also in FF, I think it is a cache header sent by the server or the browser itself. Anyway a simple way to avoid this problem while in development is adding a random param to the file name of the script.

instead of calling 'tree/scripts/tree.js' use 'tree/scripts/tree.js?'+random that should invalidate all caches.

Answer 2

As frisco says, adding a random number in development does the trick but you will likely find that the problem still affects you production. You want to push new JavaScript changes to your users but can't until their browsers stop caching the file. In order to do this, just get the files mtime and add that as the random string. This will only change when the file is modified and so the JavaScript will be loaded from cache if it has not been changed or it will be loaded from the server, if it has.

PHP has the function filemtime but as I'm not familiar with Ruby, I'm afraid I can't help you further in that direction (sorry!). However, this answer seems to accomplish what you want.

Answer 3

Try the Ctrl+F5 trick. To avoid hitting browser cache.

More info here: http://stackoverflow.com/questions/385367/what-requests-do-browsers-f5-and-ctrl-f5-refreshes-generate