How to force Chrome to reload a resource?

Question

We're building a web-based visualization and I recently replaced the source file of an <audio /> element on the server with another file of a different size but same name.

When I reloaded the page in Chrome, the old sound was used. When I 'STRG+F5'ed the page, still the old sound was used. I then directly opened the mp3 file in the browser by navigating to the source URL of the audio element. Even then the old sound was used. I also tried opening the dev tools and disabled the cache - still the same.

With Firefox, the new sound was used after a forced refresh (Strg-F5), which is exactly the behaviour I expected to see. Any server-side caching is completely disabled, by the way.

What is Chrome doing here? Not that the sound file is the most important thing on earth (it is used programmatically as a warning sound), but I am a bit alarmed now that other resources may as well get "stuck in cache". Did someone run into the same issue?

Answer 1

I ran over the same issue. I was debugging some CCS. The way I solved is: open developer console in chrome by pressing F12 then you are able to right click on refresh button and chose the third option (empty cache and hard reload). This will reload the page completely and should clear the cache. If you want to just relaod the page ignoring the cached content: ctrl + shift+r or ctrl + F5

For futher info check out this page.

Hope it helpes :)