5

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

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

我知道这不会给我完整的画面，但出于我的目的，我对网络应用程序与浏览器的交互更感兴趣。

4

2 回答 2

4

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

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 控制台输出

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

于 2013-09-17T10:52:03.267 回答
3

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

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

DOMListener 控制台输出

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

DevTools 控制台过滤器

代码可在GitHub上找到。如果你不想安装扩展或者你想在 Firefox 中获得类似的输出，只需获取DOMListener.js文件并在控制台中运行它。

于 2013-09-16T16:50:58.897 回答