Turn off firefox caching when doing JavaScript development

Published: {ts '2013-06-18 00:00:00'}
Author: Steven Neiland
Site Url: http://www.neiland.net/article/turn-off-firefox-caching-when-doing-javascript-development/

So this morning I had to change gears and do some javascript debugging. I test the existing code and see the error, make my changes save them...and still see the same error wtf? For about 15 minutes I was completely confused as I could see the code changes saved in the file but when I ran firebug the inspector showed the old code.

Of course finally I figured it out, firefox caching. Here is the kicker though, I had been clearing my browser cache with ctrl-f5 but firefox was not actually clearing the javascript cache.

I don't know if this is a new behavior as I don't normally do javascript development but it is really stupid in my opinion. If I tell my browser to clear the cache I expect that to include javascript.

Clear Cache with Shortcut

There are a couple of ways of truly clear firefox's cache. One way is to clear all cache elements by using the "ctrl-shift-del" keyboard shortcut. Now I personally don't use this method so I can't confirm how effective it is.

If you are interested here is Mozilla Firefox's keyboard shortcut list.

Add On's

A more convenient method is to use a firefox addon to clear the cache. You can either use the "Firefox Web Developer Addon" which has a clear cache command, or if you want a quick shortcut you can use the "Clear Cache Button".

Always Off

While the above method's work, personally I am lazy. I don't want to have remember to clear my cache everytime I change a javascript file I am developing. I just want caching turned off all the time.

To do this enter about:config into the firefox address bar. This will open up firefox's configuration options.

network.http.use-cache

This preference controls whether to cache files retrieved using http or https. Setting the value to false turns off caching of the javascript files (as well as other files). Now this does increase the number of resource requests, but on a developer machine I think its worth the tradeoff.

network.http.use-cache = false

More information about this option can be found at network.http.use-cache.

browser.cache.offline.enable

While not strictly related this caching option can also be handy. What it does is turn off the offline caching of data when not connected to the internet.

It is easy to confuse these two options so make sure you are setting the one you need.

browser.cache.offline.enable = false

More information about this option can be found at network.http.use-cache.