Verwenden von Chrome, um herauszufinden, an welche Ereignisse ein Element gebunden ist

Nehmen wir an, ich habe einen Link auf meiner Seite:

<a href="#" id="foo">Click Here</a>

Ich weiß nichts anderes, aber wenn ich auf den Link klicke, wird ein alert("bar")angezeigt. Ich weiß also, dass irgendwo Code gebunden wird #foo.

Wie finde ich den Code, der das alert("bar")an das Klickereignis bindet ? Ich suche nach einer Lösung mit Chrome.

Ps.: Das Beispiel ist fiktiv, daher suche ich nicht nach einer Lösung wie: "Verwenden Sie XXXXXX und durchsuchen Sie das gesamte Projekt nach" alert ("bar") ". Ich möchte eine echte Debugging- / Tracing-Lösung.

Verwenden von Chrome 15.0.865.0 dev . Es gibt einen Abschnitt "Ereignis-Listener" im Elementfenster:

Und ein "Event Listeners Breakpoints" im Skriptfenster. Verwenden Sie eine Maus -> klicken Sie auf Haltepunkt und "Schritt in den nächsten Funktionsaufruf", während Sie den Aufrufstapel im Auge behalten, um zu sehen, welche Userland-Funktion das Ereignis behandelt. Idealerweise würde man die verkleinerte Version von jQuery mit einem unminified ersetzen , so dass Sie nicht zu tun haben , in Schritt der ganzen Zeit, und die Verwendung Schritt über , wenn möglich.

Sie können den Chrome-Inspektor auch verwenden, um angehängte Ereignisse auf andere Weise zu finden:

1. Klicken Sie mit der rechten Maustaste auf das zu inspizierende Element oder suchen Sie es im Bereich "Elemente".
2. Erweitern Sie dann auf der Registerkarte / im Bereich "Ereignis-Listener" das Ereignis (z. B. "Klicken").
3. Erweitern Sie die verschiedenen Unterknoten, um den gewünschten Unterknoten zu finden, und suchen Sie dann, wo sich der Unterknoten "Handler" befindet.
4. Klicken Sie mit der rechten Maustaste auf das Wort "Funktion" und klicken Sie dann auf "Funktionsdefinition anzeigen".

Hiermit gelangen Sie dorthin, wo der Handler definiert wurde, wie im folgenden Bild gezeigt und von Paul Irish hier erläutert: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Probieren Sie die jQuery Audit-Erweiterung ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ) nach der Installation wie folgt aus:

1. Überprüfen Sie das Element
2. Erweitern Sie auf der neuen Registerkarte " jQuery Audit " die Eigenschaft "Ereignisse"
3. Wählen Sie für das Ereignis, das Sie benötigen
4. Klicken Sie in der Handler-Eigenschaft mit der rechten Maustaste auf die Funktion und wählen Sie " Funktionsdefinition anzeigen ".
5. Sie sehen nun den Ereignisbindungscode
6. Klicken Sie auf die Schaltfläche " Hübscher Druck ", um eine besser lesbare Ansicht des Codes zu erhalten

(Neu ab 2020) Für die Version Chrome Version 83.0.4103.61 :

1. Wählen Sie das Element aus, das Sie untersuchen möchten

2. Wählen Sie die Registerkarte Ereignis-Listener

3. Stellen Sie sicher, dass Sie die Framework-Listener überprüfen, um die echte Javascript-Datei anstelle der jquery-Funktion anzuzeigen.

Bearbeiten : Anstelle meiner eigenen Antwort ist diese sehr gut: So debuggen Sie JavaScript / jQuery-Ereignisbindungen mit Firebug (oder einem ähnlichen Tool)

Die Google Chromes-Entwicklertools verfügen über eine Suchfunktion, die in den Skriptbereich integriert ist

Wenn Sie mit diesem Tool nicht vertraut sind: (nur für den Fall)

• Rechtsklick irgendwo auf einer Seite (in Chrom)
• Klicken Sie auf "Element untersuchen".
• Klicken Sie auf die Registerkarte "Skripte"
• Suchleiste oben rechts

Wenn Sie schnell nach der #ID suchen, gelangen Sie schließlich zur Bindungsfunktion.

Beispiel: Wenn #fooSie nach suchen , gelangen Sie zu

$('#foo').click(function(){ alert('bar'); })

Update 2018 - Könnte für zukünftige Leser hilfreich sein:

Ich bin mir nicht sicher, wann dies ursprünglich in Chrome eingeführt wurde. Eine andere (einfache) Möglichkeit, dies jetzt in Chrome zu tun, sind Konsolenbefehle.

Zum Beispiel: ( in Chromkonsolentyp )

getEventListeners($0)

Während $ 0 das ausgewählte Element im DOM ist.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

findEventHandlers ist ein JQuery-Plugin. Der Rohcode ist hier: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

Schritte

1. Fügen Sie den Rohcode direkt in die Chrome-Konsole ein (Hinweis: JQuery muss bereits geladen sein).

2. Verwenden Sie den folgenden Funktionsaufruf: findEventHandlers(eventType, selector);
   Suchen Sie den eventType-Handler des entsprechenden vom Selektor angegebenen Elements.

Beispiel :

findEventHandlers("click", "#clickThis");

Wenn vorhanden, wird der verfügbare Ereignishandler unten angezeigt. Sie müssen ihn erweitern, um den Handler zu finden. Klicken Sie mit der rechten Maustaste auf die Funktion und wählen Sie sie aus show function definition

Siehe: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Für Chrome Version 52.0.2743.116:

1. Rufen Sie in den Entwicklertools von Chrome das Suchfeld auf, indem Sie auf Ctrl+ Shift+ klicken F.

2. Geben Sie den Namen des Elements ein, das Sie suchen.

Die Ergebnisse für gebundene Elemente sollten im Bedienfeld angezeigt werden und die Datei angeben, in der sie sich befinden.