En utilisant Chrome, comment trouver quels événements sont liés à un élément

Question

Supposons que j'ai un lien sur ma page :

<a href="#" id="foo">Click Here</a>

Je ne sais rien d'autre, mais lorsque je clique sur le lien, une alert("bar") s'affiche. Je sais donc que, quelque part, un code est lié à #foo .

Comment puis-je trouver le code qui lie le alert("bar") à l'événement de clic ? Je suis à la recherche d'une solution avec Chrome.

Ps.. : L'exemple est fictif, donc je ne cherche pas de solution du genre : "Utilisez XXXXXX et recherchez dans tout le projet "alert(\"bar\")". Je veux une vraie solution de débogage/traçage.

Answer 1

Utilisation de Chrome 15.0.865.0 dev . Il y a une section "Event Listeners" dans le panneau Elements :

Et un "Event Listeners Breakpoints" sur le panneau scripts. Utilisez un point d'arrêt Souris -> clic et ensuite "step into next function call" tout en gardant un œil sur la pile d'appels pour voir quelle fonction userland gère l'événement. Idéalement, vous devriez remplacer la version miniaturisée de jQuery par une version non miniaturisée afin de ne pas avoir à entrer tout le temps, et utiliser enjamber lorsque cela est possible.

Answer 2

Vous pouvez également utiliser l'inspecteur de Chrome pour trouver les événements joints d'une autre manière, comme suit :

1. Faites un clic droit sur l'élément à inspecter ou trouvez-le dans le volet "Éléments".
2. Ensuite, dans l'onglet/volet "Écouteurs d'événements", développez l'événement (par exemple "clic").
3. Développez les différents sous-nœuds pour trouver celui que vous voulez, puis cherchez où se trouve le sous-nœud "handler".
4. Cliquez avec le bouton droit de la souris sur le mot "fonction", puis cliquez sur "Afficher la définition de la fonction".

Cela vous amènera à l'endroit où le gestionnaire a été défini, comme démontré dans l'image suivante, et expliqué par Paul Irish ici : https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Answer 3

Essayez l'extension jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), après l'installation, suivez ces étapes :

1. Inspecter l'élément
2. Sur le nouveau ' Audit jQuery L'onglet "Événements" développe la propriété "Événements
3. Choisissez pour l'événement dont vous avez besoin
4. Dans la propriété du gestionnaire, cliquez avec le bouton droit de la souris sur la fonction et sélectionnez ''. Afficher la définition de la fonction '
5. Vous verrez maintenant le code de liaison d'événement
6. Cliquez sur le bouton ' Joli imprimé pour une vue plus lisible du code.

Answer 4

(Dernière mise à jour en 2022) Pour la version Version Chrome Version 99 :

1. Sélectionnez l'élément que vous voulez inspecter

2. Choisissez l'onglet Ecouteurs d'événements

3. Assurez-vous de vérifier les écouteurs du cadre pour montrer le vrai fichier javascript au lieu de la fonction jquery.

Answer 5

Modifier En lieu et place de ma propre réponse, celle-ci est tout à fait excellente : Comment déboguer les liaisons événementielles JavaScript/jQuery avec Firebug (ou un outil similaire) ?

Les outils de développement de Google Chromes ont une fonction de recherche intégrée dans la section scripts.

Si vous n'êtes pas familier avec cet outil : (juste au cas où)

• clic droit n'importe où sur une page (dans chrome)
• cliquez sur "Inspecter l'élément".
• cliquez sur l'onglet 'scripts'.
• Barre de recherche en haut à droite

Une recherche rapide sur le #ID devrait vous conduire à la fonction de liaison.

Ex : recherche de #foo vous emmènerait à

$('#foo').click(function(){ alert('bar'); })