Auf Elements ausgelöste Ereignisse mit Chrome DevTools anzeigen

Um Fehler bei der Ereignisbehandlung auf Ihren Webseiten zu beheben und zu optimieren, können Sie Chrome DevTools zur Überprüfung verwenden die Ereignisse, die bei bestimmten Elementen ausgelöst werden.

Führen Sie die folgenden Schritte mit Chrome Web aus Entwickler:

1. Inspizieren Sie das Element:

   • Klicken Sie mit der rechten Maustaste auf das Zielelement und wählen Sie „Inspizieren“ oder navigieren Sie zu „ Registerkarte „Elemente“ in DevTools.

2. Monitor Ereignisse:

   • Verwenden von monitorEvents:

     • Öffnen Sie die Registerkarte „Konsole“.
     • Geben Sie „monitorEvents“ ein ($0) in der Konsole, wobei $0 die Auswahl darstellt element.

   • Angeben des Ereignistyps:

     • Geben Sie optional den Ereignistyp an, den Sie überwachen möchten, als zweites Argument um Ereignisse zu überwachen, z. B. monitorEvents(document.body, 'Maus').

Interaktionen mit dem überprüften Element zeigen jetzt deren Ereignisnamen und zugehörige Daten an.

3. Überwachung stoppen:

   • Um die Ereignisüberwachung zu beenden, geben Sie ein unmonitorEvents($0) in der Konsole.

Verfügbare Ereignistypen (Stand 30.01.2023)

Sie können eingrenzen Überwachte Ereignisse können Sie durch die folgenden Angaben herunterfahren Typen:

• Maus: Mausereignisse (runter, hoch, klicken usw.)
• Taste: Tastaturereignisse (runter, nach oben, drücken usw.)
• berühren: Berührungsereignisse (Start, Bewegung, Ende, usw.)
• Steuerung: Elementsteuerungsereignisse (Größe ändern, Fokus, Änderung usw.)