Comment puis-je utiliser Chrome DevTools pour afficher les événements déclenchés sur les éléments ?

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 Developer :

1. Inspectez l'élément :

   • Cliquez avec le bouton droit sur l'élément cible et sélectionnez « Inspecter » ou accédez à l'onglet « Éléments » dans DevTools.

2. Surveiller les événements :

   • Utilisation de monitorEvents :

     • Ouvrez l'onglet "Console".
     • Entrez monitorEvents($0) dans le champ console, où $0 représente l'élément sélectionné.

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

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

Les interactions avec l'élément inspecté seront affichent 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, saisissez unmonitorEvents($0) dans la console.

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

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

• souris : événements de souris (bas, haut, clic, etc.)
• touche : événements de clavier ( bas, haut, appuyer, etc.)
• toucher : événements tactiles (début, déplacement, fin, etc.)
• contrôle : élément contrôler les événements (redimensionnement, focus, changement, etc.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!