web-dev-qa-db-fra.com

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

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 image orange:

enter image description here

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

3 ) Au sommet du code source, il y a des tonnes de sources de script. Bien sûr, je sais lequel du bouton appelle, je l'ai codé : <script src="js/jquery2.js" type="text/javascript"></script>

4 ) Dans ce fichier, vous pouvez trouver: $(".formSend").click(function() { ... }); qui est déclenché par le bouton (pour effectuer une validation de formulaire assez complexe et submit) et ce que je veux, c'est pouvoir le trouver à l'aide de chrome outils de développement sur n'importe quel site Web.

Comment pouvons-nous savoir où l'appel de l'élément?

L'auditeur n'a pas fonctionné pour moi

Alors j'ai alors essayé de regarder les écouteurs d'événements de clic, ce qui semblait être une valeur sûre pour moi mais ... il n'y a pas de jquery2.js là-dedans (et je ne saurais pas vraiment de quel fichier le code est, donc je perdrais du temps vérifiant tous ces ...):

enter image description here

Ma fonction $(".formSend").click(function() { ... }); dans le fichier jquery2.js n'y est pas.

Jesse explique pourquoi dans sa réponse :

"Enfin, la raison pour laquelle votre fonction n'est pas directement liée au gestionnaire d'événements click est que jQuery renvoie une fonction qui est liée. La fonction de jQuery passe à son tour à travers des couches d'abstraction et des contrôles, et quelque part à l'intérieur. , il exécute votre fonction. "

EDIT: J'ai rassemblé toutes les méthodes utilisées pour poser cette question dans l'une des réponses ci-dessous suggérées par certains d'entre vous.

javascriptjquerygoogle-chromegoogle-chrome-devtools
279
Carles Alcolea

Solution 1: cadre noir

Fonctionne très bien, juste un peu de mise en place, mais pas de tiers.

Modifier : Depuis l'écriture de cette solution, Chrome (et d'autres navigateurs aussi, j'en suis sûr) a facilité la tâche des scripts de boîte noire.

Selon documentation de Chrome :

Qu'est-ce qui se passe quand vous blackbox un script?

Les exceptions levées à partir du code de la bibliothèque ne seront pas mises en pause (si l'option Pause sur les exceptions est activée). Dans le code de la bibliothèque, le débogueur ne fera pas de pause sur les points d'arrêt définis dans le code de la bibliothèque. Le résultat final est que vous déboguez le code de votre application au lieu de ressources tierces.

Voici le flux de travail mis à jour:

  1. Pop open Chrome Outils de développement (F12 ou ⌘+⌥+i), allez dans les paramètres (en haut à droite, ou F1). Trouvez un onglet à gauche appelé " Blackboxing "

enter image description here

  1. Et c’est là que vous placez le motif RegEx des fichiers que vous souhaitez éviter de passer. Par exemple: jquery\..*\.js (( human translation: jquery.*.js)
  2. Si vous voulez ignorer des fichiers avec plusieurs modèles , vous pouvez les ajouter en utilisant le caractère de canal comme suit: jquery\..*\.js|include\.postload\.js. Ou continuez simplement à les ajouter avec le bouton "Ajouter".
  3. Appliquez maintenant la solution 3 décrite ci-dessous.

Astuce bonus : J'utilise Regex101 (mais il y en a beaucoup d'autres) pour tester rapidement mes motifs de regex rouillés et découvrir où 'ai tort avec le débogueur pas à pas regex.

Vous pouvez également utiliser le menu contextuel lorsque vous travaillez dans le panneau Sources. Lors de la visualisation d'un fichier, vous pouvez cliquer avec le bouton droit de la souris sur l'éditeur. Et vous pouvez cliquer avec le bouton droit sur un fichier dans le navigateur de fichiers. À partir de là, choisissez Blackbox Script. Cela ajoutera le fichier à la liste dans le panneau Paramètres:

enter image description here

Solution 2: événement visuel

enter image description here

C'est un bon outil à avoir .

Solution 3: Parcourir le code

Ce genre de douloureux mais facile ( blackboxing se révélera très efficace ici).

  1. Ouvrez Outils de développement -> onglet Sources et à droite, trouvez Event Listener Breakpoints:

    enter image description here

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

  3. Maintenant, cliquez sur l'élément (l'exécution doit être suspendue) et c'est ici que le jeu commence: il suffit d'appuyer sur F11 (qui est Entrez ) pour parcourir tout le code. Asseyez-vous bien, il peut y avoir une tonne de sauts .

Solution 4: mode de survie

