I would really love to be able to see the code that is affecting a specific DOM element.
But I also would really love not to have to look through all my javascript searching for references/selectors that might be causing the issue.
Does anyone have a technique for causing a browser debugger to break on any changes to a specific DOM element? I don't mind it requiring a specific browser or extension to work.
A DOM Mutation Breakpoint pauses the code when the DOM node on which you have set the breakpoint is modified. You set a DOM Mutation Breakpoint in the Page Inspector. Navigate to the DOM node in which you are interested and use the context menu to set the breakpoint.
When you update the DOM, the reflow and repaint happen. Every time the DOM changes, the browser needs to recalculate the CSS, do a layout and repaint the web page. React doesn't really do anything new. It's just a strategic move.
This is also doable without writing any script in Firebug as well as in Chrome's developer tools (maybe others, did not inspect further).
In Firebug:
In Chrome Developer Tools
I actually found this out after trying accepted answer of 999, however given code did not work for me. Additionally, Chrome's possibility to monitor events on any DOM subtree seems really nice.
Note: The events below were great when the question was asked, but are no longer current. The recommended alternative is MutationObservers, but those are still maturing
MutationObserver on MDN
Try this (in Firefox, with Firebug installed):
function breakOnChange(el) { if (!el.addEventListener) return; el.addEventListener('DOMAttrModified', function(DOMAttrModifiedEvent){debugger}, true); el.addEventListener('DOMNodeInserted', function(DOMNodeInsertedEvent){debugger}, true); el.addEventListener('DOMNodeRemoved', function(DOMNodeRemovedEvent){debugger}, true); } // Usage: breakOnChange(someDomNode);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With