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.jsdrin (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.jsDatei 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 .

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.

1. Öffnen Sie die Chrome Dev Tools (F12) und wechseln Sie zur Registerkarte Quellen.
2. Drilldown zu Maus -> Klicken (zum Zoomen klicken)
   
   

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.

1. Drücken Sie die F11Taste (Step In), bis der gewünschte Quellcode angezeigt wird
2. Quellcode endlich erreicht
   • In dem oben angegebenen jsFiddle- Beispiel musste ich F11 108 Mal drücken, bevor ich den gewünschten Ereignishandler / die gewünschte Funktion erreichte
   • Ihr Kilometerstand kann variieren, abhängig von der Version von jQuery (oder der Framework-Bibliothek), die zum Binden der Ereignisse verwendet wird
   • Mit genügend Engagement und Zeit können Sie jeden Event-Handler / jede Event-Funktion finden

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:

    // ...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 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.

Lösung 1: Framework Blackboxing

Funktioniert großartig, minimales Setup und keine Dritten.

Laut der Dokumentation von Chrome :

Was passiert, wenn Sie ein Skript Blackboxen?

Vom Bibliothekscode ausgelöste Ausnahmen werden nicht angehalten (wenn Pause bei Ausnahmen aktiviert ist). Beim Ein- und Aussteigen / Übergehen wird der Bibliothekscode umgangen. Haltepunkte des Ereignis-Listeners brechen den Bibliothekscode nicht ein. Der Debugger pausiert nicht bei in der Bibliothek festgelegten Haltepunkten Code. Das Endergebnis ist, dass Sie Ihren Anwendungscode anstelle von Ressourcen von Drittanbietern debuggen .

1. Öffnen Sie die Chrome Developer Tools ( F12oder ⌘+ ⌥+ i) und gehen Sie zu den Einstellungen (oben rechts oder F1). Suchen Sie links eine Registerkarte mit dem Namen " Blackboxing ".

2. Hier legen Sie das RegEx- Muster der Dateien ab, die Chrome beim Debuggen ignorieren soll. Zum Beispiel: jquery\..*\.js(glob Muster / menschliche Übersetzung: jquery.*.js)
3. Wenn Sie Dateien mit mehreren Mustern überspringen möchten, können Sie sie mithilfe des Pipe-Zeichens hinzufügen |, 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.
4. Fahren Sie nun mit der unten beschriebenen Lösung 3 fort .

Bonus-Tipp! Ich verwende Regex101 regelmäßig (aber es gibt viele andere :) , um meine rostigen Regex-Muster schnell zu testen und herauszufinden, wo ich mit dem schrittweisen Regex-Debugger falsch liege. Wenn Sie reguläre Ausdrücke noch nicht "fließend" beherrschen, empfehle ich Ihnen, Websites zu verwenden, die Ihnen beim Schreiben und Visualisieren helfen, z. B. http://buildregex.com/ und https://www.debuggex.com/.

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 :

Visual Event ist ein Open-Source-Javascript-Lesezeichen, das Debugging-Informationen zu Ereignissen enthält, die an DOM-Elemente angehängt wurden. Visuelles Ereignis zeigt:

• Mit welchen Elementen sind Ereignisse verbunden?
• Die Art der Ereignisse, die an ein Element angehängt sind
• Der Code, der mit dem Ereignis ausgeführt wird, wird ausgelöst
• Die Quelldatei und die Zeilennummer, für die die angehängte Funktion definiert wurde (nur Webkit-Browser und Opera)

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.

1. Öffnen Sie die Registerkarte Dev Tools -> Sources und suchen Sie rechts Event Listener Breakpoints:

   

2. Erweitern Mouseund auswählenclick

3. Klicken Sie nun auf das Element (die Ausführung sollte pausieren), und Sie debuggen jetzt den Code. Sie können den gesamten Code durchgehen F11(dies ist Step in ). Oder gehen Sie ein paar Sprünge im Stapel zurück. Es kann eine Menge Sprünge geben

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 #enviooder 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 imgviele 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 .

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! :) :)

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:

• Element
  Das tatsächliche Element, in dem der Ereignishandler registriert wurde
• Veranstaltungen
  Array mit Informationen zu den jquery-Ereignishandlern für den Ereignistyp, an dem wir interessiert sind (z. B. Klicken, Ändern usw.)
• Handler
  Tatsächliche Event-Handler-Methode, die Sie sehen können, indem Sie mit der rechten Maustaste darauf klicken und Funktionsdefinition anzeigen auswählen
• Wähler
  Der Selektor für delegierte Ereignisse. Für direkte Ereignisse ist es leer.
• Ziele
  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 .

Diese Lösung benötigt die Datenmethode von jQuery .

1. Öffnen Sie die Chrome-Konsole (obwohl jeder Browser mit geladenem jQuery funktioniert).
2. Lauf $._data($(".example").get(0), "events")
3. Führen Sie einen Drilldown der Ausgabe durch, um den gewünschten Ereignishandler zu finden.
4. Klicken Sie mit der rechten Maustaste auf "Handler" und wählen Sie "Funktionsdefinition anzeigen".
5. Der Code wird auf der Registerkarte Quellen angezeigt

$._data()greift nur auf die Datenmethode von jQuery zu. Eine besser lesbare Alternative könnte sein jQuery._data().

Interessanter Punkt dieser SO-Antwort :

Ab jQuery 1.8 sind die Ereignisdaten nicht mehr über die "öffentliche API" für Daten verfügbar. Lesen Sie diesen jQuery-Blogbeitrag . Sie sollten dies jetzt stattdessen verwenden:

jQuery._data( elem, "events" ); elem sollte ein HTML-Element sein, kein jQuery-Objekt oder Selektor.

Bitte beachten Sie, dass dies eine interne, "private" Struktur ist und nicht geändert werden sollte. Verwenden Sie dies nur zum Debuggen.

In älteren Versionen von jQuery müssen Sie möglicherweise die alte Methode verwenden:

jQuery( elem ).data( "events" );

Eine versionunabhängige jQuery wäre: (jQuery._data || jQuery.data)(elem, 'events');