Comment savoir quelles fonctions sont appelées lorsqu'un bouton est enfoncé dans la console Chrome Console?
J'essaie d'enseigner moi-même la bibliothèque javascript de Google Closure. J'examine le widget TreeControl UI.
Comment puis-je utiliser Chrome Console pour analyser quelles fonctions sont exécutées lorsque je clique sur le bouton "Couper" dans la démo ci-dessous? Par exemple, puis-je définir un point d'arrêt pour cela? I ' J'ai essayé de voir la source et de regarder autour, mais je pense que Chrome Console peut offrir une méthode plus systématique.
https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html
Avec la fenêtre Chrome Developer Tools ouverte, cliquez sur l'onglet "Sources". Si vous ne voyez rien, vous devrez peut-être cliquer sur le bouton "Afficher le navigateur" dans le coin supérieur gauche. de cet onglet. Le navigateur étant ouvert, accédez au fichier dans lequel la fonction cut() est définie (dans votre cas, c'est demo.html). Lorsque vous affichez le fichier, recherchez la ligne où la fonction cut() est définie, puis définissez un point d'arrêt sur la première ligne de cette fonction. Vous pouvez définir un point d'arrêt en cliquant sur le numéro de ligne sur le côté gauche.
Une fois que vous avez défini vos points d'arrêt, faites quelque chose sur la page qui déclencherait la fonction cut() et le navigateur devrait interrompre l'exécution du script dès qu'il entre dans la fonction cut() ( en supposant que votre point d'arrêt se trouve sur la première ligne de la fonction cut()). À partir de là, vous pouvez utiliser les commandes en haut à droite de l'onglet pour entrer/sortir/contourner le code et voir ce qui se passe.
Voici une capture d'écran de moi en train de le faire: http://d.pr/i/f6BO
En outre, voici une excellente vidéo qui parle de l'utilisation des outils de développement Chrome Dev, y compris la définition des points d'arrêt: http://www.youtube.com/watch?v=nOEw9iiopwI
Vous recherchez peut-être la section "Points d'arrêt du récepteur d'événements" sur le côté droit de la zone du débogueur. Ouvrez-le et sélectionnez l'événement de clic sous "souris". Voir l'image à l'écran. Cliquez ensuite sur le bouton dans l'application et vous serez immédiatement redirigé vers le code en cours d'exécution.
La chose que vous recherchez s'appelle "Profilage".
Il peut être atteint par:
- Accéder aux profils
- Choisissez la première option ("Collecter le profil CPU JavaScript")
- Démarrez-le avant d'appuyer sur le bouton "Couper"
Cela peut être utile pour certaines personnes:
Vous pouvez cliquer avec le bouton droit sur un élément dans l'onglet Éléments et utiliser `` Activer '' pour activer par exemple modification de sous-élément. https://developer.chrome.com/devtools/docs/javascript-debugging