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

Je suis en train de m'enseigner le Google Fermeture de la bibliothèque javascript. Je suis l'examen de la TreeControl UI widget.

Comment puis-je utiliser Chrome Console d'analyser ce que les fonctions sont exécutées lorsque je clique sur le "Cut" dans la démo ci-dessous? Par exemple, je peux en quelque sorte de définir un point de rupture pour qui? J'ai essayé de voir le code source et en regardant autour, mais j'ai l'impression que Chrome Console peut offrir plus d'une méthode systématique.

https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html

InformationsquelleAutor dangerChihuahua007 | 2012-06-13
  1. 24

    Avec les Outils de développement Chrome fenêtre ouverte, cliquez sur les "Sources" de l'onglet. Si vous ne voyez rien, vous devrez peut-être cliquer sur "Afficher Navigator" bouton dans le coin supérieur gauche de l'onglet. Avec le navigateur ouvrir, naviguez jusqu'au dossier où le cut() fonction est définie (dans votre cas, c'est demo.html). Lorsque vous apportez un fichier dans la vue, de trouver la ligne où le cut() fonction est définie, puis de 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 la ligne sur le côté gauche.

    Une fois que vous avez configuré votre point d'arrêt(s), faire quelque chose sur la page qui déclencherait la cut() fonction et le navigateur doit briser l'exécution du script dès qu'il pénètre dans le cut() fonction (en supposant que votre point d'arrêt sur la première ligne au sein de la cut() fonction). À partir de ce point vous pouvez utiliser les commandes en haut à droite de l'onglet à l'étape in/out/autour de code et de voir ce qu'il se passe.

    Voici une capture d'écran de moi: http://d.pr/i/f6BO

    Aussi, voici une superbe vidéo qui parle en utilisant le Chrome Dev tools, y compris la définition de points d'arrêt: http://www.youtube.com/watch?v=nOEw9iiopwI

    • Merci, définition de points d'arrêt dans cut() et l'affichage de la pile d'appel après le déclenchement, il fonctionne très bien.
    • Votre capture d'écran lien est rompu.
    InformationsquelleAutor Kai
  2. 95

    Vous cherchez peut-être pour le "Écouteur d'Événement de points d'arrêt de la section" sur le côté droit de la Débogueur zone. Ouvert que le haut et sélectionnez l'événement click en vertu de la "souris". Voir l'image à l'écran. Puis cliquez sur le bouton dans l'application et vous serez immédiatement prises pour l'exécution d'un code.

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

    • C'est cool, mais il serait agréable d'être en mesure de sauter le jQuery et faire prendre à votre fonction, je pense que IE11 a cela, difficile de croire que IE a une fonctionnalité que je veux, que Chrome n'est pas
    • Ce doit être marqué comme réponse correcte.
    • Réponse parfaite 🙂
    • Serj Sagan - vous pouvez ignorer toutes les js de tracé par l'ouverture d'outils de développement (f12), frapper f1 (paramètres), cliquez sur le Blackboxing élément de menu de gauche, et en entrant le nom du fichier que vous souhaitez ignorer (comme jquery.js). Alors vous ne serez pas interrompu avec impossible de retracer la bibliothèque javascript code qui ne vous intéressent pas, et peuvent se concentrer sur les choses que VOUS (ou un autre développeur) a écrit et souhaitez diagnostiquer.
    InformationsquelleAutor
  3. 12

    La chose que vous cherchez s'appelle 'Profilage'.

    Il peut être réalisé par:

    1. Aller à des Profils
    2. Choisissez la première option ("Collect JavaScript CPU Profil")
    3. Démarrer avant d'appuyer sur le bouton "Couper"
    • Alors quoi? I. ve cliqué sur la case à cocher, mais rien ne s'est passé. Pouvez-vous me dire quoi faire ensuite?
    • Génial l'astuce pour voir ce que JS est appelé sans connaître le nom de la fonction.
    InformationsquelleAutor Jackie Chan
  4. 2

    Cela peut être utile pour certaines personnes:

    Vous pouvez cliquer-droit sur un élément dans l'onglet éléments et utilisez "briser sur" briser sur, par exemple, de sous-élément de modification. https://developer.chrome.com/devtools/docs/javascript-debugging

    InformationsquelleAutor timhc22