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

Question

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

Comment puis-je le faire en utilisant Chrome Web Developer ?

Answer 1

• Hit F12 pour ouvrir Dev Tools
• Cliquez sur l'onglet Sources
• Sur le côté droit, faites défiler jusqu'à "Event Listener Breakpoints", et développez l'arbre.
• Cliquez sur les événements que vous voulez écouter.
• Interagissez avec l'élément cible, s'ils tirent, vous obtiendrez un point d'arrêt dans le débogueur.

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

Answer 2

Vous pouvez utiliser monitorEvents fonction.

Il suffit d'inspecter votre élément ( right mouse click Inspect sur l'élément visible ou aller à Elements dans Chrome Developer Tools et sélectionnez l'élément recherché), puis allez à Console onglet et écrire :

monitorEvents($0)

Maintenant, lorsque vous passez la souris sur cet élément, que vous le mettez en évidence ou que vous cliquez dessus, le nom de l'événement déclenché s'affiche avec ses données.

Pour ne plus recevoir ces données, écrivez simplement ceci dans la console :

unmonitorEvents($0)

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

Vous pouvez également spécifier le "type" d'événement comme second 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 la suivante aquí .

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

Answer 3

Événement visuel est un joli petit bookmarklet que vous pouvez utiliser pour afficher les gestionnaires d'événements d'un élément. Une démo en ligne peut être consultée aquí .

Answer 4

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

1. Cliquez à droite sur l'élément et ouvrez "Chrome Developer Tools".
2. Type $._data(($0), 'events'); dans la "Console".
3. Développez les objets joints et double-cliquez sur le handler: valeur.
4. Ceci montre le code source de la fonction jointe, recherchez une partie de celui-ci en utilisant l'onglet 'Recherche'.

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

Answer 5

Cela ne montrera pas les événements personnalisés comme ceux que votre script pourrait créer si c'est 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 d'événements sous Scripts dans les outils de développement de chrome ne vous montrera pas "Something:custom-event-one".