Heap snapshot diffing

Browser workflow

Memory → Take snapshot (A)
Reproduce leak N times
Click Collect garbage
Take snapshot (B)
Select B → Summary dropdown → Comparison → compare to A

Sort by # Delta descending.

Node workflow

node --inspect examples/node/02-event-emitter-leak.js

Chrome → chrome://inspect → Memory → same A/B comparison.

Or write snapshots programmatically:

import v8 from 'node:v8';
import fs from 'node:fs';

function snap(name) {
  const file = `/tmp/heap-${name}-${Date.now()}.heapsnapshot`;
  v8.writeHeapSnapshot(file);
  console.log('wrote', file);
}

Load .heapsnapshot files in DevTools Memory tab.

flowchart LR
  A[Snapshot A baseline] --> action[User actions]
  action --> GC[Force GC]
  GC --> B[Snapshot B]
  B --> diff[Comparison view]

Interpreting delta

Delta	Action
+10,000 `(string)`	Logging? Template cache?
+500 `Detached HTMLDivElement`	DOM leak
+1 `YourSingleton`	Expected — investigate children

Click growing type → Retainers panel (next lesson).