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

148

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.

FMaz008
la source

Réponses:

140

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

entrez la description de l'image ici

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.

entrez la description de l'image ici

Ionuț G. Stan
la source
10
Se rapprocher, mais la plupart des résultats là-bas pointent vers la ligne 16 de ... jquery.min.js :( (Je comprends pourquoi, pas besoin d'expliquer, mais comment pouvons-nous trouver qui a appelé la méthode bind () de jQuery?
FMaz008
Ces outils sont également tous disponibles dans Chrome 12.0.742.100. :) Merci !
FMaz008
13
@Fluffy: Vous n'êtes pas obligé. Cliquez simplement sur le { }symbole dans le coin inférieur gauche lors de l'affichage de js. La magie.
Hannes Schneidermayer
Passer en revue le code de distribution d'événements complexe de jQuery est une grande douleur. La réponse jQuery Audit ci-dessous ( stackoverflow.com/a/30487583/24267 ) est tellement meilleure.
mhenry1384
3
Pour exclure jquery de la pile d'appels, mettez en boîte noire le script: developer.chrome.com/devtools/docs/blackboxing @ IonuțG.Stan, ou mods, pouvez-vous mettre à jour la réponse avec une référence à la blackboxing - semble être une question courante pertinents pour cette réponse.
Chris Hynes le
47

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

'Afficher la définition de la fonction'

Matty J
la source
deux ans, et toujours la meilleure réponse à cette question.
Stuart
16

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
Javier Armendariz
la source
1
Ceci est une excellente extension et permet de gagner beaucoup de temps à passer au crible JavaScript.
Neil Monroe du
Je trouve souvent que "Event Listeners" répertorie "No event listeners", et que sélectionner "Event listener breakpoints"> Mouse> Click ne crée pas de point d'arrêt. Ce plugin fonctionne très bien.
StuartN
@Javier> c'est une excellente réponse. Fonctionne-t-il pour un mécanisme javascript (non jQuery)?
Mahefa le
11

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

Outils de développement Chrome - Écouteur d'événements

  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.

Lovelyramos
la source
6

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'); })

entrez la description de l'image ici

Michael Jasper
la source
4
Bon début, mais que faire si j'ai 1500 références à #foo, la plupart d'entre elles qui ne lient rien, ou dans le cas où j'ai plusieurs ID #foo dans des scripts externes qui ne sont pas déclenchés dans le cas présent?
FMaz008
Excellente question. D'après mon expérience, c'est là que le processus de débogage humain commence généralement :)
Michael Jasper
1
Hehe, tu as raison, mais ma question portait aussi sur ce que je dois faire en tant qu'humain: p
FMaz008
6

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

entrez la description de l'image ici

Kris Hollenbeck
la source
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/

unifreak
la source
3

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.

Écho fantôme
la source