Question Comment puis-je savoir quelles fonctions sont appelées lorsqu'un bouton est pressé dans Chrome Console?


J'essaie de m'apprendre 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 en quelque sorte établir un point de rupture pour cela? J'ai essayé de regarder la source et de regarder autour de moi, 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


35
2018-06-13 04:01


origine


Réponses:


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. Lorsque le navigateur est ouvert, accédez au fichier dans lequel cut() fonction est définie (dans votre cas, il est demo.html). Lorsque vous apportez le fichier en vue, trouvez la ligne où le cut() fonction est définie, puis définir un point d'arrêt sur la première ligne dans cette fonction. Vous pouvez définir un point d'arrêt en cliquant sur le numéro de ligne à gauche.

Une fois que vous avez défini vos points de rupture, faites quelque chose sur la page qui déclenche la cut() fonction et le navigateur devrait casser l'exécution du script dès qu'il entre dans le cut() fonction (en supposant que votre point d'arrêt est sur la première ligne dans le cut() fonction). A 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 le faisant: http://d.pr/i/f6BO

En outre, voici une excellente vidéo qui parle de l'utilisation des outils de développement Chrome, y compris la définition de points d'arrêt: http://www.youtube.com/watch?v=nOEw9iiopwI


19
2018-06-13 04:38



Vous recherchez peut-être la section "Points d'arrêt du récepteur d'événements" du côté droit de la zone du débogueur. Ouvrez-le et sélectionnez l'événement click sous "mouse". Voir l'image à l'écran. Cliquez ensuite sur le bouton dans l'application et vous serez immédiatement amené au code en cours d'exécution.

enter image description here


82
2018-06-13 04:42



La chose que vous recherchez s'appelle le «profilage».

Cela peut être réalisé par:

  1. Aller aux profils
  2. Choisissez la première option ("Collecte le profil d'unité centrale JavaScript")
  3. Démarrer avant d'appuyer sur le bouton 'Cut'

12
2018-06-13 04:39



Cela peut être utile pour certaines personnes:

Vous pouvez cliquer avec le bouton droit de la souris sur un élément de l'onglet Éléments et utiliser la touche "pause" pour accéder, par ex. modification de sous-élément. https://developer.chrome.com/devtools/docs/javascript-debugging


2
2017-09-05 09:48