Chrome DevTools Memory

Open DevTools → Memory tab (Chrome / Edge).

Heap snapshot

Frozen picture of all objects on the heap.

Workflow:

1. Snapshot A at baseline
2. Perform suspect action 10×
3. Force GC (trash icon)
4. Snapshot B
5. Select B → Comparison vs A

Look for # Delta growth in constructors: (string), Array, Detached HTMLElement, your app classes.

Allocation instrumentation on timeline

Records allocations over time — great for when memory spiked during interaction.

1. Start recording
2. Reproduce leak
3. Stop — inspect allocation bars on timeline

Allocation sampling

Lower overhead — statistical view of hot allocators. Good for production-like profiling.

flowchart TD
  A[Baseline snapshot] --> B[Reproduce action]
  B --> C[Force GC]
  C --> D[Second snapshot]
  D --> E[Comparison view]
  E --> F[Find growing constructors]

What to look for

Signal	Likely cause
Detached * count rises	DOM retention
Closure / system / Context	Callback leaks
Same listener count growing	Missing removeEventListener
Array + your cache class	Unbounded cache

Force GC between snapshots

Without GC, you measure “not collected yet” not “leaked.”