Question 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 quand j'interagis avec lui parce que j'essaie de trouver quel gestionnaire d'événement utiliser.

Comment faire cela en utilisant Chrome Web Developer?


448
2018-04-18 16:23


origine


Réponses:


  • Frappé F12 ouvrir les outils de développement
  • Cliquez sur l'onglet Sources
  • Sur le côté droit, faites défiler jusqu'à «Points d'arrêt du programme d'écoute d'événement» et développez l'arborescence.
  • Cliquez sur les événements que vous souhaitez écouter.
  • Interagir avec l'élément cible, s'ils déclenchent, vous obtiendrez un point d'arrêt dans le débogueur

De même, vous pouvez faire un clic droit sur l'élément cible -> sélectionnez "inspecter l'élément" Faites défiler vers le bas sur le côté droit du cadre de développement, en bas est "é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 qui sont traités par des bulles (je ne devine pas)


715
2018-04-18 16:29



Vous pouvez utiliser monitorEvents fonction.

Inspectez simplement votre élément (right mouse click → Inspect sur l'élément visible ou aller à Elements Cliquez sur l'onglet dans les outils de développement Chrome et sélectionnez l'élément souhaité) puis accédez à Console onglet et écrire:

monitorEvents($0)

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

Pour ne plus recevoir ces données, écrivez simplement ceci sur 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 ou querySelector).

Vous pouvez également spécifier l'événement "type" comme second paramètre pour restreindre 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 comment fonctionne cette fonctionnalité:

usage of monitorEvents function


608
2018-04-10 10:50



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


24
2018-03-21 20:12



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. Type $._data(($0), 'events'); dans la 'Console'
  3. Développez les objets attachés et double-cliquez sur le handler: valeur.
  4. Cela montre le code source de la fonction attachée, recherchez une partie de celle-ci en utilisant l'onglet "Recherche".

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

how-to-find-jquery-click-handler-function


16
2017-07-14 15:11



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"


14
2017-07-15 23:42