Clear cached JavaScript includes in Firefox

Question

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.

Answer 1

• The web developer toolbar add-on has an option to let you disable caching.
• Firebug also does this. It is in the menu of the Net panel and is called Disable Browser Cache.

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.

Answer 2

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>

Answer 3

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

Answer 4

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

Then refresh page: F5

Answer 5

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.

Answer 6

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.