如何使用Chrome Dev Tool控制台检查文件中函数被调用了多少次？

Question

我想找出使用​​开发工具在HTML文件中调用特定JavaScript函数的次数，但无法弄清楚如何通过Googling以及找不到任何东西，因此感谢任何指针

先感谢您

Answer 1

一种非常简单的方法是初始化一个全局javascript变量，然后在您要监视的函数内递增计数并使用console.log将其写出。 因此，您将获得每次调用该函数的列表以及递增计数。 将javascript函数写到控制台日志中非常有用，在开发过程中我经常使用它来强调活动。 只要记住在生产之前禁用所有此类调用即可。

Answer 2

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

采取一个简单的功能：

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函数来改进此功能，该函数将函数名称作为字符串，然后在给定运行补丁函数的上下文的情况下修改实际函数。在全局范围内，上下文将是浏览器中的window 。

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