Chrome開發工具：查看頁面中使用的所有事件監聽器

Question

是否有一個chrome開發工具（或任何擴展）的功能，通過它我可以查看某個頁面/應用程序上使用的所有事件監聽器。

編輯：
它肯定不是這個問題的重複：How do I view events fired on an element in Chrome DevTools?

上述問題的解釋瞭如何尋找當我們與我們的應用程序進行交互是被炒魷魚特定事件（我知道如何做到這一點！）。

我找什麼是所有我們正在收聽的應用程序和DOM它們連接到元素的事件的名單。

Answer 1

Chrome開發工具無法正確顯示jQuery添加的事件偵聽器。

這個庫似乎涵蓋此：https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

查找事件處理程序使用jQuery可能會非常棘手註冊。 findHandlersJS使查找變得容易，您只需要事件類型和事件可能來源的元素的jQuery選擇器。

Answer 2

Chrome Devtool無法爲您做到這一點。但隨着API鉻讓你可以檢查那些在您的控制檯：getEventListeners

只是把這個代碼在你的開發工具的控制檯，你可以在你的頁面中的所有綁定點擊事件數：

Array.from(document.querySelectorAll('*')) 
    .reduce(function(pre, dom){ 
    var clks = getEventListeners(dom).click; 
    pre += clks ? clks.length || 0 : 0; 
    return pre 
    }, 0) 

結果是這樣的：

3249 

那是一個很大的點擊綁定。絕對不是績效項目的好例子。

如果你想看到什麼事件都在你的頁面中所有的元素和多少每個事件的監聽器的綁定，只要把這些代碼在你的開發工具的控制檯：

Array.from(document.querySelectorAll('*')) 
    .reduce(function(pre, dom){ 
    var evtObj = getEventListeners(dom) 
    Object.keys(evtObj).forEach(function (evt) { 
     if (typeof pre[evt] === 'undefined') { 
     pre[evt] = 0 
     } 
     pre[evt] += evtObj[evt].length 
    }) 
    return pre 
    }, {}) 

結果是這樣的：

{ 
    touchstart: 6, 
    error: 2, 
    click: 3249, 
    longpress: 2997, 
    tap: 2997, 
    touchmove: 4, 
    touchend: 4, 
    touchcancel: 4, 
    load: 1 
} 

還有很多其他信息，你可以從這個API獲得。只是即興而已。