Attraper le code javascript spécifique en cours d'exécution onClick

Question

Je travaille sur un site qui contient beaucoup de javascript et de jquery hérités et il n'y a pas de documentation pour montrer ce qui se passe quand.

J'ai un problème spécifique à résoudre et je ne trouve pas le code approprié qui est en cours d'exécution quand un bouton est cliqué. Pour m'éviter de parcourir (et de comprendre) des centaines de lignes de scripts patrimoniaux, existe-t-il une fonctionnalité, éventuellement dans Firebug, qui permettra d'identifier quel script est en cours d'exécution lorsque je clique sur un bouton?

Merci pour votre aide.

Answer 1

Je crois qu'il existe une fonctionnalité dans la fenêtre de la console de Firebug appelée Profile. Cliquez sur le profil, cliquez sur le bouton, puis cliquez à nouveau sur le profil. Cela devrait vous donner toutes les fonctions qui ont été appelées pendant ce temps. Soyez averti que si ce code inclut jQuery, vous pourriez obtenir une longue liste de fonctions car jQuery utilise des tonnes dans son code. Malheureusement, le profileur montrera également des fonctions anonymes, ce qui peut vraiment être une douleur.

Sinon, effectuez une recherche dans le code de la classe ou de l'ID du bouton et parcourez-les. Si vous avez un identifiant de fancy alors vous pourriez faire une recherche de #fancy dans votre code et tenter de le trouver. Cela peut vous conduire dans un direction générale, au moins.

Answer 2

Dans Firebug, vous pouvez définir un point d'arrêt dans certains JS, puis vous obtenez une pile qui vous permettra de connaître la pile d'appels de la fonction en cours. Donc, si vous définissez le point d'arrêt dans la fonction utilisée par plusieurs gestionnaires, vous pouvez l'utiliser pour savoir exactement dans quel gestionnaire vous êtes.

Cela ne fonctionnera probablement pas si vous utilisez des rappels AJAX et autres.

Answer 3

Vous pouvez cliquer sur le bouton "Break on next" de Firebug (dans l'onglet Script, il ressemble à un bouton de pause), puis appuyez sur le bouton que vous voulez déboguer. La prochaine fois qu'un code JavaScript sera exécuté, Firebug entrera dans le débogueur et vous montrera cette ligne de code.

Answer 4

Le bouton de rupture n'a pas fonctionné pour moi. Au lieu de cela, j'ai édité l'attribut onclick avec FireBug et je l'ai ajouté à "debugger"; ... alors vous vous casserez là dès que vous cliquez :)

Answer 5

Aucune des réponses ci-dessus n'a fonctionné pour moi. J'essaie d'utiliser Firebug pour comprendre comment une fonctionnalité sur une page fonctionne pour un site sur lequel je n'ai aucun contrôle. Voici ce qui a fonctionné pour moi.

Tout d'abord, a obtenu l'id de l'élément que je suis en cliquant sur de la source de la page, puis obtenir une référence temporaire en créant une montre (sous l'onglet script):

tmp=document.getElementById("idOfElement")

Suivant , J'ai assigné la valeur onclick actuelle à une autre variable temporaire.

oldfunc=tmp.onclick

Ensuite, je défini une nouvelle fonction onclick. Initialement, j'ai essayé de mettre debugger; comme première chose dans la fonction, mais cela ne fonctionne pas! Ainsi, au lieu, je créé une alerte:

tmp.onclick = function() { alert("Ok"); oldfunc() }

Maintenant, dès que je clique sur le bouton l'alerte arrive, à quel point je clique alors sur le bouton « pause sur suivant » comme indiqué dans un autre répondre à cette question. Ensuite, je rejette l'alerte et immédiatement je suis dans le débogueur au bon endroit. Dans mon cas, le bouton "Break on next" ne fonctionnait pas tout seul, car il y a beaucoup d'autres événements, le simple fait de passer la souris sur la page provoquait l'activation du point d'arrêt, m'empêchant de cliquer sur le bouton .