01
Pick any container
Click an element to scope what you observe. The CSS selector auto-fills with live validation — narrow your focus to exactly the part of the DOM you care about.
Chrome extension · in development · zero telemetry
See every DOM mutation
in real time
Pick any container in any web page, hit record, and watch every DOM mutation stream into a visual timeline. Built for front-end debugging.
Coming soon
Try the demo
Free · no account · all processing stays in your browser
mutationlens · side panel
class changed on div#app
"container collapsed" → "container expanded"
Node added <li.todo-item>
+ "Buy milk"
Node removed <div.loader>
Text changed on span.count
"3 items" → "4 items"
Attribute
class
Before
"container collapsed"
After
"container expanded"
REC
· 17 mutations · 00:00:03
How it works
From "what just changed?" to "here it is" in four clicks.
MutationLens wraps the browser's MutationObserver in a UI that's actually usable for debugging — scoped, visual, and inspectable.
02
Record in real time
Every DOM mutation streams into a visual timeline as you interact with the page — added nodes, removed nodes, attribute changes, text changes.
03
Diff every change
Before/after blocks for attributes, character-level diff for text, full outerHTML for added or removed nodes. No more guessing what flipped.
04
Highlight on the page
Click a mutation to flash the element on the page. Even removed elements show a ghost rectangle where they used to live.
Coming soon