Comment trouver le code utilisé par un bouton / élément dans Chrome à l'aide des outils de développement

La réponse d'Alexander Pavlov est la plus proche de ce que vous voulez.

En raison de l'extensibilité de l'abstraction et de la fonctionnalité de jQuery, beaucoup de cercles doivent être sautés pour arriver à la viande de l'événement. J'ai mis en place ce jsFiddle pour démontrer le travail.

1. Configuration du point d'arrêt de l'écouteur d'événements

Vous étiez proche de celui-ci.

1. Ouvrez les outils de développement Chrome (F12) et accédez à l'onglet Sources.
2. Percer la souris -> Cliquer
   
   (Cliquer pour agrandir)

2. Cliquez sur le bouton!

Chrome Dev Tools mettra en pause l'exécution du script et vous présentera ce magnifique enchevêtrement du code minifié:

(Cliquer pour agrandir)

3. Trouvez le code glorieuse!

Maintenant, l'astuce ici est de ne pas se laisser entraîner en appuyant sur la touche et de garder un œil sur l'écran.

1. Appuyez sur la touche F11 (Step In) jusqu'à ce que le code source souhaité apparaisse
2. Le code source est finalement atteint
   • Dans l'exemple jsFiddle fourni ci-dessus, j'ai dû appuyer sur F11 108 fois avant d'atteindre le gestionnaire / fonction d'événement souhaité
   • Votre kilométrage peut varier en fonction de la version de jQuery (ou bibliothèque de framework) utilisée pour lier les événements
   • Avec suffisamment de dédicace et de temps, vous pouvez trouver n'importe quel gestionnaire d'événements / fonction

4. Explication

Je n'ai pas la réponse exacte ou l'explication de pourquoi jQuery parcourt les nombreuses couches d'abstractions qu'il fait – tout ce que je peux suggérer, c'est que c'est à cause du travail qu'il effectue pour abstraire son utilisation du navigateur exécutant le code .

Voici un jsFiddle avec une version de débogage de jQuery (c'est-à-dire non minifié). Lorsque vous regardez le code sur le premier point d'arrêt (non-minifié), vous pouvez voir que le code gère bien des choses:

  // ...snip... if ( !(eventHandle = elemData.handle) ) { eventHandle = elemData.handle = function( e ) { // Discard the second event of a jQuery.event.trigger() and // when an event is called after a page has unloaded return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ? jQuery.event.dispatch.apply( elem, arguments ) : undefined; }; } // ...snip... 

La raison pour laquelle je pense que vous l'avez manqué lors de votre tentative lorsque «l' exécution s'arrête et je saute ligne par ligne », c'est parce que vous avez peut-être utilisé la fonction «Step Over» au lieu de Step In. Voici une réponse StackOverflow expliquant les différences.

Enfin, la raison pour laquelle votre fonction n'est pas directement liée au gestionnaire d'événement de clic est parce que jQuery renvoie une fonction qui se lie. La fonction de jQuery à son tour passe par des couches d'abstraction et des contrôles, et quelque part là-bas, elle exécute votre fonction.

Voici quelques solutions:

Solution 1 (fonctionne bien, juste un peu configuré mais pas de tiers)

Framework blackboxing:

1. Pop Open Chrome Developer Tools ( F12 ou ⌘ + ⌥ + i ) et accédez aux paramètres (en haut à droite ou F1 )
2. Juste là, vous trouverez un onglet sur la gauche appelé " Blackboxing "
3. Et c'est là que vous mettez le motif RegEx des fichiers que vous souhaitez éviter de passer. Par exemple: jquery\..*\.js (traduction humaine : jquery.*.js )
4. Si vous souhaitez sauter des fichiers avec plusieurs motifs, vous pouvez les ajouter à l'aide du caractère de tuyau comme ceci: jquery\..*\.js|include\.postload\.js . Ou continuez de les ajouter avec le bouton "Ajouter".
5. Maintenant appliquez la Solution 3 décrite ci-dessous.

En savoir plus sur ceci : https://developer.chrome.com/devtools/docs/blackboxing

Conseil de bonus : j'utilise Regex101 pour tester rapidement mes profils de regex rouillés et savoir où je me trompe avec le débogueur étape par étape de Regex. Il y en a d'autres bien sûr.

Solution 2 (fonctionne très bien et facilement mais vous devez installer une extension)

Événement visuel :

Favoris personnels. Cela fonctionne merveilleusement, mais c'est une extension, il n'utilise pas les Outils de développement de Chrome. Juste FYI.

Solution 3 (genre de douloureux mais facile)

1. Ouvrir les outils de développement -> onglet Sources, et à droite, trouvez les Event Listener Breakpoints :

   

2. Développez la Mouse et cliquez sur … eh bien, click .

3. Maintenant, cliquez sur l'élément (l'exécution doit être interrompue) et ici commence le jeu: commencez simplement à appuyer sur F11 (qui est Step in ) pour passer par tous les codes. Asseyez-vous, il peut y avoir une tonne de sauts.
4. Il y aura probablement beaucoup de scripts que vous ne voulez / ne pas traquer, alors combinez-le avec la méthode 1 décrite ci-dessus.

Solution 4 (mode de survie)

Je suis toujours laissé avec Ctr + Shift + F (recherche de texte dans toutes les sources) et la recherche de #envio ou quelle que soit la tag / id que vous pensez commencer la partie, en lisant tous les résultats pour essayer de déterminer quel code pourrait fonctionner , se sentir un perdant Et le sentiment qu'il doit y avoir un moyen sûr de savoir vraiment ce qui est déclenché par le bouton.

Mais soyez conscient, il n'y a pas seulement un img mais des tonnes de divs chevauchant, et vous ne pouvez même pas savoir ce qui déclenche le code. Vous ne devriez probablement pas avoir à utiliser cette méthode.

Cela ressemble à "… et je saute en ligne par ligne …" la partie est fausse. Faites-vous StepOver ou StepIn et êtes-vous sûr de ne pas manquer accidentellement l'appel pertinent?

Cela dit, les cadres de débogage peuvent être fastidieux pour cette raison exactement. Pour atténuer le problème, vous pouvez activer l'expérience "Activer les contours de débogage" . Bon débogage! 🙂

Vous pouvez utiliser FindHandlersJS

Vous pouvez trouver le gestionnaire en effectuant dans la console Chrome:

findEventHandlers("click", "img.envio")

Vous obtiendrez les informations suivantes imprimées dans la console Chrome:

• élément
  L'élément réel dans lequel le gestionnaire d'événements a été enregistré dans
• événements
  Array avec des informations sur les gestionnaires d'événements jquery pour le type d'événement qui nous intéresse (p. Ex. Clic, changement, etc.)
• Manipulateur
  Méthode du gestionnaire d'événements réel que vous pouvez voir en cliquant avec le bouton droit de la souris et en sélectionnant Afficher la définition de la fonction
• sélecteur
  Le sélecteur fourni pour les événements délégués. Il sera vide pour les événements directs.
• Cibles
  Listez avec les éléments que ce gestionnaire d'événements cible. Par exemple, pour un gestionnaire d'événements délégué qui est enregistré dans l'objet du document et cible tous les boutons d'une page, cette propriété répertorie tous les boutons de la page. Vous pouvez les planer et les voir surlignés en chrome.

Plus d'informations ici et vous pouvez l'essayer dans ce site exemple ici .