Is there a way to log all DOM method calls

Question

Is there a way (preferably Firefox or Chrome) to log all the DOM methods invoked/properties modified by a Web app?

I need this to understand some of the working of web apps whose code I don't have in non-minified version.

I understand that this won't give me the complete picture, but I am more interested in the web app's interaction with the browser for my purpose.

Answer 1

You can log all method calls for specific class of objects by wrapping all of its methods with a custom logging function:

var originalMethod = SomeObject.prototype.someMethod;
SomeObject.prototype.someMethod = function() {
    //log this call
    originalMethod.apply(this, arguments);
}

I've created a function that hooks up such wrappers to all (non-inherited) methods of given class and logs all calls to the console:

function logMethodCalls(className) {

    function wrapMethod(className, methodName, prototype) {
        var orgMethod = prototype[methodName];

        return function() {
                    window.console.debug('%c'+className+'::%c'+methodName, 'color: #FBB117; font-weight: bold', 'color: #6F4E37', {
                        details: {
                            scope: this,
                            arguments: arguments
                        }
                    });
                    return orgMethod.apply(this, arguments);
                };
    }

    if(!window[className] || typeof window[className] !== 'function') {
        window.console.error('Invalid class name.');
        return;
    }

    var prototype = window[className].prototype;

    for(var i in prototype) {
        if(prototype.hasOwnProperty(i)) {
            if(typeof prototype[i] === "function") {
                prototype[i] = wrapMethod(className, i, prototype);
            }
        }
    }
}

I'm running it like this:

["Document", "DocumentFragment", "Element", "Event", "HTMLElement", "HTMLDocument", "Node", "NodeList", "Window"].forEach(function(i){
    logMethodCalls(i);
});

You can customise the array above to track only classes that you are interested in.

The output looks like this:

To be perfectly honest there is so much output that I don't think this type of debugging may be usable. You can try extending this solution even more by observing all properties (e.g. by defining getters and setters or proxies for all objects), but this will get even more messy.