Easiest way to ensure browser cache is cleared when debugging EXTJS 4

Question

This is driving me nuts.

Everytime I make a change I'm having to ensure the most up to date javascript include is loaded by the browser (same behaviour chrome and FF)...

ctrl + f5 has no effect, i have to manually clear the browser cache - which is a nightmare

I have this code in my app.js:

Ext.Loader.setConfig({
  enabled: true,
  disableCaching: false
});

Edit: Chicken & egg scenario:

• in order to be able to set breakpoints in FF or chrome you need to turn on caching (see code above) so that the '_dc' querystring parameter is not added to the script file
• but then you always get a cached copy, so u dont see your changes anyway
• if you turn off caching, then you can't set breakpoints, because the browser sees it as a new url

Anyway round it?

Answer 1

I've turned off the cache breaker for the same reason. My solution is to also turn off Firefox's cache entirely. (It's a dev machine so I really don't need it at all)

1. Go to "about:config" in Firefox and search for "cache".
2. Set browser.cache.offline.enable to false (double click on it)
3. Set network.http.use-cache to false
4. If you use ext-all-dev.js, set extensions.firebug.cache.responseLimit higher than it is to ensure you can see all of the source in Firebug.

You may need to restart and clear the cache after doing this. But, Firefox will then pull the latest source every time you load the page (F5), and breakpoints will get hit in Firebug.

If this isn't acceptable, you can also temporarily insert debugger; statements into your code, which will act as breakpoints. Put them inside ifs to act as conditional breakpoints.