how to log all dom subtree modifications with google developer tools/firebug

Question

I know how to 'break' on all subtree modifications using google developer tools, but is there a way to log all calls in the javascript which result in subtree modifications of an html element? i need to do this because if i break on the modifications to the subtree, the website crashes and i am unable to see the javascript call which was used.

Answer 1

If you're only interested in logging when a node is inserted or removed from the DOM and what node it was and where it was inserted or removed, you could do something like this:

(function(){

    function log( e ) {
        console.log( e );
    }
    document.body.addEventListener( "DOMNodeInserted", log );
    document.body.addEventListener( "DOMNodeRemoved", log );

})();

This gives you no call stack of course but it should give you a clue as to where the issue might be.