Comment trouver le code exécuté par un bouton ou un élément dans Chrome à l'aide des outils du développeur ?

Question

J'utilise Chrome et mon propre site web.

Ce que je sais de l'intérieur :

1 ) J'ai un formulaire où les gens s'inscrivent en cliquant sur ce bouton orange :

2 ) Je l'inspecte, et c'est tout ce qu'il y a : <img class="formSend" src="images/botoninscribirse2.png">

3 ) En haut du code source, il y a des tonnes de sources script. Je sais laquelle le bouton appelle parce que je l'ai codée : <script src="js/jquery2.js" type="text/javascript"></script>

4 ) Dans ce fichier, vous pourriez trouver : $(".formSend").click(function() { ... }); qui est déclenché par le bouton (pour effectuer une validation et une soumission de formulaire assez complexe) et ce que je veux c'est être capable de trouver que en utilisant les outils de développement de chrome sur n'importe quel site web.

Comment puis-je savoir où l'élément appelle ?

L'onglet Écouteurs n'a pas fonctionné pour moi. J'ai donc essayé de regarder les écouteurs d'événements de clics, ce qui me semblait être une valeur sûre, mais... il n'y a pas de... jquery2.js là-dedans (et je ne saurais pas vraiment dans quel fichier se trouve le code donc je perdrais du temps à vérifier tout ça...) :

Mon $(".formSend").click(function() { ... }); fonction au sein de jquery2.js n'est pas là.

Jesse explique por qué :

"Enfin, la raison pour laquelle votre fonction n'est pas directement liée au gestionnaire d'événements de clics est que jQuery renvoie une fonction qui est liée. La fonction de jQuery, à son tour, passe par certaines couches d'abstraction et vérifications, et quelque part là, elle exécute votre fonction."

---

Comme suggéré par certains d'entre vous, j'ai rassemblé les méthodes qui ont fonctionné. dans une réponse ci-dessous .

Answer 1

La réponse d'Alexandre Pavlov se rapproche le plus de ce que vous voulez.

En raison de l'étendue de l'abstraction et de la fonctionnalité de jQuery, de nombreux obstacles doivent être surmontés afin d'atteindre l'essentiel 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 sur ce coup-là.

1. Ouvrez les outils de développement de Chrome (F12), et allez dans l'onglet Sources.
2. Descendez jusqu'à Souris -> Clic
   
   (cliquez pour agrandir)

---

2. Cliquez sur le bouton !

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

(cliquez pour agrandir)

---

3. Trouvez le glorieux code !

Maintenant, le truc ici est de ne pas s'emporter en appuyant sur la touche, et gardez un œil sur l'écran.

1. Appuyez sur le bouton F11 (étape 1) jusqu'à ce que le code source souhaité apparaisse.
2. Le code source enfin atteint
   • Dans le jsFiddle fourni ci-dessus, j'ai dû appuyer sur F11 108 fois avant d'atteindre le gestionnaire d'événement/fonction souhaité
   • Le résultat peut varier en fonction de la version de jQuery (ou de la bibliothèque du framework) utilisée pour lier les événements.
   • Avec suffisamment de dévouement et de temps, vous pouvez trouver tout gestionnaire d'événement/fonction

---

4. Explication

Je n'ai pas la réponse exacte, ni l'explication de la raison pour laquelle jQuery passe par les nombreuses couches d'abstractions qu'il fait - tout ce que je peux suggérer est que c'est à cause du travail qu'il fait pour abstraire son utilisation du navigateur qui exécute le code.

