Finding JavaScript memory leaks with Chrome

Question

I\'ve created a very simple test case that creates a Backbone view, attaches a handler to an event, and instantiates a user-defined class. I believe that by clicking the \"R

Answer 1

A couple of important notes in regards to identifying memory leaks using Chrome Developer tools:

1) Chrome itself has memory leaks for certain elements such as password and number fields. https://bugs.chromium.org/p/chromium/issues/detail?id=967438. Avoid using those while debugging as they polute your heap snapshot when searching for detached elements.

2) Avoid logging anything to the browser console. Chrome will not garbage collect objects written to the console, hence affecting your result. You can suppress output by placing the following code in the beginning of you script/page:

console.log = function() {};
console.warn = console.log;
console.error = console.log;

3) Use heap snapshots and search for "detach" to identify detached DOM elements. By hovering objects, you get access to all the properties including id and outerHTML which may help identify each element. If the detached elements are still too generic to recognize, assign them unique IDs using the browser console prior to running your test, e.g.:

var divs = document.querySelectorAll("div");
for (var i = 0 ; i < divs.length ; i++)
{
    divs[i].id = divs[i].id || "AutoId_" + i;
}
divs = null; // Free memory

Now, when you identify a detached element with, lets say id="AutoId_49", reload your page, execute the snippet above again, and find the element with id="AutoId_49" using the DOM inspector or document.querySelector(..). Naturally this only works if your page content is predictable.

How I run my tests to identify memory leaks

1) Load page (with console output suppressed!)

2) Do stuff on page that could result in memory leaks

3) Use Developer Tools to take a heap snapshot and search for "detach"

4) Hover elements to identify them from their id or outerHTML properties