Wie man herausfindet, welcher Code von einer Schaltfläche oder einem Element in Chrome mithilfe der Entwicklertools ausgeführt wird

Question

Ich benutze Chrome und meine eigene Website.

Was ich von innen weiß:

1) Ich habe ein Formular, in dem sich Leute anmelden, indem sie auf diesen orangefarbenen Bild-Button klicken:

2) Ich inspiziere es, und das ist alles, was es ist: ![](images/botoninscribirse2.png)

3) Oben im Quellcode gibt es tonnenweise Skriptquellen. Ich weiß, welche vom Button aufgerufen wird, weil ich es kodiert habe:

4) Innerhalb dieser Datei könntest du finden: $(".formSend").click(function() { ... });, das ist das, was durch den Button ausgelöst wird (um eine ziemlich komplexe Formularvalidierung durchzuführen und zu senden) und was ich möchte, ist in der Lage sein, das zu finden, indem ich die Chrome-Entwicklertools auf jeder Website nutze.

Wie kann ich herausfinden, wo das Element aufgerufen wird?

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

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

Jesse erklärt warum:

"Schließlich ist der Grund, warum deine Funktion nicht direkt an den Klickereignis-Handler gebunden ist, weil jQuery eine Funktion zurückgibt, die gebunden wird. Die Funktion von jQuery durchläuft wiederum einige Abstraktionsschichten und Prüfungen, und irgendwo in diesem Prozess wird deine Funktion ausgeführt."

---

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

Answer 1

Antwort von Alexander Pavlov kommt dem, was Sie wollen, am nächsten.

Aufgrund der Umfangreicheit der Abstraktion und Funktionalität von jQuery müssen viele Hürden genommen werden, um zum Kern des Ereignisses zu gelangen. Ich habe dieses jsFiddle eingerichtet, um die Arbeit zu demonstrieren.

---

1. Einrichten des Event Listener Breakpoints

Du warst hier nah dran.

1. Öffnen Sie die Chrome Dev Tools (F12) und gehen Sie zum Tab Quellen.
2. Bohren Sie nach unten zu Maus -> Klick
   
   (klicken, um zu vergrößern)

---

2. Klicken Sie auf die Schaltfläche!

Die Chrome Dev Tools werden die Skriptausführung anhalten und Ihnen diesen wunderschönen Wirrwarr aus minifiziertem Code präsentieren:

(klicken, um zu vergrößern)

---

3. Finden Sie den herrlichen Code!

Der Trick hier ist, sich nicht davon hinreißen zu lassen, die Taste zu drücken, und auf dem Bildschirm ein Auge zu behalten.

1. Drücken Sie die F11-Taste (Schritt eingeben), bis der gewünschte Quellcode angezeigt wird.
2. Quellcode endlich erreicht
   • In der oben bereitgestellten jsFiddle-Beispiel musste ich F11 108 Mal drücken, bevor ich den gewünschten Ereignisbehandler/Funktion erreichte.
   • Ihr Verbrauch kann variieren, abhängig von der Version von jQuery (oder Framework-Bibliothek), die zum Binden der Ereignisse verwendet wird.
   • Mit genug Hingabe und Zeit können Sie jeden Ereignisbehandler/Funktion finden.

---

4. Erklärung

Ich habe nicht die genaue Antwort oder Erklärung, warum jQuery durch die vielen Abstraktionsebenen geht, die es durchläuft - alles was ich vorschlagen kann ist, dass es aufgrund der Arbeit ist, die es tut, um seine Verwendung vom Browser, der den Code ausführt, zu abstrahieren.

Hier ist ein jsFiddle mit einer Debug-Version von jQuery (d.h. nicht minifiziert). Wenn Sie den Code am ersten (nicht minifizierten) Breakpoint betrachten, sehen Sie, dass der Code viele Dinge behandelt:

    // ...ausschneiden...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Verwerfen des zweiten Ereignisses von jQuery.event.trigger() und
            // wenn ein Ereignis auftritt, nachdem eine Seite entladen wurde
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...ausschneiden...

Der Grund, warum ich denke, dass Sie es bei Ihrem Versuch verpasst haben, wenn die "Ausführung anhält und ich Zeile für Zeile überspringe", ist, dass Sie möglicherweise die "Schritt über" -Funktion anstatt von Schritt eingeben verwendet haben. Hier ist eine StackOverflow-Antwort, die die Unterschiede erklärt.

Zuletzt, der Grund, warum Ihre Funktion nicht direkt an den Klick-Ereignisbehandler gebunden ist, liegt daran, dass jQuery eine Funktion zurückgibt, die gebunden wird. Die Funktion von jQuery wiederum durchläuft einige Abstraktionsebenen und Prüfungen und ielleicht wird irgendwo dort Ihre Funktion ausgeführt.

Answer 2

Lösung 1: Ignorieren Liste (früher "Blackbox")

Funktioniert super, minimales Setup und keine Drittanbieter. Die Dokumentation sagt:

Wenn Sie mit dem Source-Panel von Chrome DevTools durch Code schrittweise gehen, bleiben Sie manchmal bei Code stehen, den Sie nicht erkennen. Sie sind wahrscheinlich bei dem Code einer der Chrome-Erweiterungen, die Sie installiert haben. Um nie bei Erweiterungscode anzuhalten, verwenden Sie Ignore List.

Hier ist der aktualisierte Workflow:

1. Öffnen Sie Chrome Developer Tools (F12 oder ++i), gehen Sie zu den Einstellungen (oben rechts oder F1). Wählen Sie die Seite/Tab im linken Navigationsbereich mit dem Namen "Ignore List"
   • Sie möchten möglicherweise Inhaltskripte zur Ignore List hinzufügen aktivieren, wenn Sie zu viel Rauschen im Debugger sehen.

