Wie kann ich Ereignisse anzeigen, die für ein Element in Chrome DevTools ausgelöst wurden?

603

Ich habe ein anpassbares Formularelement auf einer Seite aus einer Bibliothek. Ich möchte sehen, welche Javascript-Ereignisse ausgelöst werden, wenn ich mit ihnen interagiere, weil ich herausfinden möchte, welcher Ereignishandler verwendet werden soll.

Wie mache ich das mit Chrome Web Developer?

John Hoffman
quelle
13
Dieses Lesezeichen kann hilfreich sein: sprymedia.co.uk/article/Visual+Event+2
scytale
1
Die Antwort hier ist wertvoll, aber das obige Lesezeichen hat mein Problem gelöst. sprymedia.co.uk/article/Visual+Event+2
Jazzy

Antworten:

877
  • Drücken Sie F12, um Dev Tools zu öffnen
  • Klicken Sie auf die Registerkarte Quellen
  • Scrollen Sie auf der rechten Seite nach unten zu "Event Listener Breakpoints" und erweitern Sie den Baum
  • Klicken Sie auf die Ereignisse, auf die Sie hören möchten.
  • Interagiere mit dem Zielelement. Wenn es ausgelöst wird, erhältst du einen Haltepunkt im Debugger

Ebenso können Sie mit der rechten Maustaste auf das Zielelement klicken -> "Element untersuchen" auswählen. Scrollen Sie auf der rechten Seite des Entwicklungsrahmens nach unten. Unten befindet sich "Ereignis-Listener". Erweitern Sie den Baum, um zu sehen, welche Ereignisse an das Element angehängt sind. Ich bin mir nicht sicher, ob dies für Ereignisse funktioniert, die durch Sprudeln behandelt werden (ich vermute nicht).

Matt
quelle
11
Diese Lösung ist ein Problem, wenn es sich um Mausereignisse handelt, nach denen Sie
suchen
67
Was passiert, wenn alle Ereignisse auf eine minimierte Abfrage verweisen, die mir egal ist? Wie erreiche ich die Funktion, die diese Abfrage verwendet?
Muhammad Umer
14
Kann es benutzerdefinierte Ereignisse anzeigen, die von mir erstellt wurden? Als ich las, dass es Leben verändert hat, war das das erste, woran ich dachte. Vermisse ich etwas
Tebe
24
@MuhammadUmer Sie können jQuery blackboxen, damit Chrome es überspringt und direkt zu Ihrem Quellcode wechselt. developer.chrome.com/devtools/docs/blackboxing
Matt Zeunert
1
@ MuhammadUmer was ist, wenn Sie JQuery einfach nicht mehr verwenden?
John Balvin Arias
831

Sie können die Funktion monitorEvents verwenden.

Überprüfen Sie einfach Ihr Element ( right mouse clickInspectauf dem sichtbaren Element oder gehen Sie Elementsin den Chrome Developer Tools zur Registerkarte und wählen Sie das gewünschte Element aus). Gehen Sie dann zur ConsoleRegisterkarte und schreiben Sie:

monitorEvents($0)

Wenn Sie nun mit der Maus über dieses Element fahren, es fokussieren oder darauf klicken, wird der Name des ausgelösten Ereignisses mit seinen Daten angezeigt.

Um diese Daten nicht mehr abzurufen, schreiben Sie dies einfach in die Konsole:

unmonitorEvents($0)

$0ist nur das letzte von den Chrome Developer Tools ausgewählte DOM-Element. Sie können dort jedes andere DOM-Objekt übergeben (z. B. Ergebnis von getElementByIdoder querySelector).

Sie können auch den Ereignistyp "Typ" als zweiten Parameter angeben, um überwachte Ereignisse auf einen vordefinierten Satz zu beschränken. Zum Beispiel:

monitorEvents(document.body, 'mouse')

Eine Liste dieser verfügbaren Typen finden Sie hier .

Ich habe ein kleines GIF erstellt, das zeigt, wie diese Funktion funktioniert:

Verwendung der Funktion monitorEvents

Mariusz Pawelski
quelle
2
Einverstanden. Dies ist die defakte Methode, um Ereignisse an bestimmten Elementen zu überwachen und aufzuspüren .
Dmackerman
1
Ah ja ich verstehe. Es war das "Undefinierte", das mich abschreckte, aber ich sehe jetzt, dass Sie dasselbe in Ihrem hilfreichen animierten GIF haben. Vielen Dank.
MSC
1
Mit welchem ​​Tool hast du
GIF erstellt?
3
@MariuszPawelski Wie gehe ich von hier aus vor? Ich habe dies getan und das Klickereignis gefunden, an dem ich interessiert war. Aber wie finde ich heraus, was passiert, wenn ich auf das Element klicke? Welche Art von Code wird ausgeführt? Nach welcher Eigenschaft MouseEventsoll ich suchen?
Utku
3
aber wo Handler zu finden ist zB Click-Handler.
Sheikh Abdul Wahid
26

Visual Event ist ein nettes kleines Lesezeichen, mit dem Sie die Ereignishandler eines Elements anzeigen können. Die Online-Demo kann hier angesehen werden .

Tifkin
quelle
22

Für jQuery (mindestens Version 1.11.2) hat das folgende Verfahren für mich funktioniert.

  1. Klicken Sie mit der rechten Maustaste auf das Element und öffnen Sie "Chrome Developer Tools".
  2. Geben Sie $._data(($0), 'events');die 'Konsole' ein
  3. Erweitern Sie die angehängten Objekte und doppelklicken Sie auf den handler:Wert.
  4. Hier wird der Quellcode der angehängten Funktion angezeigt. Suchen Sie auf der Registerkarte "Suchen" nach einem Teil davon.

Und es ist Zeit aufzuhören, das Rad neu zu erfinden und Vanilla JS-Events zu verwenden ... :)

How-to-Find-JQuery-Click-Handler-Funktion

Daniel Sokolowski
quelle
15

Dies zeigt keine benutzerdefinierten Ereignisse an, wie sie Ihr Skript möglicherweise erstellt, wenn es sich um ein JQuery-Plugin handelt. beispielsweise :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Das Ereignisfenster unter "Skripte" in Chrome-Entwicklertools zeigt nicht "Etwas: Benutzerdefiniertes Ereignis Eins" an.

airtonix
quelle
21
Wie findet man dann diese Ereignisse?
Calydon