7

So, I have a script called "engine", and after much headbashing and (futile) debugging, I've found out that GC simply isn't reloading it!

This is how I include it in the webpage (inside the <head> element):

<script type="text/javascript" src="engine.js"></script>

When a put 10 console.log("asdf");'s at the start of the script, it's like they aren't there. When I went to the "resources" tab in the GC console, I saw that no changes are being applied whatsoever to that script! Hlep? Would putting a + "?" + new Date() at the end help?

corazza
  • 31,222
  • 37
  • 115
  • 186
  • 5
    It should be loading from cache, the solution is ctrl + F5 – Okan Kocyigit Apr 06 '12 at 15:17
  • 1
    Looks like a cache problem to me. – raz3r Apr 06 '12 at 15:17
  • Yeah, another problem is that my page *wont* reload. I don't know why, it simply stopped reloading. I press "F5", the favicon turns into a small circle, but then nothing. No error, it also takes time to reload. – corazza Apr 06 '12 at 15:19
  • 2
    You've tried other browsers to make sure that it's a GC specific thing and not a spelling mistake (or something) right? – Luke Apr 06 '12 at 15:25
  • Nyaha! Reloading works in Firefox! But, the question remains: why can't I reload it in GC? – corazza Apr 06 '12 at 15:28
  • Huh, everything seems to work in Firefox, I might just stick to it... – corazza Apr 06 '12 at 15:36

5 Answers5

28

The universal solution that works in Chrome, Firefox and IE is cleaning the cache via Ctrl+Shift+Del (on Mac ⌘+Shift+⌫).

Chrome solution #1

  1. Open Developer Tools (F12 or ⌘+⌥+i, or right-click → Inspect).
  2. Select the Network tab and tick the Disable cache checkbox.

Chrome disable cache - Network tab

  1. Reload the page.

❗️Note: The cache will be disabled only when the devtools window is open.

Chrome solution #2

This only makes sense if #1 is not used.

  1. Open Developer Tools.
  2. Click the Settings cogwheel icon in the bottom right corner.
  3. In the dialog that appears, select under the Network subsection the Disable cache checkbox: from now on the cache will be skipped when the devtools window is open. When the devtools windows is closed caching will work as usual.

Chrome disable cache in devtools settings

Chrome solution #3: empty cache + hard reload

  1. Open Developer Tools (otherwise the menu in the next step won't show).
  2. Click and hold down the Refresh button, and then select from the dropdown Empty Cache and Hard Reload.

Chrome Hard Refresh and Cache Reset

Modifying javascript code

A browser-agnostic solution which could be used for debugging is to append in your server-side code a randomly-generated version string as a query parameter, i.e. call your script as:

<script type="text/javascript" src="myscript.js?ver=12345"></script>

This trick will force the browser to reload the script when the value of the ver parameter changes. If you make ajax requests then you can append "?ver=" + new Date().getTime() to your URL.

NOTE: Don't forget to remove the parameter when you are finished debugging because in production you most likely do want the scripts to be cached. It is a common practice though to generate a new timestamp on each new build — this can be used in production, and will ensure that after a new deployment the clients will always get the updated scripts.

Unlike all the above solutions this one will work even when you have some sort of caching (e.g. redis, memcached, varnish) or CDN (e.g. akamai, cloudflare, cloudfront, etc) between the client and the server.

ccpizza
  • 28,968
  • 18
  • 162
  • 169
  • Readers: Take the favorite chrome only solution as accepted answer. – Leandro Bardelli Nov 18 '16 at 14:03
  • This is insane! Why "in production you most likely do want the scripts to be cached"? They're a resource like any other. Not asking the server if the cached copy is up to date, just seems like a big bug! – Daniel Oct 17 '17 at 11:02
  • @Daniel: you can have fine-grained control over when the cached resources expire by setting the `Cache-Control`, `If-None-Match`, and `If-Modified-Since`, so that a request to a cached resource that is still valid will return 304 Not Modified (https://httpstatuses.com/304). – ccpizza Oct 17 '17 at 11:14
1

It is possible that the script is cached so the old version is loading from cache. If you want to make sure you get a new version, you can force a browser reload, clear your browser cache or change the name of the script or put a different query parameter on the end of the filename.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 6
    You can also go to Chrome DevTools and click on settings - then you have the ability to choose: 'Disable caching' which is good for dev mode. It's only in Chrome Canary (for now). – Ido Green Apr 06 '12 at 15:41
  • @IdoGreen Occasionally in Chrome 18, 19, & 20, Ctrl+F5 doesn't actually clear the cache, but this tip works great! Thanks! – arboc7 Apr 16 '12 at 04:40
1

This bugged me as well; CTRL+F5 or SHIFT+F5 never worked... The only things that works is opening your dev tools (hit F12), and right-click the reload icon next to the address bar and then selecting either "Hard Reload" or "Empty Cache and Hard Reload"

takaz
  • 201
  • 2
  • 6
0

As I said in the comment I guess it's a cache problem, a CTRL+F5 should be enough, in case it is not go for CTRL+SHIFT+CANC and clear browsing data. However sometimes it's the server that has some kind of cache, I say that because with IBM WebSphere I often get cache problems that I can't resolve with a simple F5 on my browser. I just have to wait for my web server to "refresh" itself.

raz3r
  • 3,071
  • 8
  • 44
  • 66
  • I think I'll need to open another question, because a bigger problem has emerged... As I've said in my comment, I cannot reload the page! – corazza Apr 06 '12 at 15:25
0

In the latest chrome stable 21st Oct 2016.

    Open Developer Tools (F12 or right-click > Inspect or vertical ellipsis icon in address bar right corner > More Tools > Developer Tools).
    Click the vertical ellipsis icon in the top right corner of Developer Tools navigation bar > settings.
    In the Preferences section find the Network > Disable cache.
Hemant
  • 225
  • 4
  • 17