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?
javascript
google-chrome-devtools
John Hoffman
la source
la source
Réponses:
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)
la source
Vous pouvez utiliser la fonction monitorEvents .
Inspectez simplement votre élément (
right mouse click
→Inspect
sur l'élément visible ou accédez à l'Elements
onglet dans Chrome Developer Tools et sélectionnez l'élément souhaité), puis accédez à l'Console
onglet et écrivez: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:
$0
n'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 degetElementById
ouquerySelector
).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:
La liste de ces types disponibles est ici .
J'ai fait un petit gif qui illustre le fonctionnement de cette fonctionnalité:
la source
MouseEvent
dois-je rechercher?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 .
la source
Pour jQuery (au moins la version 1.11.2), la procédure suivante a fonctionné pour moi.
$._data(($0), 'events');
dans la «console»handler:
valeur.Et il est temps d'arrêter de réinventer la roue et de commencer à utiliser les événements JS vanilla ... :)
la source
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 :
Le panneau des événements sous Scripts dans les outils de développement Chrome ne vous montrera pas "Quelque chose: custom-event-one"
la source