Débogueurs de navigateurs côté client: comment puis-je voir la liste des gestionnaires actuellement enregistrés sur un élément?

Question

L'apprentissage du code côté client d'un site existant, aimerait comprendre une activité qui se déroule totalement du côté client.

Vous voulez savoir quels sont les gestionnaires JS qui sont appelés lorsque je clique sur un élément spécifique. Est-il possible de voir ces informations dans un débogueur?

J'utilise Firefox avec Firebug ou Chrome

Answer 1

La plupart des sites utilisent une sorte de framework Javascript qui utilise leur propre système de gestion d'événements, ce qui rend les outils d'inspection DOM de firebug ou de chrome dev plutôt inutiles.

Heureusement, il n'est pas trop difficile d'exploiter les systèmes d'événements de ces frameworks. Il y a FireQuery, qui est une extension pour Firebug qui s'intègre très bien avec l'inspecteur DOM de Firebug, mais cela ne fonctionne que pour jQuery. Pour les autres frameworks, il y a aussi Visual Event

Answer 2

Vous pouvez utiliser les outils de développement Google Chrome pour faire ce que vous cherchez si je lis bien votre question (mes excuses si je ne). Dans Chrome, cliquez avec le bouton droit sur l'élément dans la page de rendu et choisissez "Inspecter l'élément". Sur le côté droit de la fenêtre de l'outil qui s'ouvre, il y a une section appelée "Propriétés" qui apparaîtra lorsque vous cliquerez dessus. Enquêter sur les sous-catégories devrait vous montrer quelles fonctions sont liées à quels événements. Vous pouvez ensuite utiliser la zone "Scripts" (onglet en haut de la fenêtre Outils de développement) pour définir des points d'arrêt et observer le comportement dans les fichiers de script. J'espère que cela pourra aider.