How to disable caching of HTML when testing in Chrome?

Question

I think this is because of cacheing, but I am not totally sure.

The issue I am having is that when I change a file and save it, it is not updating in my browser for a while. I think this is because the file was cached in my browser and it is loading the previous version. Since I am testing, I need to figure out how to disable this because I will be changing the files often.

Tried searching for this on the web, but couldn't really find what I was looking for.

I am running this on localhost currently, but the changing file is just HTML

EDIT:

I know it isn't a problem with my files, because if i open it in a new browser it loads the new version of the page.

I am trying to use chrome to do my testing.

EDIT2:

Also, the file being changed is loaded through require.js, so it is not the direct file entered in the URL

Answer 1

I noticed in your question in EDIT2 you mentioned that you are using require.js. If you don't want to disable the browser cache, you can set the RequireJS config urlArgs option. Require.js has a config option that you can use to disable files being cached.

Here's a exerpt from Require.js documenation:Require.js urlArgs

urlArgs: Extra query string arguments appended to URLs that RequireJS uses to fetch resources. Most useful to cache bust when the browser or server is not configured correctly. Example cache bust setting for

urlArgs: urlArgs: "bust=" + (new Date()).getTime()

During development it can be useful to use this, however be sure to remove it before deploying your code.

Here's an example of what it may look like:

requirejs.config({
    urlArgs: "bust=" + (new Date()).getTime(),  
    paths: {
        "jquery": "libs/jquery-1.8.3",
        "underscore": "libs/underscore",
        "backbone": "libs/backbone"
    },
});

require(["jquery", "underscore", "backbone"],
    function ($, _, Backbone) {
        console.log("Test output");
        console.log("$: " + typeof $);
        console.log("_: " + typeof _);
        console.log("Backbone: " + typeof Backbone);
    }
);

Answer 2

If you open up the chrome developer tools and hit the settings button (a gear icon in the bottom right corner of the developer tools panel) there should be an option on the popup to "Disable Cache"

Answer 3

What I do, when I have this kind of doubts is to add a random param at the end of the url.

example:

http://localhost/foo/bar.html?randomParam=873738424

This disables the possibility for the browser to cache the response. This can be done manually or programmatically, as it is a very easy solution.

Usually application don't get in error if there is an unrecognized parameter.

Answer 4

If we are checking the scripts on the filesystem rather than a local web server, I would go with this, rather than checking the location.host (which is an empty string in that case):

var require.urlArgs = (window.location.protocol == 'file:') ? 'bust='+new Date().getTime() : ''