Debugging when using require.js cache

Question

Using require.js I noticed that often the dependencies are cached by the browser and don't get updated even if I force the page to completely reload (command+shift+R).

In order to have always the updated file, I made require.js ask for the files adding '?datestamp' after the url. The only problem with this approach is that the breakpoints don't remain in chrome or firebug after reloading, making the debug painful.

Do you have any suggestion?

Answer 1

Actually there are some things you can do:

Either you disable your browser caching completely to test it. An easy way in e.g. Chrome is to open a Incognito Window (CTRL + SHIFT + N) similar to the Private Browsing mode in Firefox. However the more ideal solution for you should be listed here: Disabling Chrome cache for website development

Or you instruct your webserver to send no cache headers for javascript or some javascript files. One possibility is to use mod_expires with apache.

Answer 2

I used

require.config({ urlArgs: "v=" +  (new Date()).getTime() });

This solved my problem, but you have to remember to remove it, before you goto production.

Answer 3

I think you can use the urlArgs on required.config

quote from http://requirejs.org/docs/api.html#packages 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 urlA