Stop Chrome Caching My JS Files

Question

I will make a change to my JS files but it won't really change in the browser, I have to rename the files every time so that it reloads it. Is there some sort of .htaccess command I can add or something to make it stop caching?

It is even caching my html pages hard core. I need to reopen my entire browser just to see changes. Could it possibly be a server problem?

Answer 1

You can open an incognito window instead. Switching to an incognito window worked for me when disabling the cache in a normal chrome window still didn't reload a JavaScript file I had changed since the last cache.

https://www.quora.com/Does-incognito-mode-on-Chrome-use-the-cache-that-was-previously-stored

Answer 2

You can click the settings icon on top right corner ... | More Tools | Developer Tools | Network | Disable cache (while DevTools is open)

For windows, this is F12 or CTRL + SHIFT + I while on mac CMD + SHIFT + I opens up DevTools.

New path for Chrome Update Sept 2018:

Click settings icon on the top right corner ... | Settings | Preferences | Developer Tools | Network | Disable cache (while DevTools is open)

Answer 3

A faster way to do this is by right clicking the refresh icon beside the address bar and choosing Empty Cache and Hard reload

Just make sure Chrome's dev tools is open. (Press F12) By the way... This trick only works on Chrome for Windows, Ubuntu, and Mac OS

Answer 4

<Files *>
Header set Cache-Control: "no-cache, private, pre-check=0, post-check=0, max-age=0"
Header set Expires: 0
Header set Pragma: no-cache
</Files>

Answer 5

The problem is that Chrome needs to have must-revalidate in the Cache-Control` header in order to re-check files to see if they need to be re-fetched.

You can always SHIFT-F5 and force Chrome to refresh, but if you want to fix this problem on the server, include this response header:

Cache-Control: must-revalidate

This tells Chrome to check with the server, and see if there is a newer file. IF there is a newer file, it will receive it in the response. If not, it will receive a 304 response, and the assurance that the one in the cache is up to date.

If you do NOT set this header, then in the absence of any other setting that invalidates the file, Chrome will never check with the server to see if there is a newer version.

Here is a blog post that discusses the issue further.

Answer 6

I was getting the same css file when I browse website(on hosting company server with real domain) and I was unable to get the updated version on chrome. I was able to get the updated version of the file when I browse it on Firefox. None of these answers worked for me. I also have the website files on my machine and browse the site with localhost using my local apache server. I shut down my apache server and I was able to get the updated file. Somehow my local apache server was messing with the chrome cache. Hope this helps someone as it was very hard for me to fix this.