Finding JS memory leak in chrome dev tools

Question

I’m using the chrome dev tools to work out if there is a memory leak in some JS code. The memory timeline looks good with memory being reclaimed as expected

Answer 1

Is the stuff under “Detached DOM Tree” just waiting to be garbage collected or are these real leaks?

Before taking snapshot the browser will run garbage collection and sweep all objects that are not referenced. So the heap snapshot always contain only live objects. As a consequence if a Detached DOM Tree is in the snapshot than there must be an element in the tree that is referenced from JavaScript.

Also does anyone know how to find out what function is holding on to a reference to a detached element?

There should be an element(or several of them) in the same detached DOM tree that has yellow background. Such elements are referenced from the JavaScript code. You can find out who exactly keeps reference to the element in the retainers tree.