Comment afficher les événements déclenchés sur un élément dans Chrome DevTools?

J'ai un élément de formulaire personnalisable sur une page d'une bibliothèque. Je veux voir quels événements javascript sont déclenchés lorsque j'interagis avec, car j'essaie de savoir quel gestionnaire d'événements utiliser.

Comment faire cela en utilisant Chrome Web Developer?

• Appuyez F12pour ouvrir Dev Tools
• Cliquez sur l'onglet Sources
• Sur le côté droit, faites défiler vers le bas jusqu'à «Points d'arrêt du récepteur d'événements» et développez l'arborescence
• Cliquez sur les événements que vous souhaitez écouter.
• Interagissez avec l'élément cible, s'il se déclenche, vous obtiendrez un point d'arrêt dans le débogueur

De même, vous pouvez cliquer avec le bouton droit sur l'élément cible -> sélectionner «inspecter l'élément» Faites défiler vers le bas sur le côté droit du cadre de développement, en bas se trouve «écouteurs d'événements». Développez l'arborescence pour voir quels événements sont attachés à l'élément. Je ne sais pas si cela fonctionne pour les événements gérés par le bullage (je suppose que non)

Vous pouvez utiliser la fonction monitorEvents .

Inspectez simplement votre élément ( right mouse click→ Inspectsur l'élément visible ou accédez à l' Elementsonglet dans Chrome Developer Tools et sélectionnez l'élément souhaité), puis accédez à l' Consoleonglet et écrivez:

monitorEvents($0)

Maintenant, lorsque vous déplacez la souris sur cet élément, effectuez la mise au point ou cliquez dessus, le nom de l'événement déclenché s'affiche avec ses données.

Pour ne plus obtenir ces données, écrivez ceci sur la console:

unmonitorEvents($0)

$0n'est que le dernier élément DOM sélectionné par Chrome Developer Tools. Vous pouvez y passer n'importe quel autre objet DOM (par exemple résultat de getElementByIdou querySelector).

Vous pouvez également spécifier le "type" d'événement comme deuxième paramètre pour limiter les événements surveillés à un ensemble prédéfini. Par exemple:

monitorEvents(document.body, 'mouse')

La liste de ces types disponibles est ici .

J'ai fait un petit gif qui illustre le fonctionnement de cette fonctionnalité:

Visual Event est un joli petit bookmarklet que vous pouvez utiliser pour afficher les gestionnaires d'événements d'un élément. La démo en ligne peut être consultée ici .

Pour jQuery (au moins la version 1.11.2), la procédure suivante a fonctionné pour moi.

1. Faites un clic droit sur l'élément et ouvrez «Chrome Developer Tools»
2. Tapez $._data(($0), 'events');dans la «console»
3. Développez les objets attachés et double-cliquez sur la handler:valeur.
4. Cela montre le code source de la fonction jointe, recherchez une partie de celle-ci en utilisant l'onglet «Rechercher».

Et il est temps d'arrêter de réinventer la roue et de commencer à utiliser les événements JS vanilla ... :)

Cela ne montrera pas les événements personnalisés comme ceux que votre script pourrait créer s'il s'agit d'un plugin jquery. par exemple :

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

});

Le panneau des événements sous Scripts dans les outils de développement Chrome ne vous montrera pas "Quelque chose: custom-event-one"