web-dev-qa-db-fra.com

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 souhaite connaître les événements javascript déclenchés lorsque j'interagis avec ce dernier, car je cherche à savoir quel gestionnaire d'événement utiliser.

Comment puis-je utiliser Chrome Web Developer?

javascriptgoogle-chrome-devtools
532
John Hoffman
  • Frappé F12 ouvrir les outils de développement
  • Cliquez sur l'onglet Sources
  • Sur la droite, faites défiler jusqu'à "Points d'arrêt de l'écouteur d'événement" 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 de la souris sur l'élément cible -> sélectionner "élément à inspecter". Faites défiler l'écran vers le bas, à droite du cadre de développement, en bas, se trouvent "écouteurs d'événement". Développez l'arborescence pour voir quels événements sont attachés à l'élément. Je ne suis pas sûr que cela fonctionne pour les événements gérés par le bullage (je suppose que non)

804
Matt

Vous pouvez utiliser la fonction monitorEvents .

Inspectez simplement votre élément (_right mouse click_ → Inspect sur un élément visible ou accédez à l’onglet Elements dans Chrome Outils de développement et sélectionnez l’élément recherché), puis à l’onglet Console et écrivez:

_monitorEvents($0)
_

Désormais, lorsque vous déplacez la souris sur cet élément, que vous l'activez ou que vous cliquez dessus, le nom de l'événement déclenché s'affiche avec ses données.

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

_unmonitorEvents($0)
_

$0 n'est que le dernier élément DOM sélectionné par Chrome Outils de développement. Vous pouvez y passer n'importe quel autre objet DOM (par exemple, résultat de getElementById ou querySelector).

Vous pouvez également spécifier le "type" d'événement en tant que 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 ici .

J'ai créé un petit gif illustrant le fonctionnement de cette fonctionnalité:

usage of monitorEvents function

739
Mariusz Pawelski

Visual Event 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 .

26
arwan

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 "Outils de développement Chrome".
  2. Tapez $._data(($0), 'events'); dans la 'Console'
  3. Développez les objets attachés et double-cliquez sur la valeur handler:.
  4. Cela montre le code source de la fonction attachée, 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 Vanilla JS ... :)

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

19
Daniel Sokolowski

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 d'événements sous Scripts dans les outils de développement chrome ne vous montrera pas "Quelque chose: custom-event-one"

15
airtonix