En utilisant 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 quand je clique sur le lien, une alerte ("barre") s'affiche. Donc je sais que quelque part, un code se lie à #foo.

Comment puis-je trouver le code qui lie l'alerte ("barre") à l'événement de clic ? Je cherche une solution avec du Chrome.

Ps.: L'exemple est fictif, donc je ne suis pas à la recherche de solution comme: "utiliser XXXXXX et rechercher dans l'ensemble du projet "alert("bar")". Je veux une VRAIE solution de débogage / traçage.

118
demandé sur Peter verleg 2011-09-07 21:44:20

8 réponses

utilisant Chrome 15.0.865.0 dev . Il y a une section "event Listeners" sur le panneau Elements:

enter image description here

et un" event Listeners Breakpoints " sur le panneau des Scripts. Utilisez la souris - > cliquez sur breakpoint et ensuite "step into next function call" tout en gardant un oeil sur la pile d'appels pour voir ce que la fonction userland gère l'événement. Idéalement, vous remplaceriez la version miniaturisée de jQuery par une unminified un de sorte que vous n'avez pas à étape tout le temps, et l'utilisation step over lorsque cela est possible.

enter image description here

119
répondu Ionuț G. Stan 2014-03-11 14:20:49

vous pouvez également utiliser L'inspecteur de Chrome pour trouver les événements attachés 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. Puis dans les "Écouteurs d'Événement onglet" /volet, développez l'événement (par exemple, 'click')
  3. Développez les différents sous-nœuds pour trouver celui que vous voulez, puis recherchez l'endroit où le "gestionnaire" sous-nœud.
  4. clic droit sur le mot "fonction", puis cliquez sur "Afficher la définition de fonction'

cela vous mènera à l'endroit où le handler 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

'Show Function definition'

38
répondu Matty J 2014-08-11 05:28:10

essayez l'extension jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), après installation suivre les étapes suivantes:

  1. inspecter l'élément
  2. Sur la nouvelle jQuery "d'Audit 151990920" onglet " élargir les Événements de la propriété
  3. choisir pour L'événement dont vous avez besoin
  4. de la propriété du maître, droit cliquez sur la fonction et sélectionnez ' afficher la définition de la fonction '
  5. vous allez maintenant Voir le code de liaison D'événement
  6. cliquez sur le bouton Pretty print 'pour une vue plus lisible du code
14
répondu Javier Armendariz 2015-05-27 16:00:07

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

Google Chromes developer tools a une fonction de recherche intégrée dans la section scripts

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

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

Ex: la recherche de #foo vous mènera à 

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

enter image description here

5
répondu Michael Jasper 2017-05-23 12:34:44

pour la version version Chrome 62.0.3202.94 :

Chrome Developer Tools - Event Listener

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

  2. choisissez l'écouteur d'événements onglet

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

4
répondu lovelyramos 2017-11-17 07:34:17

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

Étapes

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

  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");

puis le cas échéant, le gestionnaire d'événements disponible affichera ci-dessous, vous devez étendre pour trouver le gestionnaire, droit cliquez sur la fonction et sélectionnez show function definition

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

3
répondu UniFreak 2015-07-11 06:10:08

Pour La Version Chrome 52.0.2743.116:

  1. Ctrl + Shift + F .

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

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

2
répondu Ghost Echo 2016-08-25 17:31:16

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

Je ne suis pas sûr quand cela a été introduit à L'origine dans Chrome. Mais une autre façon (facile) de le faire maintenant dans Chrome est de passer par les commandes de la console.

Par exemple: ( dans chrome type de console ) 

getEventListeners("151900920")

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

enter image description here

1
répondu Kris Hollenbeck 2018-08-17 14:45:38