25

I'm working on JavaScript for a site, developing with Firefox, and when I refresh the page, I don't see my changes. The JavaScript file is in an external file. I reloaded and refreshed the page several times, but the old JavaScript file was still cached. Finally, I loaded the JavaScript page in the browser directly, saw the old script, hit 'reload', and saw my changes.

How can I clear cached external JavaScript files? I'll need to know this also when I tell the client that the changes are made, so that they aren't seeing the old cached functionality.

BuZZ-dEE
  • 6,075
  • 12
  • 66
  • 96
user151841
  • 17,377
  • 29
  • 109
  • 171

7 Answers7

15

To bypass cache for one time in Firefox:

  • Click the reload button while holding the shift key.
  • Ctrl+F5
  • Ctrl+Shift+R or Cmd+Shift+R
  • for other browsers

Some web hosting services do cache the page server-side. When bypassing cache, web browsers will send a header to tell the server that it should not respond with the cached data.

Hulk1991
  • 3,079
  • 13
  • 31
  • 46
Thai
  • 10,746
  • 2
  • 45
  • 57
14

In Firefox you can install a plugin called Web Developer Toolbar which has a appcache clear command

I think there is no way to do it programmatically but you could give a hint to the browser using something like 

<script type="text/javascript" src='js/my.js?x=<?php echo rand(0,100) ?>'></script>
BuZZ-dEE
  • 6,075
  • 12
  • 66
  • 96
armonge
  • 3,108
  • 20
  • 36
  • 3
    I sometimes use this too, when I want to all current users to get the new content. However, I recommend using `filemtime('js/my.js')` instead of just random value. – Thai Jan 12 '11 at 16:09
  • 2
    I've found that the 'disable caching' option on Web Developer Toolbar works for me :) – user151841 Jan 12 '11 at 16:51
  • This example is for quick testing. You can refresh the JS file via the web browser address bar. For example:

    1. Assume you are at the website www.foo.com 2. A JS file, bar.js, is included and stored at the root 3. The site is caching an old version of the site 4. Display the JS file directly in the browser with a random query string (e.g. www.goo.com/bar.js?random=random) 5. The browser is now using the updated version of the JS file.     – Jeremy Ray Brown Jul 17 '14 at 16:47
10

Browsers have user-facing facilities to clear the cache. Usually it's a menu option somewhere. You can't force the cache to be cleared.

What you can do is arrange for your scripts to be loaded from URLs that vary according to version number (or whatever):

<script src='http://your.site.com/js/big_script.js?version=2'></script>

Now when you update the code, you update the pages that use it:

<script src='http://your.site.com/js/big_script.js?version=3'></script>

That's a different URL, and it won't be in the cache.

Pointy
  • 405,095
  • 59
  • 585
  • 614
7

A very popular technique is to use a querystring parameter. Could look like

<script src="http://www.somedomain.com/foobar.js?v=1></script>

If you change this line into v=2 a browser will reload the script if it was cached before.

jAndy
  • 231,737
  • 57
  • 305
  • 359
2

Disable js caches: Dev tools (F12) > Network > Disable cache

Then refresh page: F5

Andrew
  • 18,680
  • 13
  • 103
  • 118
1

Shift-reload often clears out caches more aggressively. However, you really don't want to rely on this. A good technique is to version the filenames of your external Javascript, and update the HTML that refers to them when you rev. That way, you can rely on caching better as well (for example, setting cache headers to "public" in your webserver, and also specifying long Expires times).

Raph Levien
  • 5,088
  • 25
  • 24
0

Disable Angular.js decomposition: Dev tools (F12) > Debugger > [Settings Icon] > uncheck Source Maps.

You then may have to restart Firefox.

Source Maps has prevented me from debugging the modified app.

jifb
  • 142
  • 2
  • 6