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.
{ }
Klicken Sie einfach auf das Symbol in der linken unteren Ecke, wenn Sie js anzeigen. Magie.Sie können den Chrome-Inspektor auch verwenden, um angehängte Ereignisse auf andere Weise zu finden:
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
quelle
Probieren Sie die jQuery Audit-Erweiterung ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ) nach der Installation wie folgt aus:
quelle
(Neu ab 2020) Für die Version Chrome Version 83.0.4103.61 :
Wählen Sie das Element aus, das Sie untersuchen möchten
Wählen Sie die Registerkarte Ereignis-Listener
Stellen Sie sicher, dass Sie die Framework-Listener überprüfen, um die echte Javascript-Datei anstelle der jquery-Funktion anzuzeigen.
quelle
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)
Wenn Sie schnell nach der #ID suchen, gelangen Sie schließlich zur Bindungsfunktion.
Beispiel: Wenn
#foo
Sie nach suchen , gelangen Sie zuquelle
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 )
Während $ 0 das ausgewählte Element im DOM ist.
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
quelle
findEventHandlers ist ein JQuery-Plugin. Der Rohcode ist hier: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js
Schritte
Fügen Sie den Rohcode direkt in die Chrome-Konsole ein (Hinweis: JQuery muss bereits geladen sein).
Verwenden Sie den folgenden Funktionsaufruf:
findEventHandlers(eventType, selector);
Suchen Sie den eventType-Handler des entsprechenden vom Selektor angegebenen Elements.
Beispiel :
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/
quelle
Für Chrome Version 52.0.2743.116:
Rufen Sie in den Entwicklertools von Chrome das Suchfeld auf, indem Sie auf
Ctrl
+Shift
+ klickenF
.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.
quelle