How to turn off caching on Firefox?

Question

During development I have to \"clear cache\" in Firefox all the time in order to make it use the latest version of JavaScript files.

Is there some kind of setting (a

Answer 1

In higher versions of Firefox, like Nightly, there is an options named "disable cache", you can find it by clicking the gear. And that options works only in current session, which means when you close inspector and restart it, you have to check it again if you want catch disabled.

Answer 2

If you're working with server side code you could generate a random number and append it to the end of the src in the following manner....

src="yourJavascriptFile.js?randomNumber=434534"

with the randomNumber being randomly generated each time.

Answer 3

The Web Developer Toolbar has an option to disable caching which makes it very easy to turn it on and off when you need it.

Answer 4

There are pros and cons to the last two solutions posted, but they're both IMHO great solutions.

1. You may or may not want your session ID embedded in your url like that for tighter security. But in development that shouldn't matter, but what if you forget to remove it? Also does that really work? Wouldn't you need something like a sequential number generator (hit count stored in the session, or maybe even just if 1 then 0, if 0 then 1)?

2. Adding a session id (or whatever sequencer) means you need to remember to add it to every resource you don't want cached. On the one hand that's better because you can just include your session id with just that resource you're actively developing and testing. On the other hand, it means you have to do that and you have to remember to remove that for production.

3. Modifying the vhost.conf or the .htaccess file does the trick nicely without the need to remember to add and remove the session id. But the downside is performance of all js and css resources will be affected, and if you have large files, that's going to slow you down.

Both seem like great, elegant solutions -- depends on your needs.

Answer 5

I know I'm resurrecting an ancient question, but I was trying to solve this problem today and have an alternate solution. Toggling caching when I want to test was not really acceptable for me, and as others mentioned, hard refreshing (ctrl+shift+r) doesn't always work.

Instead, I opted to put the following in my vhost.conf file (can also be done in .htaccess) on my dev environment:

<FilesMatch "\.(js|css)$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</IfModule>
</FilesMatch>

On my dev environment, this ensures that js and css are always retrieved. Additionally it doesn't affect the rest of my browsing, and it also works for all browsers, so testing in chrome / ie etc is also easy.

Found the snippet here, some other handy apache tricks as well: http://www.askapache.com/htaccess/using-http-headers-with-htaccess.html#prevent-caching-with-htaccess

To make sure that my clients always see the latest version on production, we increment the query string on the js include on each update, ie

jquery.somefile.js?v=0.5

This forces my clients' browsers to update their local cache when they see a new querystring, but then caches the new copy until the file is updated again