12

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

Troy Cosentino
  • 4,388
  • 7
  • 33
  • 57
  • What browser are you running? – Tobias Nilsson Jan 01 '13 at 21:56
  • If it is cache problem, so your answer there: http://stackoverflow.com/questions/1341089/using-meta-tags-to-turn-off-caching-in-all-browsers – SaidbakR Jan 01 '13 at 21:57
  • See this post. It answers exactly your question [http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development][1] [1]: http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development – atreju Jan 01 '13 at 22:05
  • See this question. It answers your question exactly: [http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development][1] [1]: http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development – atreju Jan 01 '13 at 22:07
  • Disable cache in chrome dev tools only works when dev tools is open https://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/15655936#15655936 – jamiethepiper Apr 05 '13 at 10:19

7 Answers7

7

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"

DerekR
  • 3,436
  • 2
  • 21
  • 24
  • Worth noting that this setting only applies when developer tools are open for a given tab. – Waxen Jan 02 '13 at 19:48
  • I no longer see the gear button. Here's another way to do it: http://stackoverflow.com/a/36339076/3347858 – Tony L. Mar 31 '16 at 17:03
7

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);
    }
);
Community
  • 1
  • 1
Mike Barlow - BarDev
  • 10,577
  • 16
  • 59
  • 83
1

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.

Luigi R. Viggiano
  • 8,103
  • 6
  • 46
  • 60
  • ahh this makes sense.. this is probably more what I am looking for because I don't have to change any code in the file. Thanks! – Troy Cosentino Jan 01 '13 at 22:03
  • Actually, check edit2. I don't think this solution is going to work for me. – Troy Cosentino Jan 01 '13 at 22:05
  • You can still put the url of require js in the browser with the random parameter to force-reload it, before to start testing. Otherwise you need some plugin (like WebDeveloper plugin) for firefox/chrome that are able to disable the cache, see: http://chrispederick.com/work/web-developer/ . Also CTRL+F5 or CTRL+R should reload the page disabling the cache in most browsers. – Luigi R. Viggiano Jan 01 '13 at 22:11
1

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() : ''
oley
  • 329
  • 2
  • 3
0

Include in the head section

<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
HMarioD
  • 784
  • 8
  • 18
0

Try to clear your browser's cache before reloading the page (ctrl+shift+delete).

You can also press Shift and click on reload so the files will be refreshed and no cache will be used.

Majid Laissi
  • 17,370
  • 17
  • 62
  • 99
0

Disregard: Functions don't seem to be allowed when compiling with r.js. :(

Piggie-backing on BarDev, how about something like this:

requirejs.config({
    urlArgs: (function(){
        return (location.host=='localhost') ? 'bust='+(new Date().getTime()) : '';
    }())
});

Now you can leave that code in there, and never worry about inadvertently busting the cache in production.

Bart
  • 6,378
  • 5
  • 40
  • 52