2. Hier geben Sie das RegEx-Muster der Dateien ein, die Sie möchten, dass Chrome sie beim Debuggen ignoriert. Zum Beispiel: jquery\..*\.js (Glob-Muster/menschliche Übersetzung: jquery.*.js)
3. Wenn Sie Dateien mit mehreren Mustern überspringen möchten, können Sie sie mit dem senkrechten Strich, |, wie folgt hinzufügen: jquery\..*\.js|include\.postload\.js (was wie ein "oder dieses Muster" wirkt, sozusagen. Oder fügen Sie sie mit der "Hinzufügen"-Schaltfläche hinzu.
4. Fahren Sie jetzt mit Lösung 3 weiter unten fort.

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

Sie können auch das Kontextmenü verwenden, wenn Sie im Source-Panel arbeiten. Beim Anzeigen einer Datei können Sie mit der rechten Maustaste auf den Editor klicken und Ignore List auswählen. Dadurch wird die Datei der Liste im Einstellungen-Panel hinzugefügt:

Lösung 2: Visual Event

Es ist ein ausgezeichnetes Werkzeug zu haben:

Visual Event ist ein Open-Source-Javascript-Bookmarklet, das Debug-Informationen zu Ereignissen bereitstellt, die an DOM-Elemente angefügt wurden. Visual Event zeigt:

• An welche Elemente Ereignisse angefügt wurden
• Den Typ der Ereignisse, die einem Element angefügt wurden
• Den Code, der ausgeführt wird, wenn das Ereignis ausgelöst wird
• Die Quelldatei und die Zeilennummer, an der die angefügte Funktion definiert wurde (nur in Webkit-Browsern und Opera)

Lösung 3: Debugging

Sie können den Code anhalten, wenn Sie irgendwo auf der Seite klicken, oder wenn der DOM geändert wird... und andere Arten von JS-Breakpoints, die nützlich zu wissen sind. Sie sollten hier Blackboxing anwenden, um Albträume zu vermeiden.

In diesem Fall möchte ich genau wissen, was passiert, wenn ich auf die Schaltfläche klicke.

1. Öffnen Sie Dev Tools -> Quellen-Tab, und auf der rechten Seite finden Sie Ereignislistener-Breakpoints:

   

2. Erweitern Sie Mouse und wählen Sie click

3. Klicken Sie nun auf das Element (die Ausführung sollte angehalten werden), und Sie debuggen jetzt den Code. Sie können den gesamten Code durchgehen, indem Sie F11 drücken (was Weiter einsteigen ist). Oder gehen Sie einige Sprünge im Stack zurück. Es kann eine Menge Sprünge geben.

Lösung 4: Stichwortfischerei

Mit Dev-Tools aktiviert, können Sie den gesamten Codebestand (den gesamten Code in allen Dateien) mit ++F durchsuchen oder:

und suchen nach #envio oder was auch immer das Tag/Klasse/ID ist, von dem Sie denken, dass es die Party beginnt, und Sie könnten schneller als erwartet irgendwohin gelangen.

Beachten Sie, dass manchmal nicht nur ein img sondern viele Elemente gestapelt sind, und Sie möglicherweise nicht wissen, welches davon den Code auslöst.

Wenn dies ein wenig über Ihren Kenntnisstand hinausgeht, schauen Sie sich das Tutorial von Chrome zum Debuggen an.

Answer 3

Klingt so, als ob der "... und ich springe Zeile für Zeile..." Teil falsch ist. Führst du StepOver oder StepIn aus und bist du sicher, dass du den relevanten Aufruf nicht versehentlich verpasst?

Davon abgesehen kann das Debuggen von Frameworks aus genau diesem Grund mühsam sein. Um das Problem zu lindern, kannst du das Experiment "Frameworks-Debugging-Unterstützung aktivieren" aktivieren. Fröhliches Debuggen! :)

Answer 4

Sie können findHandlersJS verwenden

Sie können den Handler finden, indem Sie in der Chrome-Konsole Folgendes eingeben:

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

Sie erhalten die folgenden Informationen in der Chrome-Konsole gedruckt:

• element
  Das tatsächliche Element, in dem der Event-Handler registriert wurde
• Ereignisse
  Array mit Informationen über die jQuery Event-Handler für den interessierenden Ereignistyp (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
• Selektor
  Der für delegierte Ereignisse bereitgestellte Selector. Er wird für direkte Ereignisse leer sein.
• Ziele
  Liste mit den Elementen, die von diesem Event-Handler angesprochen werden. Zum Beispiel für einen delegierten Event-Handler, der im Dokumentobjekt registriert ist und alle Schaltflächen auf einer Seite anzielt, listet diese Eigenschaft alle Schaltflächen auf der Seite auf. Sie können mit der Maus darüberfahren und sie in Chrome hervorgehoben sehen.

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

Answer 5

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

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

$._data() greift einfach auf die jQuery-Datenmethode zu. Eine lesbarere Alternative wäre jQuery._data().

Interessanter Punkt von dieser SO-Antwort:

Ab jQuery 1.8 ist die Event-Daten nicht mehr über die "öffentliche API" abrufbar. Lesen Sie diesen jQuery-Blog-Beitrag. Verwenden Sie stattdessen jetzt Folgendes:

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

Beachten Sie bitte, dass dies eine interne, 'private' Struktur ist und nicht verändert werden sollte. Verwenden Sie dies nur zu Debugging-Zwecken.

In älteren Versionen von jQuery könnten Sie noch die alte Methode verwenden, welche lautet:

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

Ein versionsunabhängiges jQuery wäre: (jQuery._data || jQuery.data)(elem, 'events');