Voici un jsFiddle avec une version de débogage de jQuery (c'est-à-dire non minifiée). Lorsque vous regardez le code sur le premier point d'arrêt (non minifié), vous pouvez voir que le code gère plusieurs 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 raté lors de votre tentative quand le " l'exécution fait une pause 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 un exemple de Réponse de StackOverflow expliquant les différences.

Enfin, la raison pour laquelle votre fonction est no directement lié au gestionnaire de l'événement de clic est parce que jQuery renvoie une fonction qui est liée. La fonction de jQuery passe à son tour par des couches d'abstraction et des vérifications et quelque part là-dedans, il exécute votre fonction.

Answer 2

Solution 1 : Mise en boîte noire du cadre

Fonctionne très bien, configuration minimale et pas de tierce partie.

Selon Documentation de Chrome :

Que se passe-t-il lorsque l'on met en boîte noire un script ?

Exceptions lancées par le code de la bibliothèque ne fera pas de pause (si la fonction Pause sur exceptions est activée), l'entrée, la sortie et le passage en revue de la bibliothèque code de la bibliothèque, les points d'arrêt de l'écouteur d'événements n'interviennent pas dans le code de la bibliothèque. débogueur ne fera pas de pause sur les points d'arrêt définis dans le code de la bibliothèque. Le site résultat final est vous déboguez le code de votre application au lieu de ressources ressources de tiers.

Voici le flux de travail mis à jour :

1. Ouvrez les outils de développement de Chrome ( F12 o + + i ), allez dans les paramètres (en haut à droite, ou F1 ). Trouvez un onglet sur la gauche appelé " Blackboxing "

2. C'est là que vous mettez le RegEx le motif des fichiers que vous voulez que Chrome ignore pendant le débogage. Par exemple : jquery\..*\.js (modèle global/ humain la traduction : jquery.*.js )
3. Si vous voulez ignorer les fichiers avec motifs multiples vous pouvez les ajouter en utilisant le caractère pipe, | comme ça : jquery\..*\.js|include\.postload\.js (qui agit comme un "ou ce modèle", pour ainsi dire. Ou continuez à les ajouter avec le bouton "Ajouter".
4. Maintenant, continuez à Solution 3 décrite ci-dessous.

Conseil bonus ! J'utilise Regex101 régulièrement (mais il y en a beaucoup d'autres : ) pour tester rapidement mes modèles de regex rouillés et trouver où je me trompe avec le débogueur de regex pas à pas. Si vous ne maîtrisez pas encore les expressions régulières, je vous recommande de commencer à utiliser des sites qui vous aident à les écrire et à les visualiser, tels que http://buildregex.com/ y https://www.debuggex.com/

Vous pouvez également utiliser le menu contextuel lorsque vous travaillez dans le panneau "Sources". Lorsque vous visualisez un fichier, vous pouvez faire un clic droit dans l'éditeur et choisir Blackbox script. Cela ajoutera le fichier à la liste du panneau Paramètres :

Solution 2 : Événement visuel

C'est un excellent outil à avoir :

Visual Event est un bookmarklet Javascript open-source qui fournit des informations de débogage sur les événements attachés au DOM. des informations de débogage sur les événements qui ont été attachés à des éléments DOM éléments. Visual Event montre :

• Quels sont les éléments auxquels sont associés des événements ?
• Le type d'événements attachés à un élément
• Le code qui sera exécuté lorsque l'événement est déclenché
• Le fichier source et le numéro de ligne où la fonction jointe a été définie (navigateurs Webkit et Opera uniquement).

Solution 3 : Débogage

Vous pouvez mettre le code en pause lorsque vous cliquez quelque part dans la page, ou lorsque le DOM est modifié... et autres types de points d'arrêt JS qu'il sera utile de connaître. Vous devez appliquer boîte noire ici pour éviter un cauchemar.

Dans ce cas, je veux savoir ce qui se passe exactement lorsque je clique sur le bouton.

1. Ouvrez Dev Tools -> onglet Sources, et sur la droite trouvez Event Listener Breakpoints :

   

2. Développez Mouse et sélectionnez click

3. Cliquez maintenant sur l'élément (l'exécution doit s'interrompre), et vous êtes maintenant en train de déboguer le code. Vous pouvez parcourir tout le code en appuyant sur F11 (qui est Entrer ). Ou reculez de quelques sauts dans la pile. Il peut y avoir un une tonne de sauts

Solution 4 : Mots clés de la pêche

Lorsque Dev Tools est activé, vous pouvez effectuer une recherche dans l'ensemble de la base de code (tout le code dans tous les fichiers) avec + + F ou :

et la recherche #envio ou n'importe quel tag/classe/id qui, selon vous, lance la fête et vous risquez d'arriver plus vite que prévu.

Sachez que parfois, il n'y a pas seulement un img mais beaucoup d'éléments empilés, et vous pouvez ne pas savoir lequel déclenche le code.

Si cela dépasse un peu vos connaissances, jetez un coup d'œil à Tutoriel de Chrome sur le débogage .

Answer 3

On dirait que le "...et je saute ligne par ligne..." est erronée. Faites-vous StepOver ou StepIn et êtes-vous sûr de ne pas manquer accidentellement l'appel pertinent ?

Cela dit, le débogage des frameworks peut être fastidieux pour cette raison précise. Pour pallier ce problème, vous pouvez Activez l'expérience "Activer le support de débogage des frameworks". . Bon débogage ! :)

Answer 4

Vous pouvez utiliser findHandlersJS

Vous pouvez trouver le gestionnaire en faisant dans la console de chrome :

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

Vous obtiendrez les informations suivantes dans la console de chrome :

• élément
  L'élément réel où le gestionnaire d'événement a été enregistré dans
• événements
  Tableau contenant des informations sur les gestionnaires d'événements jquery pour le type d'événement qui nous intéresse (par exemple, clic, changement, etc.).
• manipulateur
  Méthode réelle de traitement des événements 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
  Liste des éléments visés par le gestionnaire d'événements. Par exemple, pour un gestionnaire d'événements délégué qui est enregistré dans l'objet document et qui cible tous les boutons d'une page, cette propriété énumérera tous les boutons de la page. Vous pouvez les survoler et les voir mis en évidence en chrome.

Plus d'informations aquí et vous pouvez l'essayer dans cet exemple de site aquí .

Answer 5

Cette solution nécessite le La méthode de données de jQuery .

1. Ouvrez la console de Chrome (mais n'importe quel navigateur avec jQuery chargé fonctionnera).
2. Exécuter $._data($(".example").get(0), "events")
3. Examinez la sortie pour trouver le gestionnaire d'événement souhaité.
4. Cliquez avec le bouton droit de la souris sur "handler" et sélectionnez "Show function definition".
5. Le code sera affiché dans l'onglet Sources

$._data() ne fait qu'accéder à la méthode de données de jQuery. Une alternative plus lisible pourrait être jQuery._data() .

Intéressant point de vue de cette réponse SO :

A partir de jQuery 1.8, les données de l'événement ne sont plus disponibles à partir de l'"API publique" pour les données. Lire cet article de blog sur jQuery . Vous devriez maintenant utiliser ceci à la place :

jQuery._data( elem, "events" ); elem doit être un élément HTML, et non un objet objet jQuery, ou un sélecteur.

Veuillez noter qu'il s'agit d'une structure interne, "privée", et que ne doit pas être modifiée. Utilisez-la uniquement à des fins de débogage.

Dans les anciennes versions de jQuery, vous devrez peut-être utiliser l'ancienne méthode qui est la suivante :

jQuery( elem ).data( "events" );

Une version agnostique de jQuery serait : (jQuery._data || jQuery.data)(elem, 'events');