Chrome Dev Tools : anzeigen alle Ereignis-Listener verwendet, die in die Seite

Ist es ein feature in chrome dev tools(oder eine beliebige Erweiterung), mit denen kann ich alle anzeigen der Ereignis-Listener verwendet, die auf eine bestimmte Seite/app.

Edit:

Es ist sicherlich nicht ein Duplikat dieser Frage : Wie kann ich anzeigen von Ereignissen ausgelöst, die auf ein element in Chrome DevTools?

Den obige Frage erklärt, wie Sie suchen für ein bestimmtes event, dass gefeuert wird, wenn wir die Interaktion mit unserer app ( ich bin mir bewusst, wie zu tun!).

Was ich bin auf der Suche nach ist die Liste aller Ereignisse, dass wir hören in der app und die DOM-Elemente an den Sie angeschlossen sind.

Kannst du nicht die source-panel: developer.chrome.com/devtools/docs/javascript-debugging?
VisualEvent - Visual-Ereignis eine Javascript-bookmarklet bietet debugging-Informationen über Ereignisse, die angebracht wurden, um DOM-Elemente. Visual Event zeigt: Welche Elemente haben die Ereignisse an Ihnen, Den Typ der Ereignisse, die an einem element, der code, Der ausgeführt werden soll, mit der ein Ereignis ausgelöst wird, wird Die Quelldatei und Zeilennummer, wo der angehängten Funktion definiert wurde (Webkit-Browser und Opera nur)
Vielen Dank für die Anregung, andreas. Ich versuchte es bereits. Wie es aussieht, nur nehmen Sie nur DOM level 0 und 1 Typ-Ereignisse und nicht-Ereignis-Listener.
Ist die Nutzung von jQuery eine option ?
EventSpy - Event-Spy ist eine Erweiterung für Google chrome, mit der Sie Spion auf die Ereignisse, die gehört in den code der Anwendung, diese können Sie einfach sezieren großen web-Anwendungen youtube.com/watch?v=Sl2LPQt1UPc
ich kann die jQuery-mit allen Mitteln...bitte vorschlagen..
Siehe stackoverflow.com/questions/24744967/... , stackoverflow.com/questions/26225987/...
Sie können nachlesen, wie dies zu tun in den DevTools docs hier developer.chrome.com/devtools/docs/....
Möglich, Duplikat der Wie kann ich anzeigen von Ereignissen ausgelöst, die auf ein element im Chrome-Web-Entwickler?
siehe mein edit.

InformationsquelleAutor bhavya_w | 2015-02-06

8

Chrome Devtool kann dies nicht für Sie. Aber Sie können überprüfen Sie die in Ihrer Konsole mit der API chrome gibt: getEventListeners

Setzen Sie einfach diesen code in Ihre dev-Konsole, können Sie die Bindung auf Veranstaltungen Zahl in Ihre Seite ein:
```
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
```
Wurde eine Menge auf die Bindung da. Definitiv nicht ein gutes Beispiel Projekt für die Leistung.

Wenn Sie sehen möchten, welche Ereignisse gebunden werden, in der alle Ihre Elemente in deine Seite und wie viele Hörer die einzelnen Veranstaltungen, setzen Sie einfach diesen Code in Ihren dev-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, die Sie bekommen können aus dieser API. Einfach improvisieren.
- Dies ist eine sehr nützliche Chrome-Dev-Console-snippet.
InformationsquelleAutor Mr.Raindrop
2

Chrome-Dev-Tools nicht korrekt anzeigen jQuery-added-Ereignis-Listener.

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

Suche nach event-Handler registriert mit jQuery kann schwierig sein. findHandlersJS macht das finden Sie einfach alles, was Sie brauchen, ist der event-Typ und einem jQuery-Selektor für Elemente, in denen die Ereignisse stammen könnte.

InformationsquelleAutor Qasim

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.