CODEWITHSUNDEEP
javascriptcachinggoogle-chrome
Howdy_McGee
Howdy_McGee

Reputation: 10673

Stop Chrome Caching My JS Files

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?

Upvotes: 157

Views: 151640

Answers (14)

MartinHN
MartinHN

Reputation: 19802

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

Screenshot showing where Disable Cache options is placed

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)

Upvotes: 222

abiNerd
abiNerd

Reputation: 2043

  • Open Chrome Dev Tools (F12)
  • Click the 'Settings' icon
  • Preferences -> Network -> Disable cache

Settings panel

Upvotes: 1

StilesCrisis
StilesCrisis

Reputation: 16310

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.

Upvotes: 28

balintn
balintn

Reputation: 1453

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)

Upvotes: 0

jones-chris
jones-chris

Reputation: 701

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

Upvotes: 0

Ramon Araujo
Ramon Araujo

Reputation: 1738

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

Upvotes: 1

Xin
Xin

Reputation: 36600

  1. Open Developer Tools

    • Either F12
    • Or ... -> More Tools -> Developer Tools

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

Upvotes: 0

Nicole Rivers
Nicole Rivers

Reputation: 667

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

Upvotes: 65

Alp
Alp

Reputation: 583

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.

Upvotes: 0

StackG
StackG

Reputation: 2858

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!

Upvotes: 8

Alfabravo
Alfabravo

Reputation: 7589

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

Upvotes: 1

Mike Christensen
Mike Christensen

Reputation: 91696

A few ideas:

  1. When you refresh your page in Chrome, do a CTRL+F5 to do a full refresh.
  2. 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.
  3. 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

Upvotes: 11

Ryan Ternier
Ryan Ternier

Reputation: 8814

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>

Upvotes: 3

EGOrecords
EGOrecords

Reputation: 1969

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

Upvotes: 15

Related Questions