Affichage des événements déclenchés sur des éléments avec Chrome DevTools

Pour dépanner et optimiser la gestion des événements sur vos pages Web, vous pouvez utiliser Chrome DevTools pour inspecter les événements déclenchés sur des éléments spécifiques.

Exécutez les étapes suivantes à l'aide de Chrome Web Développeur :

1. Inspecter l'élément :

   • Cliquez avec le bouton droit sur l'élément cible et sélectionnez "Inspecter" ou accédez au " Onglet "Éléments" dans DevTools.

2. Moniteur Événements :

   • Utilisation de MonitorEvents :

     • Ouvrez l'onglet "Console".
     • Entrez MonitorEvents ($0) dans la console, où $0 représente le element.

   • Spécification du type d'événement :

     • Facultativement, indiquez le type d'événement que vous souhaitez surveiller comme deuxième argument. à monitorEvents, par exemple, monitorEvents(document.body, 'souris').

Les interactions avec l'élément inspecté afficheront désormais leurs noms d'événements et les données associées.

3. Arrêter la surveillance :

   • Pour interrompre la surveillance des événements, entrez unmonitorEvents($0) dans le champ console.

Types d'événements disponibles (au 30/01/2023)

Vous pouvez affiner les événements surveillés en spécifiant le types suivants :

• mouse : événements de souris (bas, haut, clic, etc.)
• key : événements clavier (bas, haut, appuyer, etc.)
• touch : événements tactiles (démarrer, déplacer, fin, etc.)
• control : événements de contrôle des éléments (redimensionnement, focus, changement, etc.)