How do I track and debug JavaScript memory leaks in Firefox?

Question

I've been trying to track this one for literally a month now without any success. I have this piece of code on an car advertising website which basically allows thumbnails to rotate in search results given that a car has multiple pictures. You can see it in action at the following:

http://www.abcavendre.com/4506691919/

It is built on the mootools 1.2 framework. The problem is that this script, under Firefox 3, consumes a rather large amount of memory overtime when a page is full of those rotating pictures, such as this inventory page:

http://www.abcavendre.com/Vitrine/Israel_Huttman/

You can see the source of the script in question here:

http://www.abcavendre.com/scripts/showcase_small.js

Any ideas as to what is causing the memory leak? The weird thing is this code behaves properly under IE7.

Answer 1

Try nulling elements vairable array in the end of the initialize function

    ...

    if (ads.length > 0)
        {
        this.imagesFx = new Fx.Elements(elements,
         {
         wait: false,
         duration: 1000
         });
        this.moveNext.periodical(2500, this);
        }

    elements = null; //Add THIS!
}

Answer 2

A way to track memory leaks in Firefox is with the Leak Monitor Addon. It shows memory leaks of javascript (including extension-scripts).

Please remind that the plugin will sometimes show leaked objects that will get cleaned up later by the garbage collection. If that is the case the plugin will launch a new window showing you the new status.

Answer 3

Update to MooTools 1.2.1, we've improved garbage collection and leak handling.