Wie finde ich heraus, wo der Ereignis-Listener hinzugefügt wird?

Ich habe eine ziemlich gute Javascript-Codebase (mit react / redux, aber keine jquery) für eine Webapp, die ich gerade erstelle, und mir ist aufgefallen, dass beim wiederholten Öffnen und Schließen eines bestimmten Panels in der Benutzeroberfläche die Anzahl von Laut Chrooms Performance-Timeline werden die Hörer immer größer.

Das Diagramm sieht folgendermaßen aus:

Ich habe den Leistungsmonitor des Chroms für ein oder zwei Minuten laufen lassen, während die Seite im Leerlauf war (kurz nach dem Öffnen / Schließen des Panels), in der Hoffnung, dass die Hörer Müll gesammelt bekommen, aber nicht. Ich habe während dieses Prozesses zu anderen Tabs gewechselt und hoffe auch, dass die Hörer Müll gesammelt bekommen, wenn der Tab im Hintergrund ist, aber leider nicht.

Ich vermute daher, dass einige Listener registriert werden, die nie nicht registriert werden.

Dies führt mich zu zwei Hauptfragen:

1. Ist meine Hypothese, dass Zuhörer hinzugefügt werden und nie? Ungebunden scheint vernünftig zu sein, oder kann ich mehr tun, um dies zu bestätigen? dieser Verdacht?
2. Angenommen mein Verdacht ist richtig, wie kann ich am besten gehen über das Verfolgen des Codes, in dem sich die Ereignis-Listener befinden hinzugefügt werden? Ich habe bereits folgendes versucht:
   • Der Code, der dafür zuständig ist, das fragliche Panel zu öffnen, zu sehen, wo es Listener hinzufügt, und diese Teile auskommentiert, um zu sehen, ob sich das Performance-Diagramm ändert. Es gibt keine Änderung.
   • Überschreibe den addEventListener-Prototyp wie folgt:

Auch nach dem Auskommentieren aller Code-Teile, die dazu führen, dass diese console.trace ausgeführt wird (siehe # 1), so dass die console.trace nicht mehr beim Öffnen / Schließen des Panels gedruckt wird, bemerke ich dasselbe Erhöhen Sie die Anzahl der Listener im Leistungsdiagramm. Etwas anderes bewirkt, dass die Zuhörer zunehmen. Ich verstehe, dass es andere Möglichkeiten gibt, Listener hinzuzufügen, aber mir ist nicht klar, wie man all diese Möglichkeiten abfängt oder sie im Debugger von Chrome so einloggt, dass ich weiß, welcher Code dafür verantwortlich ist .

Bearbeiten :  - Auf den Vorschlag von Cowbert in den Kommentaren habe ich diese Seite angeschaut: Ссылка

Ich habe dann folgende Funktion ausgeführt:

Ich führe diese Funktion aus, nachdem ich das Panel einige Male geöffnet / geschlossen habe, aber die Zahl "numListeners" ändert sich nicht. Wenn sich die numListeners-Zahl ändert, wäre ich in der Lage, die Ergebnisse vor / nach dem Öffnen / Schließen des Panels zu vergleichen, um herauszufinden, welches Element hat den zusätzlichen Ereignis-Listener registriert, aber numListeners ändert sich leider nicht.

Es gibt auch eine monitorEvents () API, die auf Ссылка beschrieben ist, aber die Funktion Aufruf erfordert, dass Sie ein DOM-Element angeben, das Sie überwachen möchten. In dieser Situation bin ich mir nicht sicher, welches DOM-Element das Extra hat Ich bin mir nicht sicher, wie der Aufruf von monitorEvents () mir wirklich helfen wird. Ich könnte es an alle DOM-Elemente anhängen, ähnlich wie ich es getan habe geschrieben die printListenerCount Funktion oben, aber ich nehme an, ich würde auf ein ähnliches Problem stoßen, dass ich mit printListenerCount () - Aus welchem ​​Grund auch immer, es handelt sich nicht um die fraglichen Zuhörer.

Weitere Anmerkungen: Dies ist eine etwas komplizierte reaktive (vorwirkende, technisch) basierte Anwendung. Wie die meisten reactjs-basierten Apps werden Komponenten im laufenden Betrieb eingehängt / ausgehängt (in das DOM eingefügt und daraus entfernt). Ich finde, dass dies "streunende Event-Handler-Registrierungen" wie dieses ein bisschen schwierig ausfindig zu machen. Also, was ich wirklich hoffe, ist ein allgemeiner Debugging-Ratschlag, wie man "Stray Event Handler" in großen / komplexen Projekten wie diesem ausfindig macht. Als C-Programmierer würde ich gdb öffnen und einen Haltepunkt für alles setzen, was die "Listeners" -Nummer im Leistungsdiagramm möglicherweise erhöhen könnte. Ich bin mir nicht sicher, ob es ein Analogon in der JavaScript-Welt gibt, und selbst wenn es dort ist, bin ich mir einfach nicht sicher, wie ich es machen soll. Jeder Rat würde sehr geschätzt werden!