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.