如何使用Chrome開發工具控制檯來檢查函數在文件中被調用的次數？

Question

我想知道在一個HTML文件中使用開發工具調用了一個特定的JavaScript函數的次數，但無法弄清楚通過谷歌搜索如何也無法找到任何東西，任何指針讚賞

謝謝提前

Answer 1

您可以使用代碼檢測（或猴子修補）來跟蹤函數被調用的次數以及其他許多事情。

舉一個簡單的功能：

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

我們可以修補功能來跟蹤invokation計數。我們可以將計數保留在函數本身上，而不是用每個被修補的函數的計數來污染全局範圍。這是可能的，因爲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; 
} 

現在我們只需要用我們的函數名稱調用補丁函數，我們很好。

patchMyFunc('foo');

Answer 2

一種非常原始的方法是初始化一個全局JavaScript變量，然後在你要監視增加計數，並使用的console.log寫出來的功能。因此，每次調用該函數時都會得到一個列表以及一個遞增計數。向控制檯日誌表單寫出一個javascript函數非常有用，我在開發過程中使用它來突出顯示活動。請記住在投入生產之前禁用所有此類調用。