Finding the source of DOM modifications in Webkit Inspector

Sometimes, when you're debugging an issue in the browser, you might spot an attribute of an element or an entire subtree in the DOM that is getting left there by some Javascript that's executing when you load the page.

You could step through Javascript execution as the page loads and try to see when it shows up, but the Webkit Inspector has the ability to set "breakpoints" on a few events occurring with respect to specific elements in the DOM.

All you have to do is go to the Elements tab in the Webkit Inspector and right-click on the element you want to monitor.

"Break On" presents a list of events to watch for

You can choose any number of three options:

1. Subtree Modifications - Watch for anything that changes anywhere in the elements contained by this element
2. Attributes Modifications - Watch for any attribute values changing or attributes added/removed on this particular element
3. Node Removal - Watch specifically for child elements being removed from this container element

Then reload the page or resume Javascript execution and you'll see the standard workflow of debugging Javascript in Webkit Inspector with breakpoints. This tool even lets you view the call stack and the current value of any elements on the page!