Practice lab

Open each challenge in a new tab so the heap contains only the leak scenario — not Starlight navigation, charts, or other course UI. This mirrors how you debug real applications.

Prerequisites

• Chrome or Edge (Chromium)
• DevTools → Memory tab
• Close other tabs and extensions if possible

Workflow checklist

1. Open a challenge page in a new tab
2. DevTools → Memory → Take snapshot (baseline A)
3. Click Start leaking and wait ~10 seconds (or click repeatedly)
4. Click the trash icon to force garbage collection
5. Take snapshot (B)
6. Select B → Summary dropdown → Comparison → compare to A
7. Sort by # Delta descending — find growing constructors
8. Click a growing type → Retainers tab → follow the chain to the root

flowchart LR
  open[Open challenge] --> snapA[Snapshot A]
  snapA --> leak[Start leaking]
  leak --> gc[Force GC]
  gc --> snapB[Snapshot B]
  snapB --> diff[Comparison view]
  diff --> retainers[Retainers panel]

Challenges

#	Leak type	Open challenge	Related lesson	Expected DevTools signal
1	Accidental global	01-global-array.html	Global variables	Array delta, retainer via Window / leakStore
2	Duplicate listeners	02-event-listeners.html	Event listeners	Closure, listener count growth
3	Detached DOM	03-detached-dom.html	Detached DOM	Detached HTMLDivElement
4	Forgotten timer	04-forgotten-timers.html	Forgotten timers	system / Context, Array in closure
5	Closure over scope	05-closure-cache.html	Closure leaks	Closure with large retained size
6	Unbounded cache	06-unbounded-cache.html	Unbounded caches	Map, Object count delta

Open challenge index — all six on one page.

Tips

• Do not use the in-page chart — practice reading DevTools Memory panel instead
• Repeat the leak action 10× before snapshot B to amplify the signal
• Hints and solutions are on each challenge page (collapsed) — try finding the leak first
• For server-side practice, use examples/node/ with node --inspect

Further reading

See External resources for videos and articles on heap snapshots and retainers.