VisualJS
Deep Memory Visualization
Make memory behavior completely visible — references, lifecycles, garbage collection, diffs, and lifetime ownership.
Reference Timeline
Track how references are created, updated, and removed over time.
Event Timeline
Memory State at t=0
let a = { x: 1 }
Stack (Variables)
a
Heap (Objects)
obj1alive
{ x: 1 }
refCount: 1
Step 1 / 6
Object Lifecycle
Follow an object from creation through mutation, sharing, and destruction.
creation phase
const user = { name: 'Alice', age: 30 };What happens
A new object is allocated on the heap. The variable 'user' holds a reference to it.
Stack (Variables)
useruser-obj
Heap
Object
.name: 'Alice'
.age: 30
Alive
Shared
Unreachable
Garbage Collection
Visualize the mark-and-sweep algorithm that reclaims unused memory.
Idle
Mark Phase
Sweep Phase
Complete
Heap Graph
root
refs: [a, b]
ROOT
obj A
refs: [c]
obj B
refs: []
obj C
refs: [a]
obj D
refs: [e]
unreachable
obj E
refs: [d]
unreachable
obj F
refs: []
unreachable
Marked (reachable)
Swept (freed)
Unmarked
Current Phase
Idle
GC has not started. Objects are in their current state.
Activity Log
Statistics
4
Reachable
3
Collected
Memory Diff
Compare heap snapshots to instantly see what changed.
144B
Before
200B
After
+56B
Delta
Before (t=0)
Array(3)64B
.0: 'a'
.1: 'b'
.2: 'c'
+1 more
User48B
.name: 'Alice'
.age: 30
Config32B
.debug: true
After (t=1)
Array(5)96B
.0: 'a'
.1: 'b'
.2: 'c'
+3 more
User64B
.name: 'Alice'
.age: 31
.email: 'a@b.c'
Session40B
.token: 'xyz'
.active: true
Diff View
Array(5)changed
Userchanged
Configremoved
Sessionadded
1
Added
1
Removed
2
Changed
0
Same
Lifetime Analysis
Understand object age, reference counts, and ownership chains.
Object Lifetimes
t = 5
t=0t=5t=10
At t=5:
5 objects alive, 824B allocated
Config
Age
5 ticks
Created at t=0 (still alive)
Ref Count
3
Peak: 3
Size
24B
2.9% of current heap
Ownership Chain
app→
server→
logger
Long-lived (never freed)
Insights
⏱Shortest-lived: "Temp Buffer" (1 ticks)
📦Largest object: "Cache" (512B)
🔗Most shared: "Cache" (peak 4 refs)