No Login Data Private Local Save

Mutation Observer Tester - Online DOM Change Watcher

Developer Tools Educational API DOM Mutation Observer watch
39
0
0
0

Mutation Observer Tester

Online DOM Change Watcher – test and visualise how MutationObserver monitors live DOM modifications in real time.

Observable Target (editable)
✏️ Sample Element

Edit me directly! Add, remove or modify text and elements inside this box.

  • Observable list item 1
  • Observable list item 2
I have attributes
Click inside the box and start typing, or use the action buttons on the right.
Configuration & Actions
Mutation Types
Trigger DOM Change
Mutation Log Total: 0 childList: 0 attributes: 0 characterData: 0

Start observing and then trigger a DOM change to see live logs.

FAQ & Knowledge Base

MutationObserver is a built-in browser API that allows you to watch for changes being made to the DOM tree. It is designed to react to modifications like adding/removing child nodes, attribute changes, and text content changes. It has largely replaced the older Mutation Events due to better performance and reliability.

  1. Choose which mutation types you want to observe using the checkboxes (childList, attributes, characterData, subtree).
  2. Click Start Observing to begin watching the editable target area on the left.
  3. Trigger changes by editing the content directly, or by using the action buttons (Add Child, Modify Attribute, etc.).
  4. Each detected mutation appears in the log below, with type, target, and details.

  • childList – fires when children of the target node are added or removed.
  • attributes – fires when an attribute of the target node is changed.
  • characterData – fires when the text content of the target node (or its children if subtree is true) changes.
  • subtree – extends observation to the entire subtree of the target, not just direct children.

Common reasons:
1. You haven't clicked Start Observing.
2. The mutation type is not selected (e.g., you're changing an attribute but “attributes” is unchecked).
3. The change occurs outside the observed target (the editable box).
4. subtree is off but the change happens in a deep child node. Enable subtree to capture all nested changes.

Yes, the MutationObserver API can be used on any DOM node you have access to, including third-party websites if you run your own JavaScript via extensions or console. However, due to security restrictions (CORS, sandboxing), you cannot use this online tester to watch external websites. It is designed to demonstrate the API on a local, safe DOM sandbox.

When you modify the text of a text node (e.g., using .textContent), a characterData mutation is generated. When you add or remove entire element nodes (which may contain text), a childList mutation fires. To capture text edits inside nested elements, enable both characterData and subtree.
🔧 Related Tools