javascript - 如何使用 Chrome 开发工具控制台检查文件中某个函数被调用的次数？

Question

我想知道某个特定的 JavaScript 函数在 HTML 文件中使用开发工具被调用了多少次，但不知道如何调用，也无法通过 Google 搜索找到任何内容，任何指针都值得赞赏

提前谢谢

Answer 1

您可以使用代码检测(或猴子修补)来跟踪函数被调用的次数以及许多其他事情。

取一个简单的函数:

function foo () {
    console.log('bar');
}

我们可以修补该函数以跟踪调用计数。我们可以将计数保留在函数本身上，而不是用每个被修补的函数的计数来污染全局范围。这是可能的，因为 JavaScript 中的一切都是对象。

var oldFoo = foo;

foo = function () {
    ++foo.count;
    return oldFoo.apply(this, arguments);
}

foo.count = 0;

现在，如果我们调用 foo，我们将能够访问 foo.count 处的计数。这里的问题是需要三位代码才能实现这一点。第一个是跟踪旧函数，第二个是重新定义它，最后一个是将原始计数设置为 0。

我们可以通过创建一个通用的 patchMyFunc 函数来改进这一点，该函数将函数名称作为字符串接收，然后在给定补丁函数运行的上下文的情况下修改实际函数。在全局范围内，上下文将是浏览器中的窗口。

function patchMyFunc (funcName) {
    var context = this;
    var oldFunc = context[funcName];

    context[funcName] = function() {
        ++context[funcName].count;
        return oldFunc.apply(context, arguments)
    }

    context[funcName].count = 0;
}

现在我们只需使用我们的函数名称调用 patch 函数就可以了。

patchMyFunc('foo');