有没有办法记录所有DOM方法调用

Question

是否有办法(最好是Firefox或Chrome)记录Web应用程序调用的所有DOM方法/属性？

我需要这个来理解一些网络应用程序的工作,我的代码在非缩小版本中没有.

我知道这不会给我完整的图片,但我对Web应用程序与浏览器的交互更感兴趣.

Answer 1

您可以通过使用自定义日志记录函数包装其所有方法来记录特定对象类的所有方法调用：

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

我创建了一个函数，将此类包装器连接到给定类的所有（非继承）方法，并记录对控制台的所有调用：

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);
            }
        }
    }
}

我是这样运行的：

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

您可以自定义上面的数组以仅跟踪您感兴趣的类。

输出如下所示：

老实说，输出太多，我认为这种类型的调试可能不可用。您可以尝试通过观察所有属性（例如，通过为所有对象定义getter 和 setter或代理）来进一步扩展此解决方案，但这会变得更加混乱。