Suivi de l'exécution de Javascript dans Chrome - comment?
J'ai ~ 100-200 fonctions javascript chargées sur un site web. Je souhaite déterminer quelle fonction javascript est exécutée lorsque je clique sur un élément ou un autre dans Google Chrome. Comment puis-je le faire avec Chrome Outils de développement Web? Merci!
Une approche simple consiste à démarrer Chrome Outils de développement, accédez au panneau de sources et appuyez sur F8 (Pause Execution). Cela cassera sur la première instruction JavaScript exécutée.
Une autre approche consiste à définir un point d'arrêt d'écouteur d'événements pour mousedown ou de cliquer sur: dans le même panneau Sources, développez les "Points d'arrêt d'écouteurs d'événements" dans la barre latérale droite. Développez l’élément "Souris" et cochez les événements que vous souhaitez interrompre (par exemple, "cliquez", "mousedown"). Ensuite, cliquez sur votre page et observez la pause d’exécution de JS dans les outils de développement. Prendre plaisir!
Une alternative à la pause d'exécution (qui fonctionne généralement très bien, mais ne fonctionne pas bien sur les pages qui exécutent fréquemment du code périodique)
Vous pouvez utiliser le profileur de chrome pour enregistrer pendant une courte période. Une fois que vous avez terminé l'enregistrement, il vous montrera un résumé du temps passé par l'unité centrale à l'une des fonctions exécutées pendant l'enregistrement. Nous ne nous intéressons pas vraiment au temps du processeur, nous utilisions simplement cet outil car il nous indiquera quelles fonctions ont été exécutées.
Fondamentalement, commencez à enregistrer:
Ensuite, effectuez votre action (par exemple, cliquez sur un bouton de la page Web ou faites ce qui entraînera l'exécution du code intéressant). Puis arrêtez l'enregistrement et affichez le résultat:
Remarquez que j'utilise le mode de visualisation "de haut en bas" - qui vous montre la pile d'appels, et vous pouvez faire un zoom avant pour voir quelles fonctions ont finalement été appelées. Par exemple, une fonction anonyme a été appelée en premier (probablement à cause de setTimeout ou peut-être d’un gestionnaire d’événements click), puis elle a appelé une méthode identifiée par s.track.s.t qui s'appelle alors s_doPlugins etc. etc. L'important est qu'en mode descendant, les entrées situées en haut de l'arborescence constituent le début d'une pile d'appels et qu'elles constituent donc généralement une fonction enregistrée par une fonction de minuterie (setTimeout, setInterval, requestAnimationFrame, etc ...) ou un gestionnaire d’événements (click, mousemove, load, etc...).
Vous pouvez également utiliser le mode de visualisation "Carte", qui vous indique quelle fonction a été appelée à quelle heure, tracée sur une carte de gauche à droite. Cela vous aide à identifier la fonction que vous recherchez réellement, car vous avez probablement une idée de l'heure à laquelle le code est exécuté dans votre enregistrement (par exemple, au centre).
bTW - Je pense que la plupart des autres navigateurs modernes ont une capacité similaire.
Je souhaite déterminer quelle fonction javascript est exécutée lorsque je clique sur un élément ou un autre dans Google Chrome.
Maintenant, il existe une grande extension appelée Visual Event qui fait exactement cela. Il ne reconnaît que les gestionnaires d'événements définis via les bibliothèques js populaires (jQuery, YUI, MooTools, Prototype, Glow) et les événements DOM de niveau 0.