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

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

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

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

Comment savoir où l'élément appelle?

L'onglet Auditeurs ne fonctionnait pas pour moi. Alors j'ai essayé de regarder les écouteurs des événements de clic, ce qui me semblait être une valeur sûre mais ... il n'y a pas jquery2.jsdedans (et je ne saurais pas vraiment de quel fichier est le code, donc je perdrais du temps à vérifier tout cela .. .):

Ma $(".formSend").click(function() { ... });fonction dans le jquery2.jsfichier n'est pas là.

Jesse explique pourquoi :

"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, à son tour, passe par certaines couches d'abstraction et vérifie, et quelque part là-dedans, 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 .

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

En raison de l'étendue de l'abstraction et de la fonctionnalité de jQuery, beaucoup de cerceaux 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. Descendre jusqu'à la souris -> Cliquer (cliquer pour agrandir)
   
   

2. Cliquez sur le bouton!

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

(cliquez pour agrandir)

3. Trouvez le code glorieux!

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

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

4. Explication

Je n'ai pas la réponse exacte, ni d'explication sur la raison pour laquelle 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 fait pour soustraire son utilisation au 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 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 l'avez manqué lors de votre tentative lorsque "l' exécution s'interrompt et que 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énements click est que jQuery renvoie une fonction qui est liée. La fonction de jQuery passe à son tour par quelques couches d'abstraction et vérifie, et quelque part là-dedans, elle exécute votre fonction.

Solution 1: cadre de blackboxing

Fonctionne très bien, configuration minimale et aucun tiers.

Selon la documentation de Chrome :

Que se passe-t-il lorsque vous blackboxez un script?

Les exceptions levées à partir du code de la bibliothèque ne se mettront pas en pause (si la pause sur les exceptions est activée), l'entrée / sortie / le contournement du code de la bibliothèque, les points d'arrêt de l'écouteur d'événements ne se cassent pas dans le code de la bibliothèque, le débogueur ne s'arrêtera pas sur les points d'arrêt définis dans la bibliothèque code. Le résultat final est que vous déboguez votre code d'application au lieu de ressources tierces.

1. Ouvrez les outils de développement Chrome ( F12ou ⌘+ ⌥+ i), accédez aux paramètres (en haut à droite ou F1). Trouvez un onglet sur la gauche appelé " Blackboxing "

2. C'est là que vous placez le modèle RegEx des fichiers que vous souhaitez que Chrome ignore lors du débogage. Par exemple: jquery\..*\.js(modèle glob / traduction humaine :jquery.*.js )
3. Si vous souhaitez ignorer des fichiers avec plusieurs modèles, vous pouvez les ajouter en utilisant le caractère pipe |, comme ceci: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. Passez maintenant à la solution 3 décrite ci-dessous.

Astuce bonus! J'utilise Regex101 régulièrement (mais il y a beaucoup d' autres:) pour tester rapidement mes modèles regex rouillés et savoir où je suis mal à l'expression rationnelle étape par étape débogueur. Si vous n'êtes pas encore "à l'aise" dans 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/ et https://www.debuggex.com/

Vous pouvez également utiliser le menu contextuel lorsque vous travaillez dans le panneau Sources. Lorsque vous affichez un fichier, vous pouvez cliquer avec le bouton droit dans l'éditeur et choisir Blackbox Script. Cela ajoutera le fichier à la liste dans le panneau Paramètres:

Solution 2: événement visuel

C'est un excellent outil pour avoir :

Visual Event est un bookmarklet Javascript open source qui fournit des informations de débogage sur les événements qui ont été attachés aux éléments DOM. L'événement visuel montre:

• Quels éléments sont associés à des événements
• Le type d'événements attachés à un élément
• Le code qui sera exécuté avec 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 d' autres types de points d'arrêt JS qui seront utiles à connaître. Vous devez appliquer la blackboxing 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 Mouseet sélectionnezclick

3. Cliquez maintenant sur l'élément (l'exécution doit s'arrêter) et vous déboguez maintenant le code. Vous pouvez parcourir tous les codes en appuyant sur F11(qui est Step in ). Ou remontez quelques sauts dans la pile. Il peut y avoir une tonne de sauts

Solution 4: mots clés de pêche

Avec Dev Tools activé, vous pouvez rechercher toute la base de code (tout le code dans tous les fichiers) avec ⌘+ ⌥+ Fou:

et la recherche #envioou quel que soit le tag / classe / id que vous pensez commence la fête et vous pouvez arriver quelque part plus rapidement que prévu.

Sachez parfois qu'il n'y a pas seulement un, imgmais beaucoup d'éléments empilés, et vous ne savez peut-être pas lequel déclenche le code.

Si cela vous échappe un peu, consultez le didacticiel de Chrome sur le débogage .

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

Cela dit, les cadres de débogage peuvent être fastidieux pour cette raison précisément. Pour atténuer le problème, vous pouvez activer l'expérience «Activer la prise en charge du débogage des frameworks» . Bon débogage! :)

Vous pouvez utiliser findHandlersJS

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

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

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

• élément
  L' réel dans lequel le gestionnaire d'événements a été enregistré
• é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 réels que vous pouvez voir en cliquant dessus avec le bouton droit 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 avec les éléments ciblés par ce gestionnaire d'événements. Par exemple, pour un gestionnaire d'événements délégué qui est enregistré dans l'objet document et 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'informations ici et vous pouvez l'essayer dans cet exemple de site ici .

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

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

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

Point intéressant par cette réponse SO :

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

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

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

Dans les anciennes versions de jQuery, vous pourriez avoir à utiliser l'ancienne méthode qui est:

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

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