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?
- 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)
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é:

É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.
Pour jQuery (au moins la version 1.11.2), la procédure suivante a fonctionné pour moi.
- Faites un clic droit sur l'élément et ouvrez 'Chrome Developer Tools'
- Type
$._data(($0), 'events');
dans la 'Console'
- Développez les objets attachés et double-cliquez sur le
handler:
valeur.
- 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 ... :)

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"