So finden Sie heraus, welcher Code von einer Schaltfläche oder einem Element in Chrome mithilfe der Entwicklertools ausgeführt wird

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 Schaltfläche klicken:

2) Ich überprüfe es, und das ist alles, was es ist: <img class="formSend" src="images/botoninscribirse2.png">

3) Oben im Quellcode gibt es jede Menge 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önnten Sie Folgendes finden: $(".formSend").click(function() { ... });, was durch die Schaltfläche ausgelöst wird (um eine ziemlich komplexe Formularvalidierung und -übermittlung durchzuführen) und was ich möchte, ist, dass ich das mit den Chrome Dev Tools auf jeder Website finden kann.

Wie kann ich herausfinden, wo das Element aufruft?

Die Registerkarte Listeners hat bei mir nicht funktioniert. Also habe ich versucht, die Klick-Ereignis-Listener zu suchen, was mir wie eine sichere Wette erschien, aber... es gibt kein jquery2.js darin (und ich wüsste nicht wirklich, welche Datei der Code ist, also würde ich Zeit damit verschwenden, all diese zu überprüfen...):

Meine $(".formSend").click(function() { ... }); Funktion in der Datei jquery2.js ist nicht vorhanden.

Jesse erklärt warum:

"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. jQuery's Funktion wiederum durchläuft einige Abstraktionsschichten und Überprüfungen, und irgendwo dort führt sie Ihre Funktion aus."

Wie von einigen von euch vorgeschlagen, habe ich die Methoden, die funktioniert haben, in einer Antwort weiter unten gesammelt.

Carles Alcolea
Bearbeitete Frage 20. November 2019 в 1:31
Programmierung
google-chrome javascript jquery google-chrome-devtools
5. Mai 2014 в 12:21
4 Aufrufe

Alexander Pawlow's Antwort kommt dem am nächsten, was Sie wollen.

Aufgrund des Umfangs der jQuery's Abstraktion und Funktionalität, eine Menge von Reifen haben, um zu springen, um das Fleisch des Ereignisses zu bekommen. Ich habe dieses [jsFiddle](http://jsfiddle.net/PEw7W/1/) eingerichtet, um die Arbeit zu demonstrieren.

1. Einrichten des Event Listener Breakpoints

Du warst nah dran an diesem Punkt.

  1. Öffnen Sie die Chrome Dev Tools (F12) und gehen Sie auf die Registerkarte Sources.
  2. Gehen Sie nach unten zu Maus -> Klick (zum Vergrößern klicken)

2. Klicken Sie auf die Schaltfläche!

Chrome Dev Tools unterbricht die Skriptausführung und präsentiert Ihnen dieses schöne Gewirr aus verkleinertem Code:

(zum Vergrößern klicken)

3. Finde den glorreichen Code!

Der Trick dabei ist, nicht zu sehr auf die Taste zu drücken und den Bildschirm im Auge zu behalten.

  1. Drücken Sie die Taste F11 (Step In) bis der gewünschte Quellcode erscheint
  2. Quellcode endlich erreicht
  • Im obigen Beispiel von [jsFiddle](http://jsfiddle.net/PEw7W/1/) musste ich F11 108 Mal drücken, bevor ich den gewünschten Event-Handler/die gewünschte Funktion erreichte
  • Je nach der Version von jQuery (oder der Framework-Bibliothek), die zum Binden der Ereignisse verwendet wird, können Ihre Erfahrungen variieren.
  • Mit genügend Engagement und Zeit können Sie jeden Ereignishandler/-funktion finden

4. Erläuterung

Ich habe keine genaue Antwort oder Erklärung dafür, warum jQuery die vielen Abstraktionsschichten durchläuft, die es durchläuft - ich kann nur vermuten, dass es an der Aufgabe liegt, seine Verwendung vom Browser, der den Code ausführt, zu verdrängen.

Hier ist ein [jsFiddle](http://jsfiddle.net/PEw7W/) mit einer Debug-Version von jQuery (d.h. nicht minifiziert). Wenn Sie sich den Code am ersten (nicht-minifizierten) Haltepunkt ansehen, können Sie erkennen, dass der Code viele Dinge verarbeitet:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

Der Grund, warum ich denke, dass Sie es bei Ihrem Versuch übersehen haben, als die "Ausführung pausiert und ich springe Zeile für Zeile", ist, dass Sie möglicherweise die "Step Over" Funktion verwendet haben, anstatt Step In. Hier ist eine StackOverflow-Antwort, in der die Unterschiede erklärt werden.

Schließlich ist der Grund, warum Ihre Funktion nicht direkt an den Click-Event-Handler gebunden ist, weil jQuery eine Funktion zurückgibt, die gebunden wird. jQuery's Funktion wiederum durchläuft einige Abstraktionsschichten und Prüfungen, und irgendwo dort führt sie Ihre Funktion aus.

Community
Bearbeitete Antwort 23. Mai 2017 в 12:10
Kommentare (9)

Klingt so, als ob der "...and I jump line by line..." Teil falsch ist. Machen Sie StepOver oder StepIn und sind Sie sicher, dass Sie nicht versehentlich den entsprechenden Aufruf verpassen?

Abgesehen davon kann das Debuggen von Frameworks aus genau diesem Grund mühsam sein. Um das Problem zu lindern, können Sie das Experiment "Enable frameworks debugging support" aktivieren. Viel Spaß beim Debuggen! :)

Kommentare (1)

Sie können [findHandlersJS](https://github.com/ruidfigueiredo/findHandlersJS) verwenden.

Sie können den Handler in der Chrome-Konsole finden:

findEventHandlers("click", "img.envio")

In der Konsole von Chrome erhalten Sie folgende Informationen:

  • Element Das eigentliche Element, in dem der Event-Handler registriert wurde in
  • Ereignisse Array mit Informationen über die Jquery-Ereignishandler für den Ereignistyp, an dem wir interessiert sind (z. B. Klick, Änderung usw.)
  • Handler Die eigentliche Event-Handler-Methode, die Sie sehen können, wenn Sie mit der rechten Maustaste darauf klicken und Funktionsdefinition anzeigen wählen
  • Selektor Der Selektor, der für delegierte Ereignisse bereitgestellt wird. Bei direkten Ereignissen ist er leer.
  • Ziele Liste mit den Elementen, auf die dieser Event-Handler abzielt. Bei einem delegierten Ereignishandler, der im Dokumentobjekt registriert ist und auf alle Schaltflächen auf einer Seite abzielt, listet diese Eigenschaft beispielsweise alle Schaltflächen auf der Seite auf. Sie können mit dem Mauszeiger über die Schaltflächen fahren und sie in Chrom hervorgehoben sehen.

Weitere Informationen finden Sie hier und Sie können es auf dieser Beispielseite hier ausprobieren.

Rui
Bearbeitete Antwort 6. Mai 2014 в 9:55
Kommentare (0)