Javascript suivi d'exécution dans google Chrome - comment?

J'ai ~ 100-200 fonctions javascript chargé sur un site web.
Je veux déterminer quelle fonction javascript est exécuté lorsque je clique sur un élément ou d'une autre dans Google Chrome.
Comment puis-je le faire avec du Chrome Web, Outils de développement?
Merci!

InformationsquelleAutor Pave | 2012-02-03
  1. 75

    Une approche simple est de commencer Chrome Developer Tools, basculez vers le panneau des Sources et de frapper F8 (Suspendre l'Exécution). Cela cassera le premier exécuté JavaScript déclaration.

    Une autre approche consiste à définir un écouteur d'événement de point d'arrêt pour mousedown ou cliquez: dans le même panneau des Sources, développez le "Écouteur d'Événement de points d'arrêt" dans la barre latérale droite. Développer la "Souris" et vérifier les événements que vous souhaitez pause (par exemple, "cliquez", "mousedown"). Ensuite, allez sur votre page et voir la JS exécution pause dans les DevTools. Profitez-en!

    • merci beaucoup! quel événement de souris devrais-je attraper si je sélectionne du texte dans FCKeditor, "gauche de la souris cliquez sur", déplace la souris vers un autre lieu et de la libération.
    • "mouseup", peut-être. Pas familier avec le FCKeditor, cependant.
    • je l'ai essayé, mais...ne fonctionne toujours pas...je vais essayer moi-même. thx!
    • OK, puis de vérifier l'ensemble de la "Souris" à la catégorie break sur tous liés à la souris des écouteurs d'événement (vous pouvez décocher la case "mousemove"). Si cela échoue encore pour vous, vous pouvez vérifier toutes les catégories et de décocher un par un si vous frappez sans rapport avec les événements.
    • Salut, j'ai la même question, la situation est presque la même, mais dans mon cas, j'ai juste envie de suivre toute l'exécution de javascript... je veux voir ce que les fonctions de travail, étape par étape, de ne pas juste faire une pause ou de définir des points d'arrêt? Quelque chose comme traceGL... j'ai besoin de comprendre comment la page web fonctionne... (mon javascript libs sont trop grands maintenant, donc j'ai besoin de faire quelques optimisations et trouver le code de duplications...)
    InformationsquelleAutor Alexander Pavlov
  2. 24

    Une alternative à la suspension de l'exécution(qui d'habitude fonctionne très bien, mais ne fonctionne pas bien sur les pages qui, souvent, exécution périodique de code)

    Vous pouvez utiliser google chrome, profiler pour enregistrer pour une courte période de temps. Une fois l'enregistrement terminé, il va vous montrer un résumé des temps cpu passé dans toutes les fonctions qui ont été exécutés pendant l'enregistrement. Nous n'avons pas vraiment de soins sur le temps de calcul, étaient tout simplement à l'aide de cet outil, car il va nous montrer les fonctions exécutées.

    Fondamentalement, il suffit de démarrer l'enregistrement:

    Javascript suivi d'exécution dans google Chrome - comment?

    Alors faites de votre action(par exemple, cliquer sur un bouton sur la page web, ou faire tout ce qui sera la cause de la intéressants code à exécuter). Puis arrêter l'enregistrement et de voir le résultat:

    Javascript suivi d'exécution dans google Chrome - comment?

    Avis je suis à l'aide de "haut en bas" mode d'affichage qui vous montre la pile d'appel, et vous pouvez percer vers le bas pour voir les fonctions qui finalement m'a appelé. Par exemple, certains anonymes fonction a été appelée en premier(probablement en raison de la setTimeout ou peut-être un gestionnaire d'événements click), et puis il a appelé à une méthode identifiée par s.track.s.t qui a ensuite appelé s_doPlugins et ainsi de suite...La chose importante est que du haut vers le bas mode, les entrées au sommet de la forme de l'arbre, le début d'une pile d'appel, et ils sont donc généralement une fonction enregistrés par certains la fonction de minuterie(setTimeout, setInterval, requestAnimationFrame, etc...), ou un gestionnaire d'événements(click, mousemove, load, etc...).

    Vous pouvez également utiliser le "tableau" mode d'affichage, qui affiche la fonction a été appelée à laquelle, tracées sur un graphique à partir de la gauche vers la droite. Cela vous aide à identifier la fonction que vous cherchez vraiment parce que vous avez probablement une idée de ce que le code exécuté au sein de votre enregistrement(par exemple, dans le milieu).

    btw - je crois que la plupart des autres navigateurs modernes ont des capacités similaires.

    InformationsquelleAutor goat
  3. 14

    Je veux déterminer quelle fonction javascript est exécuté lorsque je clique sur un élément ou d'une autre dans Google Chrome.

    Maintenant, il y a une grande extension appelée Visuel De L'Événement qui fait exactement cela. Il ne reconnaît que des gestionnaires d'événement réglé via le populaire bibliothèques js (jQuery, YUI, MooTools, Prototype, de l'Éclat) et DOM Niveau 0 événements.

    • fonctionne bien. Pas sûr au sujet de la sécurité, j'ai donc laisser tomber quand je ne suis pas le débogage.
    InformationsquelleAutor Dmitry Pashkevich