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

603

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?

John Hoffman
la source
13
Ce bookmarklet peut être utile: sprymedia.co.uk/article/Visual+Event+2
scytale
1
La réponse ici est précieuse, mais le bookmarklet ci-dessus ^ est en fait ce qui a résolu mon problème. sprymedia.co.uk/article/Visual+Event+2
Jazzy

Réponses:

879
  • 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)

Mat
la source
11
cette solution est un problème si ce sont les événements de souris que vous recherchez, car le point d'arrêt tue le flux
WendyG
67
que faire si tous les événements pointent vers un jquery minifié dont je ne me soucie pas, comment puis-je atteindre la fonction qui utilise ce jquery.
Muhammad Umer
14
Peut-il afficher des événements personnalisés que j'ai créés? Quand j'ai lu que cela avait changé des vies, c'était la première chose à laquelle j'ai pensé. Dois-je manquer quelque chose?
Tebe
24
@MuhammadUmer Vous pouvez blackbox jQuery afin que Chrome l'ignore et passe directement à votre code source. developer.chrome.com/devtools/docs/blackboxing
Matt Zeunert
1
@MuhammadUmer si vous arrêtez d'utiliser JQuery?
John Balvin Arias
831

Vous pouvez utiliser la fonction monitorEvents .

Inspectez simplement votre élément ( right mouse clickInspectsur 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é:

utilisation de la fonction monitorEvents

Mariusz Pawelski
la source
2
D'accord. C'est le moyen de facto de surveiller et de suivre les événements sur des éléments spécifiques .
dmackerman
1
Ah oui je vois. C'était le "indéfini" qui me décourageait mais je vois maintenant que vous avez la même chose dans votre GIF animé utile. Merci.
MSC
1
quel outil
avez
3
@MariuszPawelski Comment procéder à partir d'ici? Je l'ai fait et j'ai trouvé l'événement click, qui était l'événement qui m'intéressait. Mais comment trouver ce qui se passe lorsque je clique sur l'élément? Quel type de code est exécuté? Quelle propriété MouseEventdois-je rechercher?
Utku
3
mais où trouver le gestionnaire, par exemple cliquez sur le gestionnaire.
Sheikh Abdul Wahid
26

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 .

tifkin
la source
22

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 ... :)

comment-trouver-jquery-click-handler-function

Daniel Sokolowski
la source
15

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"

airtonix
la source
21
Comment alors trouver ces événements?
Calydon