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

305

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:

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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 .

Carles Alcolea
quelle
4
Normalerweise benutze ich das Visual EventLesezeichen. 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.
Kevin B
3
@DontVoteMeDown Aber das besiegt die ganze Frage. Angenommen, ich habe Dutzende von * .js-Dateien auf der Website. Woher wissen Sie, dass sich der durch die Schaltfläche ausgelöste Code in jquery2.js befindet?
Carles Alcolea
1
Ich verstehe, wie Visual Event funktioniert (dank Ihnen übrigens), aber wenn Sie auf diese Schaltfläche klicken, weiß Ihr Browser genau, was ausgeführt werden soll , da er es ausführt. Ich möchte nur sicherstellen, dass es mit Entwicklungswerkzeugen nicht machbar ist, und ich werde weitermachen.
Carles Alcolea
1
Gute Frage, ich denke definitiv, dass dies eine Funktion ist, die Chrome (oder Firefox) haben sollte
Tomysshadow
1
Wenn Sie die Antwort auf diese Frage gefunden haben, fügen Sie sie bitte als Antwort hinzu. Die Beantwortung Ihrer eigenen Frage wird dringend empfohlen, die Beantwortung durch Bearbeiten Ihrer Frage jedoch nicht.
Der Kerl mit dem Hut

Antworten:

209

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)
    Chrome Dev Tools -> Registerkarte Quellen -> Maus -> 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:

Chrome Dev Tools hat die Skriptausführung angehalten (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

Gewünschte Ereignishandler / Funktion


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.

Jesse
quelle
Wow, du bist und @ Alexander-Pavlov völlig richtig, ich habe es verpasst. Jetzt habe ich es gerade noch einmal versucht und es dauert 132 F11 wichtige Treffer! Jetzt macht es Sinn, aber es ist einfach unpraktisch. Ich werde meine Frage jedoch korrigieren.
Carles Alcolea
@ CarlesAlcolea Yup - es ist absolut unpraktisch, aber nicht unmöglich. Jeder, der genügend Engagement und Zeit zur Verfügung hat, kann alles finden, was in HTML und JavaScript getan wird, auch wenn es tief versteckt und minimiert ist. Fühlen Sie sich frei, Alexander Pavlovs oder meine Antwort als akzeptiert zu markieren.
Jesse
1
Ja, ich bin gerade fertig. Zu Ihrer Information, wenn Sie es noch nicht gewusst haben, wenn Sie in einem minimierten Skript auf die Schaltfläche für geschweifte Klammern unten links ( i.imgur.com/ALoMQkR.png ) klicken, wird es "verschönert" und funktioniert auch beim Debuggen.
Carles Alcolea
Ab 2014 hat Chrome eine Black-Box-Funktion in Chrome Dev Tools integriert, die die Notwendigkeit von Nummer 1 oben beseitigt.
Brian
1
@Brian und hier ist ein Blog-Beitrag mit Black-Boxing-Skripten .
Cristian Diaconescu
157

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 .

Hier ist der aktualisierte Workflow:
  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 ".

Geben Sie hier die Bildbeschreibung ein

  1. 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)
  2. 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.
  3. 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:

Geben Sie hier die Bildbeschreibung ein


Lösung 2: Visuelles Ereignis

Geben Sie hier die Bildbeschreibung ein

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:

    Geben Sie hier die Bildbeschreibung ein

  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.

Geben Sie hier die Bildbeschreibung ein

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 .

Carles Alcolea
quelle
Sie konnten nirgendwo Blackboxing finden? Versuchen Sie: chrome: // flags / # enable-devtools-experimente
ruuter
1
@ CarlesAlcolea super! Du hast mir mit diesem Trick jede Menge Zeit gespart!
Prix
Weiß jemand, warum sich die Seite beim Ausführen eines visuellen Ereignisses selbst aktualisiert und somit alle Informationen verliert?
Edu Castrillon
Für die Lösung 1 müssten Sie auf die Ellipsen ganz rechts klicken, um Zugriff auf die EINSTELLUNGEN FÜR VOLLCHROMENTWICKLUNGEN zu erhalten, oder drücken Sie F1, wenn DevTools geöffnet ist. Jetzt sehen Sie die BlackBoxing als Registerkarte auf der linken Seite. Genießen!
Pensebien
1
Der neue beste Weg zu Blackbox-Skripten scheint erstaunlich einfach zu sein. Gehen Sie einfach zu dieser Datei im Quellenbedienfeld und klicken Sie mit der rechten Maustaste in die Datei (nicht auf das Listenelement links, öffnen Sie die Datei und klicken Sie mit der rechten Maustaste in die Datei), und wählen Sie dann einfach "Dieses Skript Blackbox" aus. Los geht's!
Dan
17

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

Alexander Pawlow
quelle
Das funktioniert perfekt (und Sie haben Recht, ich habe den Sprung verpasst ), ich werde ihn meiner Frage hinzufügen. Es hat mich auch gezwungen, Regex-Muster erneut zu lesen: P Danke.
Carles Alcolea
7

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 .

Rui
quelle
3

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');

Apptaro
quelle
2
Vielen Dank, dass Sie weitere Ideen eingebracht haben. Dies ist eine andere Art, dies zu tun. Nachteil ist, dass jQuery benötigt wird und der Titel dieser Frage verlangt, sich nur auf die Tools von Chrome zu verlassen. Ich werde Ihre Antwort bearbeiten, um zu verdeutlichen, dass es sich um eine jQuery-Methode handelt, und auch etwas Vernünftigeres als "BEST SOLUTION EVER" verwenden :) Bitte werfen Sie einen Blick auf stackoverflow.com/help/how-to-answer
Carles Alcolea