Back to results for “Memory Management”
JavaScript › Memory Management & Garbage Collection

How would you use Chrome DevTools' heap snapshot comparison to find a leak's source?

Advanced

Answer

Take a heap snapshot, perform the suspected leaking action several times, take another snapshot, then use the 'Comparison' view to see which object types grew in count between snapshots — objects that keep increasing without ever decreasing point directly at the leak's retaining structure.
// Workflow, not code:
// 1. Take Snapshot 1
// 2. Trigger the suspected action 5x
// 3. Take Snapshot 2
// 4. Filter Comparison view by '#Delta', inspect retainers of growing objects
Real-world example Pinpointing that a 'DetachedHTMLDivElement' count keeps growing, revealing DOM nodes removed from the page but still referenced in JS.

Common follow-ups: What does a 'Detached DOM tree' in a heap snapshot specifically indicate?