À l'aide de Chrome, comment trouver les événements liés à un élément

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, un alert("bar")s'affiche. Je sais donc que quelque part, du code est lié #foo.

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

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

Utilisation de Chrome 15.0.865.0 dev . Il existe une section "Écouteurs d'événements" dans le panneau Éléments:

Et un "Points d'arrêt des écouteurs d'événements" sur le panneau Scripts. Utilisez une souris -> cliquez sur le point d'arrêt, puis "passez à l'appel de fonction suivant" tout en gardant un œil sur la pile d'appels pour voir quelle fonction userland gère l'événement. Idéalement, vous remplaceriez la version minifiée de jQuery par une version non minifiée afin de ne pas avoir à intervenir tout le temps, et utilisez step over si possible.

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

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

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

Essayez l'extension jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), après l'installation, procédez comme suit:

1. Inspectez l'élément
2. Dans le nouvel onglet « jQuery Audit », développez la propriété Events
3. Choisissez l'événement dont vous avez besoin
4. Dans la propriété du gestionnaire, cliquez avec le bouton droit 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 ' Pretty print ' pour une vue plus lisible du code

(Dernière à partir de 2020) Pour la version Chrome Version 83.0.4103.61 :

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

2. Choisissez l'onglet Écouteurs d'événements

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

Edit : au lieu de ma propre réponse, celle-ci est tout à fait excellente: Comment déboguer les liaisons d'événements JavaScript / jQuery avec Firebug (ou un outil similaire)

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

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

• faites un clic droit n'importe où sur une page (en chrome)
• cliquez sur 'Inspecter l'élément'
• cliquez sur l'onglet 'Scripts'
• Barre de recherche en haut à droite

Faire une recherche rapide pour le #ID devrait vous amener à la fonction de liaison éventuellement.

Ex: rechercher #foovous amènerait à

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

Mise à jour 2018 - Cela pourrait être utile pour les futurs lecteurs:

Je ne sais pas quand cela a été initialement introduit dans Chrome. Mais un autre moyen (facile) de le faire maintenant dans Chrome consiste à utiliser les commandes de la console.

Par exemple: ( dans le type de console chrome )

getEventListeners($0)

Alors que $ 0 est l'élément sélectionné dans le DOM.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

findEventHandlers est un plugin jquery, le code brut est ici: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

Pas

1. Collez le code brut directement dans la console de chrome (note: jquery doit déjà être chargé)

2. Utilisez l'appel de fonction suivant: findEventHandlers(eventType, selector);
   pour trouver le gestionnaire eventType de l'élément spécifié par le sélecteur correspondant.

Exemple :

findEventHandlers("click", "#clickThis");

Ensuite, le cas échéant, le gestionnaire d'événements disponible s'affiche ci-dessous, vous devez développer pour trouver le gestionnaire, cliquez avec le bouton droit sur la fonction et sélectionnez show function definition

Voir: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Pour la version Chrome 52.0.2743.116:

1. Dans les outils de développement de Chrome, affichez le panneau "Rechercher" en appuyant sur Ctrl+ Shift+ F.

2. Tapez le nom de l'élément que vous essayez de trouver.

Les résultats des éléments liés doivent apparaître dans le panneau et indiquer le fichier dans lequel ils se trouvent.