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

148

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.

FMaz008
quelle

Antworten:

138

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

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

Ionuț G. Stan
quelle
10
Näher dran, aber die meisten Ergebnisse zeigen auf die Zeile 16 von ... jquery.min.js :( (Ich verstehe warum, keine Notwendigkeit zu erklären, aber wie können wir herausfinden, wer die bind () -Methode von aufgerufen hat jQuery?
FMaz008
Diese Tools sind auch in Chrome 12.0.742.100 verfügbar. :) Vielen Dank !
FMaz008
13
@Fluffy: Das musst du nicht. { }Klicken Sie einfach auf das Symbol in der linken unteren Ecke, wenn Sie js anzeigen. Magie.
Hannes Schneidermayer
Das Durchlaufen des komplexen Ereignis-Dispatching-Codes von jQuery ist ein großer Schmerz. Die Antwort auf jQuery Audit unten ( stackoverflow.com/a/30487583/24267 ) ist viel besser.
Mhenry1384
3
Um jquery vom Aufrufstapel auszuschließen, Blackbox das Skript: developer.chrome.com/devtools/docs/blackboxing @ IonuțG.Stan oder Mods, können Sie die Antwort mit einem Verweis auf Blackboxing aktualisieren - scheint eine häufige Frage zu sein relevant für diese Antwort.
Chris Hynes
47

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

'Funktionsdefinition anzeigen'

Matty J.
quelle
zwei Jahre alt und immer noch die beste Antwort auf diese Frage.
Stuart
16

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
Javier Armendariz
quelle
1
Dies ist eine hervorragende Erweiterung und spart viel Zeit beim Durchsuchen von JavaScript.
Neil Monroe
Ich stelle häufig fest, dass "Ereignis-Listener" "Keine Ereignis-Listener" auflistet und dass die Auswahl von "Ereignis-Listener-Haltepunkten"> Maus> Klicken keinen Haltepunkt erstellt. Dieses Plugin funktioniert sehr gut.
StuartN
@ Javier> es ist eine tolle Antwort. Funktioniert es für einen Javascript-Mecanisme (nicht jQuery)?
Mahefa
11

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

Chrome Developer Tools - Ereignis-Listener

  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.

Lovelyramos
quelle
6

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'); })

Geben Sie hier die Bildbeschreibung ein

Michael Jasper
quelle
4
Netter Start, aber was ist, wenn ich 1500 Verweise auf #foo habe, von denen die meisten nichts binden, oder wenn ich mehrere # foo-IDs in externen Skripten habe, die im vorliegenden Fall nicht ausgelöst werden?
FMaz008
Gute Frage. Nach meiner Erfahrung beginnt dort normalerweise der menschliche Debugging-Prozess :)
Michael Jasper
1
Hehe, du hast recht, aber meine Frage war auch, was ich als Mensch tun muss: p
FMaz008
6

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

Geben Sie hier die Bildbeschreibung ein

Kris Hollenbeck
quelle
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/

unifreak
quelle
3

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.

Ghost Echo
quelle