Question

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

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

我知道这不会给我完整的图片，但我对网络应用与浏览器的互动更感兴趣。

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

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

输出如下：

DevTools console output

说实话，有很多输出，我认为这种类型的调试可能无法使用。您可以尝试通过观察所有属性来扩展此解决方案（例如，通过为所有对象定义getters and setters或proxies），但这将变得更加混乱。

Answer 2

好主意！在尝试了解网站/应用的工作方式时，以及在搜索性能瓶颈时（DOM access is expensive），跟踪DOM更改可能很有用。

我没有找到完全符合您要求的扩展名，所以我创建了一个。您可以从Chrome Web Store安装DOMListener。

DOMListener console output

DOMListener扩展使用MutationObserver来捕获所有DOM更改并将friendly消息输出到DevTools控制台。请注意，我正在使用console.debug()，因此您可以轻松过滤掉这些消息：

DevTools console filters

代码可在GitHub上找到。如果您希望避免安装扩展程序，或者希望在Firefox中获得类似的输出，只需抓取DOMListener.js文件并在控制台中运行它。

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

2 个答案: