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?

Does enabling the ETag header in your web server cause Chrome to cache but correctly retrieve a new copy of the file when it has changed? — Developer Webs, Mar 09 '18 at 16:01

score 217 · Accepted Answer · edited Sep 23 '18 at 17:34

217

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:

edited Sep 23 '18 at 17:34

Jake Bourne

723
3
10
27

answered Dec 05 '11 at 22:05

MartinHN

19,542
19
89
131

4

Major failure by chrome to be caching things... even when the page is marked with No cache.... Oh well at least this works, the users can suffer but at least I can develop – Robert Noack Jun 21 '14 at 15:35
5

Please note that the "Settings" are no longer in the bottom right! Click the three dots menu in the **top right** to get to settings. – yizzlez Jul 14 '16 at 18:35
4

The location is: top right corner | "..." | settings | Preferences | Network | "Disable cache" (while DevTools is open). – atom88 Nov 28 '16 at 18:00
5

This is VERY BAD PRACTICE!!! No, you should not have a temporary hack for your use....you should have a PERMANENT solution for ALL of your users. The best way is a random query string at the end of the src. src="someJs.js?someRandomStringCreatedByInlineJsOrServerRenderedCode" which would make it so that it had a fresh version everytime. a good random string would be to grab todays date/time and throw it in there. you might have to turn it into a string since itll probably be a date object. It is really really bad that this was the chosen answer and upvoted so heavily. – Jul 19 '17 at 15:25
@AaronLoften The question explains he is making changes, so it is while coding he wants to bust the cache. Query string cache invalidator is not the best, as a path is superior in some edge case performance measurements. It is also beneficial to only bust the cache in your bundling/build pipeline, so that you only force downloads when changes were actually made instead of every day. – MartinHN Jul 20 '17 at 07:03
@MartinHN-"Is there some sort of .htaccess command I can add or something to make it stop caching?" implies a permanent solution. Since he does not specify, the answer should atleast mention the solution is only for development. It is not the solution to stop caching, but rather clear it. At a bare minimum, since they may not have caching knowledge, should know that they may need to test this in a pre-cached system, to ensure those who visited their site previously are not seeing unexpected results that has been fixed in a new version. If performance is affected, code refactoring may be needed – Jul 21 '17 at 21:12
1

As of Chrome 61.0.3163.100, it seems that the option now lives under More Tools/Network Conditions. "Developer Tools" option no longer exists. – justian17 Oct 17 '17 at 13:44

score 65 · Answer 2 · edited Jun 26 '17 at 12:15

65

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

edited Jun 26 '17 at 12:15

Nick Jaden Williams

3
2

answered Mar 01 '13 at 08:40

Nicole Rivers

667
5
2

2

FYI, I tried all of this, and absolutely none of it worked. On my machine (with default settings for Mountain Lion), F12 shows the dashboard. – Aubrey Goodman Jun 05 '13 at 20:41
2

how is it much better than the accepted answer? You can reload normally with the accepted answer. – SSH This Jun 14 '13 at 16:21
no you can't. at least I can't. none of the answers worked for me, still popping up an alert which is deleted in my local js file but it is still in cached js file in chrome. – Burak Karakuş Dec 28 '15 at 09:11
1

Works for me. Make sure the dev-tools are open, otherwise the right-click won't show the menu. – Venryx Apr 27 '17 at 21:30
I see the option, but in my case, the script was not refreshed. – justian17 Oct 17 '17 at 13:44

score 28 · Answer 3 · edited Apr 21 '21 at 07:10

28

Hold Shift while clicking the reload button (F5).

This forces the web browser to ignore the cached content and pull a new copy of the web page into the browser. Shift + F5 guarantees that the latest website content will be loaded. However, depending on the page size, it is usually slower than only F5.

edited Apr 21 '21 at 07:10

SwissCodeMen

4,222
8
24
34

answered Dec 05 '11 at 22:02

StilesCrisis

15,972
4
39
62

score 14 · Answer 4 · answered Dec 05 '11 at 22:02

14

add Something like script.js?a=[random Number] with the Random number generated by PHP.

Have you tried expire=0, the pragma "no-cache" and "cache-control=NO-CACHE"? (I dunno what they say about Scripts).

answered Dec 05 '11 at 22:02

EGOrecords

1,959
2
19
33

2

