Have you ever struggled to find what line of js code was the cause of a weird behavior in your page? I did.
Well there’s a super cool feature in Chrome dev tools you can try. Simply inspect the DOM (where the behavior appears to be) then do a right click and choose one of these three options:
Break on Subtree Modifications allows to break if something happened to the DOM INSIDE your inspected element.
Break on Attributes Modifications allows to break if an attribute changed on your inspected element.
Break on Node Removal allows to break if your inspected element has been removed from the DOM.
These three options are going to put a break point which will send you to the exact line of javascript involved at that particular moment. Break points have the effect to “pause” all the javascript so you can study variables values at the exact pausing moment.
This is an awesome little hidden feature for better debugging.
