At some point in the development of a project, a developer will inevitably be faced with an obscure error, which is raised from the depths of Ext JS when the application loads. This raises an issue with the way Ext JS sets up its caching mechanism. For example, a normal (if slightly naïve) request for a JavaScript file might look like this:

GET: /assets/javascripts/jquery.min.js

Out of the box, Ext.Loader will pull scripts like this:

GET: /ext/build/ext-all-rtl-debug.js?_dc=1420215165267

It appends a timestamp query variable to the request. This is designed to ensure that we always get the latest version of the script by bypassing browser caching mechanisms.

This can be very useful; however in our situation, it means that any breakpoints set in our code will be removed when the page reloads because Chrome thinks the file is different as the timestamp's different.

How can we resolve this? It turns out to be really simple; just open app.json in the root of an Ext JS project...