Je reste toujours avec ⌘+⌥+F ou:

enter image description here

et en recherchant #envio ou quelle que soit la balise/la classe/l’id que vous pensez a commencé la fête, en lisant toutes les constatations pour essayer de déterminer quel code pourrait être utilisé , se sentir perdant et le sentiment qu'il doit exister un moyen sûr de vraiment savoir QUOI est déclenché par le bouton.

Mais sachez que parfois, il y a non seulement une img mais des tonnes de divs qui se chevauchent, et vous ne pouvez même pas savoir ce qui déclenche le code. Vous ne devriez probablement pas avoir à utiliser cette méthode.

142
Carles Alcolea

Réponse d'Alexander Pavlov se rapproche le plus de ce que vous voulez.

En raison de l’extension de l’abstraction et des fonctionnalités de jQuery, de nombreux obstacles doivent être franchis pour que l’on puisse se rendre au cœur de l’événement. J'ai mis en place ceci jsFiddle pour démontrer le travail.

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

Vous étiez proche sur celui-ci.

  1. Ouvrez les ChromeDev Tools (F12) et accédez à l'onglet Sources.
  2. Accédez à la souris -> cliquez
    Chrome Dev Tools -> Sources tab -> Mouse -> Click
    (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é:

Chrome Dev Tools paused script execution (cliquez pour agrandir)

3. Trouvez le code glorieux!

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

  1. Appuyez sur la F11 touche (Pas à pas) jusqu'à ce que le code source souhaité apparaisse
  2. Le code source a finalement atteint
    • Dans l’échantillon jsFiddle fourni ci-dessus, j’ai dû appuyer sur F11  108 fois avant d'atteindre le gestionnaire d'événements/la fonction désirés
    • Votre kilométrage 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 temps et d’engagement, vous pouvez trouver n’importe quel gestionnaire (/) d’événement

Desired event handler/function

4. Explication

Je n'ai pas la réponse exacte, ni l'explication quant à la raison pour laquelle jQuery parcourt les nombreuses couches d'abstractions qu'il fait - tout ce que je peux dire, c'est que c'est à cause du travail qu'il fait pour soustraire son utilisation au 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 examinez le code sur le premier point d'arrêt (non minifié), vous constatez qu'il traite de nombreuses 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 avez manqué votre tentative lorsque l'exécution " est suspendue et que je saute ligne par ligne ", c'est parce que vous avez peut-être utilisé la fonction "Pas à pas" au lieu de Intervenir. Voici un réponse StackOverflow expliquant les différences.

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

192
Jesse

On dirait que "... et que je saute ligne par ligne ..." est faux. Avez-vous StepOver ou StepIn et êtes-vous sûr de ne pas manquer l'appel accidentellement?

Cela dit, les frameworks de débogage peuvent être fastidieux pour cette raison. Pour atténuer le problème, vous pouvez activer l’expérience "Enable support of debugging support" . Bon débogage! :)

16
Alexander Pavlov

Vous pouvez utiliser findHandlersJS

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

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

Les informations suivantes seront imprimées dans la console de chrome:

  • élément
    L'élément réel dans lequel le gestionnaire d'événements 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, modification, etc.)
  • gestionnaire
    Méthode de gestionnaire d’événements que vous pouvez voir en cliquant dessus avec le bouton droit de la souris et en sélectionnant Afficher la définition de la fonction
  • sélecteur
    Le sélecteur prévoyait des événements délégués. Ce sera vide pour les événements directs.
  • des cibles
    Répertorie les éléments que ce gestionnaire d'événements cible. Par exemple, pour un gestionnaire d'événements délégué enregistré dans l'objet de document et qui cible tous les boutons d'une page, cette propriété répertorie tous les boutons de la page. Vous pouvez les survoler et les voir surlignés en chrome.

Plus d'infos ici et vous pouvez l'essayer dans cet exemple de site ici .

7
Rui

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

  1. Ouvrez la console de Chrome (bien que tout navigateur avec jQuery chargé fonctionnera)
  2. Exécutez $._data($(".example").get(0), "events")
  3. Explorez la sortie pour trouver le gestionnaire d'événements souhaité.
  4. Cliquez avec le bouton droit de la souris sur "gestionnaire" et sélectionnez "Afficher la définition de la fonction".
  5. Le code sera affiché dans l'onglet Sources

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

Point intéressant par this SO answer :

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

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

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

Dans les anciennes versions de jQuery, vous devrez peut-être utiliser l'ancienne méthode, à savoir:

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

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

4
apptaro