I stumbled across this question and was skimming through answers. This is a terrible idea, because: 1) generating the random number at every request will cause browsers to re-download the file at _every_ visit. You want a _build time_ value, so that browsers only regenerate the value when you make changes to the site. Since PHP is runtime interpreted, you might need to do it at deploy-time instead. and 2) generating a random number means that sometimes (with the probability increasing over time), the browser will some random old cached copy. If you must do it at request time, use a timestamp! – JakeRobb Jun 18 '18 at 20:10
I am doing this and using the build version number, with a decent timeout (1 day) on the header cache value – Worthy7 Aug 29 '18 at 07:47

score 11 · Answer 5 · answered Dec 05 '11 at 22:07

A few ideas:

When you refresh your page in Chrome, do a CTRL+F5 to do a full refresh.
Even if you set the expires to 0, it will still cache during the session. You'll have to close and re-open your browser again.
Make sure when you save the files on the server, the timestamps are getting updated. Chrome will first issue a HEAD command instead of a full GET to see if it needs to download the full file again, and the server uses the timestamp to see.

If you want to disable caching on your server, you can do something like:

Header set Expires "Thu, 19 Nov 1981 08:52:00 GM"
Header set Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
Header set Pragma "no-cache"

In .htaccess

Had this but the pre-check=0, post-check=0 is the addition that made the difference for me. — TadLewis, Jan 30 '19 at 20:05

score 8 · Answer 6 · answered May 01 '14 at 11:23

8

Quick steps:

1) Open up the Developer Tools dashboard by going to the Chrome Menu -> Tools -> Developer Tools

2) Click on the settings icon on the right hand side (it's a cog!)

3) Check the box "Disable cache (when DevTools is open)"

4) Now, while the dashboard is up, just hit refresh and JS won't be cached!

answered May 01 '14 at 11:23

StackG

2,730
5
29
45

1

However, it does not help to debug using WebStorm. Then DevTools are open WebStrom cannot attach a debugger. – Alexander Volkov Aug 23 '14 at 10:03

AgilePro · Answer 7 · 2018-08-28T01:04:42.787

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.

I think it should be `Cache-Control: must-revalidate` instead of `Cache-Control: must-validate`. I don't think the latter is valid. — László Monda, Aug 25 '18 at 00:03

score 3 · Answer 8 · answered Dec 05 '11 at 22:06

3

When doing updates to my web applications I will either use a handler to return a single JS file to avoid the massive hits on my server, or add a small query string to them:

<script type="text/javascript" src="/mine/myscript?20111205"></script>

answered Dec 05 '11 at 22:06

Ryan Ternier

8,714
4
46
69

2

While this looks like an ingenious practice, you might get problems with some proxies that will cease to cache when they find a query string: https://developers.google.com/speed/docs/best-practices/caching#LeverageProxyCaching – Francois Bourgeois Jan 21 '13 at 14:32
2

So what should you do instead? – BlueSky Apr 01 '17 at 06:37

score 1 · Answer 9 · answered Feb 08 '18 at 02:05

I know this is an "old" question. But the headaches with caching never are. After heaps of trial and errors, I found that one of our web hosting providers had through CPanel this app called Cachewall. I just clicked on Enable Development mode and... voilà!!! It stopped the long suffered pain straight away :) Hope this helps somebody else... R

score 1 · Answer 10 · answered Dec 05 '11 at 22:25

1

<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>

answered Dec 05 '11 at 22:25

Alfabravo

7,493
6
46
82

score 0 · Answer 11 · answered Mar 23 '17 at 07:02

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.

score 0 · Answer 12 · answered Nov 28 '17 at 03:12

0

Open Developer Tools
- Either F12
- Or ... -> More Tools -> Developer Tools
Click Empty Cache and Hard Reload
- Either right-click refresh icon (just left to url address bar)
- Or left-click refresh icon and holding it for 1 second

answered Nov 28 '17 at 03:12

Xin

33,823
14
84
85

score 0 · Answer 13 · answered Feb 16 '18 at 21:20

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

score 0 · Answer 14 · answered Nov 19 '20 at 11:31

Things that did not work for me:

clicking the refresh icon (with or without shift)
SHIFT-F5, CTRL-F5
opening the page in an incognito window
F12 (to open Dev tools) / (Dev tools) Settings / Disable cache (while dev tools is open)

What I mean by not working is: In the file system the .js file has been updated, but Chrome does not pick up the change. It means the page script executes with the old logic, Dev tools Scripts / ... / Compiled / ... shows the old .js content.

What does work for me:

Close Chrome and re-open the page. After this Dev tools Scripts / ... / Compiled / ... shows updated .js content (matching the file system), and page scripts excute with updated logic.

Chrome version 86.0.4240.193 (Official Build) (64-bit)

Stop Chrome Caching My JS Files

14 Answers14

Linked