web-dev-qa-db-fra.com

Utilisation de Chrome: comment rechercher 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, une alerte ("barre") s'affiche. Je sais donc que quelque part, du code est lié à #foo.

Comment trouver le code qui lie l'alerte ("barre") à l'événement click? Je cherche une solution avec Chrome.

Ps.: L’exemple est fictif, je ne cherche donc pas une solution du type: "Utilisez XXXXXX et recherchez dans le projet entier" alert (\ "bar \") ". Je souhaite une véritable solution de débogage/traçage.

javascriptdebugginggoogle-chromejavascript-eventsinspector
130
FMaz008

Utilisation de Chrome 15.0.865.0 dev. Il existe une section "Auditeurs d'événement" dans le panneau Eléments:

enter image description here

Et un "Points d'arrêt d'auditeurs d'événement" dans le panneau Scripts. Utilisez une souris -> cliquez sur le point d'arrêt, puis "passez à l'appel de la fonction suivante" tout en surveillant la pile d'appels pour voir quelle fonction utilisateur gère l'événement. Dans l’idéal, vous devriez remplacer la version simplifiée de jQuery par une version non modifiée de sorte que vous n’ayez pas à entrer tout le temps et à utiliser passez au-dessus de lorsque cela est possible.

enter image description here

126
Ionuț G. Stan

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

  1. Cliquez avec le bouton droit sur l'élément à inspecter ou recherchez-le dans le volet 'Eléments'.
  2. Puis, dans l'onglet/le volet "Auditeurs d'événement", développez l'événement (par exemple, "cliquez").
  3. Développez les différents sous-nœuds pour trouver celui que vous souhaitez, puis recherchez l'emplacement du 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'emplacement 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

'Show Function definition'

43
Matty J

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

  1. Inspecter l'élément
  2. Dans le nouvel onglet ' jQuery Audit ', développez la propriété Events
  3. Choisissez pour l'événement dont vous avez besoin
  4. Dans la propriété handler, 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 ' Pretty print ' pour un affichage plus lisible du code.
15
Javier Armendariz

Pour la version de Chrome Version 71.0.3578.98 (dernière en date de 2019):

Chrome Developer Tools - Event Listener

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

  2. Choisissez l'onglet Event Listener

  3. Assurez-vous de vérifier les écouteurs de la structure pour afficher le fichier javascript réel au lieu de la fonction jquery.

7
lovelyramos

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

Les outils de développement de Google Chromes comportent une fonction de recherche intégrée à la section des scripts.

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

  • 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 mener éventuellement à la fonction de liaison.

Ex: recherche de #foo vous amènerait à

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

enter image description here

6
Michael Jasper

Mise à jour 2018 - Peut être utile aux futurs lecteurs:

Je ne sais pas quand cela a été introduit dans Chrome. Mais une autre manière (facile) de le faire est maintenant Chrome est via les commandes de la console.

Par exemple: ( in chrome type de console)

getEventListeners($0)

Attendu 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

enter image description here

3
Kris Hollenbeck

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

Étapes

  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 rechercher le gestionnaire eventType de l'élément spécifié dans le sélecteur correspondant.

Exemple :

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

Ensuite, s’il en existe un, le gestionnaire d’événements disponible apparaîtra ci-dessous, vous devez développer pour trouver le gestionnaire, cliquer avec le bouton droit de la souris sur la fonction et sélectionner show function definition

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

3
UniFreak

Pour Chrome Version 52.0.2743.116:

  1. Dans les outils de développement de Chrome, ouvrez 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.

2
Ghost Echo