Ich verwende Chrome und meine eigene Website.
Was ich von innen weiß:
1 ) Ich habe ein Formular, in dem sich Leute anmelden, indem sie auf diese orangefarbene Bildschaltfläche klicken:
2 ) Ich inspiziere es und das ist alles was es ist:
<img class="formSend" src="images/botoninscribirse2.png">
3 ) Am Anfang des Quellcodes befinden sich unzählige Skriptquellen. Ich weiß, welches die Schaltfläche aufruft, weil ich es codiert habe:<script src="js/jquery2.js" type="text/javascript"></script>
4 ) In dieser Datei können Sie Folgendes finden: $(".formSend").click(function() { ... });
Was wird durch die Schaltfläche ausgelöst (um eine ziemlich komplexe Formularvalidierung durchzuführen und zu senden), und was ich möchte, ist, dass Sie dies mithilfe von Chrome Dev-Tools auf jeder Website finden können.
Wie kann ich herausfinden, wo das Element aufgerufen wird?
Der Listener-Tab hat bei mir nicht funktioniert. Also habe ich versucht, die Listener für Klickereignisse zu suchen, was mir sicher erschien, aber ... da ist keine jquery2.js
drin (und ich würde nicht wirklich wissen, welche Datei der Code ist, also würde ich Zeit damit verschwenden, all diese zu überprüfen. .):
Meine $(".formSend").click(function() { ... });
Funktion innerhalb der jquery2.js
Datei ist nicht vorhanden.
Jesse erklärt warum :
"Schließlich ist der Grund, warum Ihre Funktion nicht direkt an den Click-Event-Handler gebunden ist, der, dass jQuery eine Funktion zurückgibt, die gebunden wird. Die Funktion von jQuery durchläuft wiederum einige Abstraktionsebenen und prüft sie und führt irgendwo dort Ihre Funktion aus . "
Wie von einigen von Ihnen vorgeschlagen, habe ich die Methoden gesammelt, die in einer Antwort unten funktioniert haben .
quelle
Visual Event
Lesezeichen. Es erkennt Klickereignisse, die an gängige Bibliotheken gebunden sind, und erstellt eine Überlagerung der Site, die zeigt, wo Ereignisse gebunden sind, und gibt Codebeispiele und Quellspeicherorte für jedes Ereignis an.Antworten:
Die Antwort von Alexander Pawlow kommt dem, was Sie wollen, am nächsten.
Aufgrund der umfangreichen Abstraktion und Funktionalität von jQuery müssen viele Rahmen gesprungen werden, um zum Kern des Ereignisses zu gelangen. Ich habe diese jsFiddle eingerichtet , um die Arbeit zu demonstrieren.
1. Einrichten des Ereignislistener-Haltepunkts
Du warst in dieser Sache nah dran.
2. Klicken Sie auf die Schaltfläche!
Chrome Dev Tools unterbricht die Skriptausführung und präsentiert Ihnen diese schöne Verstrickung von minimiertem Code:
(Klicken zum Vergrößern)
3. Finden Sie den herrlichen Code!
Der Trick hier besteht nun darin, sich nicht durch Drücken der Taste mitreißen zu lassen und den Bildschirm im Auge zu behalten.
4. Erklärung
Ich habe keine genaue Antwort oder Erklärung, warum jQuery die vielen Abstraktionsebenen durchläuft - alles, was ich vorschlagen kann, ist, dass es an der Aufgabe liegt, seine Verwendung vom Browser zu abstrahieren, der den Code ausführt .
Hier ist eine jsFiddle mit einer Debug-Version von jQuery (dh nicht minimiert). Wenn Sie sich den Code am ersten (nicht minimierten) Haltepunkt ansehen, sehen Sie, dass der Code viele Dinge behandelt:
Der Grund, warum ich denke, dass Sie es bei Ihrem Versuch verpasst haben, wenn die " Ausführung pausiert und ich Zeile für Zeile springe ", ist, dass Sie möglicherweise die Funktion "Step Over" anstelle von "Step In" verwendet haben. Hier ist eine StackOverflow-Antwort , die die Unterschiede erklärt.
Der Grund, warum Ihre Funktion nicht direkt an den Click-Event-Handler gebunden ist, liegt darin, dass jQuery eine Funktion zurückgibt, die gebunden wird. Die Funktion von jQuery durchläuft wiederum einige Abstraktionsebenen und prüft sie und führt irgendwo dort Ihre Funktion aus.
quelle
F11
wichtige Treffer! Jetzt macht es Sinn, aber es ist einfach unpraktisch. Ich werde meine Frage jedoch korrigieren.Lösung 1: Framework Blackboxing
Funktioniert großartig, minimales Setup und keine Dritten.
Laut der Dokumentation von Chrome :
Hier ist der aktualisierte Workflow:jquery\..*\.js
(glob Muster / menschliche Übersetzung:jquery.*.js
)|
, z. B.:jquery\..*\.js|include\.postload\.js
(Das sozusagen wie ein "oder dieses Muster" wirkt. Oder fügen Sie sie mit der Schaltfläche "Hinzufügen" hinzu.Sie können das Kontextmenü auch verwenden, wenn Sie im Quellenbedienfeld arbeiten. Wenn Sie eine Datei anzeigen, können Sie mit der rechten Maustaste in den Editor klicken und Blackbox-Skript auswählen. Dadurch wird die Datei zur Liste im Einstellungsfenster hinzugefügt:
Lösung 2: Visuelles Ereignis
Es ist ein ausgezeichnetes Werkzeug, um :
Lösung 3: Debuggen
Sie können den Code anhalten, wenn Sie auf eine beliebige Stelle auf der Seite klicken oder wenn das DOM geändert wird ... und andere Arten von JS-Haltepunkten , die Sie kennen sollten. Sie sollten hier Blackboxing anwenden , um einen Albtraum zu vermeiden.
In diesem Fall möchte ich wissen, was genau passiert, wenn ich auf die Schaltfläche klicke.
Öffnen Sie die Registerkarte Dev Tools -> Sources und suchen Sie rechts
Event Listener Breakpoints
:Erweitern
Mouse
und auswählenclick
Lösung 4: Angelschlüsselwörter
Wenn Dev Tools aktiviert ist, können Sie die gesamte Codebasis (den gesamten Code in allen Dateien) mit ⌘+ ⌥+ Foder: durchsuchen.
und das Suchen
#envio
oder was auch immer das Tag / die Klasse / die ID ist, von der Sie denken, dass sie die Party startet, und Sie können schneller als erwartet irgendwohin gelangen.Beachten Sie, dass manchmal nicht nur
img
viele Elemente gestapelt sind und Sie möglicherweise nicht wissen, welches den Code auslöst.Wenn dies etwas außerhalb Ihres Wissens liegt, lesen Sie das Chrome-Tutorial zum Debuggen .
quelle
Klingt so, als ob der Teil "... und ich springe Zeile für Zeile ..." falsch ist. Haben Sie StepOver oder StepIn und sind Sie sicher, dass Sie den entsprechenden Anruf nicht versehentlich verpassen?
Das Debuggen von Frameworks kann jedoch genau aus diesem Grund mühsam sein. Um das Problem zu beheben, können Sie das Experiment "Framework-Debugging-Unterstützung aktivieren" aktivieren . Viel Spaß beim Debuggen! :) :)
quelle
Sie können findHandlersJS verwenden
Sie finden den Handler in der Chrome-Konsole:
findEventHandlers("click", "img.envio")
Die folgenden Informationen werden in der Chrome-Konsole gedruckt:
Das tatsächliche Element, in dem der Ereignishandler registriert wurde
Array mit Informationen zu den jquery-Ereignishandlern für den Ereignistyp, an dem wir interessiert sind (z. B. Klicken, Ändern usw.)
Tatsächliche Event-Handler-Methode, die Sie sehen können, indem Sie mit der rechten Maustaste darauf klicken und Funktionsdefinition anzeigen auswählen
Der Selektor für delegierte Ereignisse. Für direkte Ereignisse ist es leer.
Liste mit den Elementen, auf die dieser Ereignishandler abzielt. Beispielsweise listet diese Eigenschaft für einen delegierten Ereignishandler, der im Dokumentobjekt registriert ist und auf alle Schaltflächen auf einer Seite abzielt, alle Schaltflächen auf der Seite auf. Sie können mit der Maus darüber fahren und sie in Chrom hervorheben.
Weitere Informationen hier und Sie können es in dieser Beispielseite hier versuchen .
quelle
Diese Lösung benötigt die Datenmethode von jQuery .
$._data($(".example").get(0), "events")
$._data()
greift nur auf die Datenmethode von jQuery zu. Eine besser lesbare Alternative könnte seinjQuery._data()
.Interessanter Punkt dieser SO-Antwort :
Eine versionunabhängige jQuery wäre:
(jQuery._data || jQuery.data)(elem, 'events');
quelle