Chrome-Entwicklungstools: Alle auf der Seite verwendeten Ereignislistener anzeigen

Question

Gibt es eine Funktion in den Chrome-Entwicklungstools (oder jeder Erweiterung), mit der ich alle Ereignislistener anzeigen kann, die auf einer bestimmten Seite/App verwendet werden.

Edit:
Seine sicherlich kein Duplikat dieser Frage: How do I view events fired on an element in Chrome DevTools?

Die obige Frage erklärt, wie für ein bestimmtes Ereignis suchen, wird ausgelöst, wenn wir mit unserer App interagieren (Ich bin mir bewusst wie man das macht!).

Was ich für bin auf der Suche ist die Liste aller Ereignisse, die wir in der App hören und die DOM-Elemente, die sie gebunden sind.

Answer 1

Chrome Dev-Tools zeigen jQuery-hinzugefügte Event-Listener nicht ordnungsgemäß an.

Diese Bibliothek scheint dies zu decken: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Suche nach Event-Handler mit jQuery registriert kann tückisch sein. Mit findHandlersJS können Sie sie einfach finden. Sie benötigen lediglich den Ereignistyp und einen jQuery-Selektor für die Elemente, von denen die Ereignisse stammen können.

Answer 2

Das Chrome Devtool kann das nicht für Sie tun. Aber Sie können die in der Konsole überprüfen mit der API-Chrom gibt: getEventListeners

einfach diesen Code setzen in Ihrem Entwickler-Tool-Konsole können Sie alle verbindlichen Klickereignisse Nummer in Ihrer Seite erhalten:

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

Das Ergebnis ist wie folgt:

3249 

Das war eine Menge Klickbindung dort. Definitiv kein gutes Beispiel für ein Performance-Projekt.

Wenn Sie sehen, welche Ereignisse in alle Elemente auf Ihrer Seite und wie viele der Zuhörer jedes der Ereignisse gebunden sind, stellen nur diese Codes in Ihrem dev-Tool Konsole:

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 
    }, {}) 

Das Ergebnis ist wie folgt:

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

Und so viele andere Informationen können Sie von dieser API erhalten. Improvisiere einfach.