JS Memory Leaks - Interactive Lab | IconVault
Create real closure, detached DOM and timer leaks, watch the live heap graph climb, then fix them. Free, in-browser.
JS Memory Leaks
Cause and fix leaks with a live heap graph
Live JS heap
n/a (peak 0.0 MB)
performance.memory is only exposed in Chromium. The leak demos still work everywhere, but the live heap graph needs Chrome or Edge.
Sampled once per second. Create leaks below and watch the line climb, then fix them and watch it settle.
Closure leak
Event handlers that close over big data and are never removed. Each batch retains about 2.5MB.
0 retained · 0 collected by GC so far
// LEAK: every handler closes over bigData and is never removed
const cache = [];
function leakyListener() {
const bigData = new Array(250000).fill("x").join(""); // ~250KB
const handler = () => console.log(bigData.length); // closure keeps bigData alive
window.addEventListener("resize", handler);
cache.push(handler); // even without this, the listener itself retains it
}
// FIX: keep a reference and remove it
// window.removeEventListener("resize", handler);Detached DOM
Nodes removed from the page but kept in a JS array. DevTools would flag these under Detached Elements.
0 detached nodes retained
// LEAK: removed from the page but still referenced = detached DOM
const detached = [];
function leakNodes() {
for (let i = 0; i < 200; i++) {
const el = document.createElement("div");
el.textContent = "row " + i + " " + "x".repeat(500);
document.body.appendChild(el);
el.remove(); // gone from the DOM...
detached.push(el); // ...but still retained here
}
}
// FIX: detached.length = 0 lets the garbage collector reclaim themRunaway timer
An interval that appends to an array in its closure. The timer handle alone keeps the whole closure alive, even on a background tab.
stopped
// LEAK: the interval keeps the whole closure (and its data) alive
let timerId = null;
function startLeak() {
const history = [];
timerId = setInterval(() => {
history.push(new Array(10000).fill(Date.now())); // grows forever
}, 500);
}
// FIX: clearInterval(timerId); timerId = null;5 of 5 free leak experiments left. Everything runs locally in your browser.
About this tool
IconVault's JS Memory Leaks lab lets you cause real memory leaks on purpose and watch what happens. Create leaking closures that retain megabytes through forgotten event handlers, detach DOM nodes that stay alive in a JS array after leaving the page, or start a runaway timer that grows its closure forever. A live heap graph sampled from performance.memory shows the line climbing as you leak and settling as you fix each one. It is free and runs fully in your browser.
Each leak ships with its real-world code pattern and the matching fix, all copyable. WeakRef and FinalizationRegistry tracking shows objects actually being reclaimed by the garbage collector after you release them, which makes the abstract idea of GC reachability concrete. Use it to build intuition before you open Chrome DevTools on your own app's growing heap.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon