Démarrage rapide : navigation dans le débogueur (JavaScript)

Article
02/24/2013

Ce guide de démarrage rapide montre comment naviguer dans le débogueur Visual Studio et comment afficher l'état du programme dans une session.

Ce guide de démarrage rapide s'adresse aux développeurs qui découvrent le débogage avec Visual Studio et aux développeurs qui souhaitent apprendre à naviguer dans une session de débogage Visual Studio. Il n'explique pas les techniques de débogage. Les fonctions décrites dans l'exemple de code sont conçues pour illustrer les procédures de débogage décrites dans cette rubrique. Les fonctions n'utilisent pas les meilleures pratiques en matière de conception d'applications ou de fonctions. En fait, vous découvrirez rapidement que les fonctions, et l'application elle-même, ne font pas grand-chose.

Les sections de ce guide de démarrage rapide ont été conçues pour être aussi indépendantes que possible ; sautez les sections qui contiennent des informations avec lesquelles vous êtes déjà familiarisé. Vous n'êtes pas tenu également de créer un exemple d'application. Toutefois, nous vous le recommandons et avons rendu le processus aussi simple que possible.

Raccourcis clavier du débogueur. La navigation dans le débogueur Visual Studio est optimisée pour la souris et le clavier. Plusieurs étapes dans cette rubrique présentent l'accélérateur clavier ou la touche de raccourci dans une note entre parenthèses. Par exemple, (clavier : F5) indique que la touche F5 permet de démarrer ou de continuer l'exécution du débogueur.

Notes

Le modèle Module

Les applications Windows Store utilisent souvent le modèle Module JavaScript pour encapsuler des données et des fonctions dans une page. Le modèle Module utilise une clôture unique, à exécution automatique et anonyme pour maintenir la fonctionnalité de la page distincte de l'espace de noms global. Dans cette rubrique, nous appelons cette fonction le module.

Dans cette rubrique

Vous pouvez apprendre à :

Créer un exemple d'application

Définir et exécuter un point d'arrêt, exécuter une fonction pas-à-pas et examiner les données du programme

Fonctions d'exécution pas-à-pas, de survol ou de sortie de code.

Définir un point d'arrêt conditionnel, exécuter le curseur et visualiser une variable

Afficher les données des variables dans la fenêtre Variables locales

Afficher les données des variables et la chaîne prototype d'un objet
Examinez les données de la chaîne de portée

Naviguez jusqu'au code en utilisant la fenêtre Pile d’appels

Créer un exemple d'application

Le débogage est centré sur le code. Ainsi, l'exemple d'application utilise l'infrastructure de l'application Windows Store pour créer un fichier source dans lequel vous pouvez découvrir comment fonctionne la navigation dans une session de débogage et comment examiner l'état du programme. Tous les appels de code s'effectuent à partir de la fonction module du fichier default.js. Aucun contrôle n'est ajouté et aucun événement n'est traité.

Créer une application vide Windows Store en JavaScript. Ouvrez Visual Studio. Sur la page d'accueil, cliquez sur le lien Nouveau projet. Dans la boîte de dialogue Nouveau projet, choisissez JavaScript dans la liste Installé, puis choisissez Windows Store. Dans la liste de modèles de projet, choisissez Application vide. Visual Studio crée une solution et un projet, puis affiche le fichier default.htm dans l'éditeur de code.

Notez les fichiers de script qui sont chargés dans la page.
- Les fichiers base.js et ui.js créent la bibliothèque Windows pour JavaScript. La bibliothèque Windows pour JavaScript est un ensemble de fichiers JavaScript et CSS qui facilitent la création d'applications Windows Store en utilisant JavaScript. Utilisez-la avec HTML, CSS et Windows Runtime pour créer votre application.
- Votre code démarre dans le fichier default.js .
Ouvrir le fichier source default.js. Dans l'Explorateur de solutions, ouvrez le nœud js et choisissez default.js.
Remplacer le contenu de la page par l'exemple de code. Supprimez tout le contenu du fichier default.js. Suivez ce lien : Exemple de code de navigation du débogueur (JavaScript) et copiez le code de la section JavaScript dans le Presse-papiers. (Cliquez sur Précédent dans le navigateur ou la visionneuse d'aide pour revenir sur la page du guide de démarrage rapide.) Dans l'éditeur Visual Studio, collez le code dans le fichier default.js à présent vide. Appuyez sur Ctrl + S pour enregistrer le fichier.

Vous pouvez désormais vous référer aux exemples contenus dans cette rubrique.

Définir et exécuter un point d'arrêt, exécuter une fonction pas-à-pas et examiner les données du programme

La méthode la plus couramment utilisée pour démarrer une session de débogage consiste à choisir Démarrer le débogage dans le menu Déboguer (clavier : F5). L'application démarre et l'exécution se poursuit jusqu'à ce qu'un point d'arrêt soit atteint, que vous suspendiez manuellement l'exécution, qu'une exception se produise ou que l'application se termine.

Lorsque l'exécution est suspendue dans le débogueur, affichez la valeur d'une variable active dans une bulle d'informations en amenant le pointeur de la souris au-dessus de la variable.

Après avoir suspendu l'exécution de l'application (on parle également d'accéder au débogueur), vous contrôlez le mode d'exécution du reste du code du programme. Continuez ligne par ligne, déplacez-vous entre un appel de la fonction et la fonction elle-même, ou exécutez une fonction appelée en une seule étape. Ces procédures désignent une exécution pas à pas du code de l'application. Vous pouvez également reprendre l'exécution standard de l'application, poursuivre l'exécution jusqu'au point d'arrêt que vous avez défini ou jusqu'à la ligne où vous avez positionné votre curseur. Vous pouvez arrêter la session de débogage à tout moment. Le débogueur est conçu pour effectuer les opérations de nettoyage et l'exécution de sortie nécessaires.

Exemple 1

Dans cet exemple, vous définissez un point d'arrêt dans le corps de la fonction module dans default.js lorsqu'elle appelle la première instruction utilisateur. Ensuite, effectuez une exécution pas-à-pas de la fonction, affichez les valeurs de la variable dans les bulles d'informations du débogueur, puis arrêtez le débogage.

Définir un point d'arrêt. Définissez un point d'arrêt au niveau de l'instruction callTrack = "module function"; qui se produit juste après l'appel de app.start(). Sélectionnez la ligne dans la marge grisée de l'éditeur de code source (clavier : positionnez le curseur sur la ligne et choisissez la touche F9).

L'icône du point d'arrêt apparaît dans la marge.
Lancer l'exécution jusqu'au point d'arrêt. Démarrez la session de débogage en choisissant Démarrer le débogage dans le menu Déboguer (clavier : F5).

L'exécution de l'application démarre et est suspendue immédiatement avant l'instruction au niveau de laquelle vous avez défini le point d'arrêt. L'icône de la ligne en cours dans la marge identifie l'emplacement et l'instruction en cours est mise en surbrillance.

Vous êtes maintenant aux commandes de l'exécution de l'application et pouvez examiner l'état du programme lorsque vous exécutez pas-à-pas les instructions de programmation.
Exécuter pas-à-pas la fonction. Dans le menu Déboguer, choisissez Pas à pas détaillé (clavier : F11).

Notez que le débogueur passe à la ligne suivante, ce qui correspond à un appel de la fonction example1. Choisissez de nouveau Pas à pas détaillé. Le débogueur passe sur la première ligne de code de la fonction example1. La ligne en surbrillance n'a pas été exécutée, mais la fonction a été chargée sur la pile d'appels et la mémoire des variables locales a été allouée.
Lorsque vous effectuez une exécution pas-à-pas d'une ligne de code, le débogueur effectue l'une des opérations suivantes :
- Si l'instruction suivante n'est pas un appel à une fonction dans votre solution, le débogueur exécute l'instruction, passe à l'instruction, puis suspend l'exécution.
- Si l'instruction est un appel à une fonction dans votre solution, le débogueur passe sur la première ligne de la fonction appelée, puis suspend l'exécution.
Continuez l'exécution pas-à-pas des instructions pour example1 jusqu'au point de sortie. Le débogueur met en surbrillance l'accolade fermante de la fonction.
Afficher les valeurs des variables dans des bulles d'informations. Continuez l'exécution pas-à-pas des instructions pour example1 jusqu'au point de sortie. Le débogueur met en surbrillance l'accolade fermante de la fonction. Lorsque vous amenez la souris au-dessus d'un nom de variable, le nom et la valeur de la variable s'affichent dans une bulle d'informations.
Ajouter un espion à la variable callTrack. La variable callTrack est utilisée dans ce guide de démarrage rapide pour montrer les fonctions appelées dans les exemples. Pour simplifier l'affichage de la valeur de la variable, ajoutez-la dans une fenêtre Espion. Sélectionnez le nom de la variable dans l'éditeur, puis choisissez Ajouter un espion dans le menu contextuel.

Examinez plusieurs variables dans une fenêtre Espion. Les valeurs des variables espionnées, comme les valeurs affichées dans des fenêtres Bulle d'informations, sont mises à jour chaque fois que l'exécution est suspendue. Vos variables espionnées sont enregistrées entre deux sessions de débogage.
Arrêter le débogage. Dans le menu Déboguer, choisissez Arrêter le débogage (clavier : Maj + F5). La session de débogage se termine.

Fonctions d'exécution pas-à-pas, de survol ou de sortie de code.

Contrairement à l'exécution pas-à-pas d'une fonction appelée par une fonction parente, le survol d'une fonction exécute la fonction enfant, puis suspend l'exécution de la fonction d'appel lorsque l'exécution de la fonction parent reprend. Vous pouvez exécuter un survol d'une fonction lorsque vous êtes familiarisé avec le mode de fonctionnement de la fonction et que vous êtes sûr que l'exécution n'affectera pas le problème que vous analysez.

Le survol d'une ligne de code qui ne contient pas d'appel d'une fonction exécute la ligne comme s'il s'agissait d'une exécution pas-à-pas.

La sortie de code d'une fonction enfant reprend l'exécution de la fonction, puis suspend l'exécution après que la fonction retourne vers sa fonction d'appel. Vous pouvez effectuer une sortie de code d'une longue fonction si vous pensez que le reste de la fonction n'a pas d'importance.

Le survol et la sortie de code d'une fonction permettent d'exécuter la fonction.

Pas à pas détaillé, principal et sortant des méthodes

Exemple 2

Dans cet exemple, vous effectuez les fonctions d'exécution pas-à-pas, de survol et de sortie de code.

Appeler la fonction example2 dans la fonction du module. Modifiez la fonction module et remplacez la ligne qui suit var callTrack = "module function" par example2();.
Lancer l'exécution jusqu'au point d'arrêt. Démarrez la session de débogage en choisissant Démarrer le débogage dans le menu Déboguer (clavier : F5). Le débogueur interrompt l'exécution au point d'arrêt.
Effectuer un survol de la ligne de code. Dans le menu Déboguer, choisissez Pas à pas principal (clavier : F10). Le débogueur exécute l'instruction var callTrack = "module function" de la même manière que l'exécution pas-à-pas.
Exécuter pas-à-pas example2 et example2_a. Choisissez la touche F11 pour exécuter pas-à-pas la fonction example2. Continuez l'exécution pas-à-pas des instructions example2 jusqu'à la ligne var x = example2_a();. Une fois encore, effectuez une exécution pas-à-pas de cette ligne jusqu'au point d'entrée d'example2_a. Continuez l'exécution pas-à-pas de chaque instruction d'example2_a jusqu'à ce que vous retourniez à example2.
Survol d'une fonction. Notez que la ligne suivante dans example2, var y = example2_a(); est en fait identique à la ligne précédente. Vous pouvez effectuer sans risque le survol de cette ligne. Appuyez sur la touche F10 pour passer de la récupération d'example2 à ce deuxième appel d'example2_a. Notez que la chaîne callTrack indique que la fonction d'example2_a a été exécutée deux fois.
Sortie de code d'une fonction. Choisissez la touche F11 pour exécuter pas-à-pas la fonction example2_b. Notez qu'example2_b n'est pas très différent d'example2_a. Pour sortir du code de cette fonction, choisissez Pas à pas sortant dans le menu Déboguer (clavier : Maj + F11). Notez que la variable callTrack indique qu'example2_b a été exécuté et que le débogueur est repassé au point de reprise d'example2.
Arrêter le débogage. Dans le menu Déboguer, choisissez Arrêter le débogage (clavier : Maj + F5). La session de débogage se termine.

Définir un point d'arrêt conditionnel, exécuter le curseur et visualiser une variable

Un point d'arrêt conditionnel désigne une condition qui entraîne la suspension de l'exécution par le débogueur. La condition est spécifiée par une expression de code qui peut être évaluée comme valeur true ou false. Par exemple, vous pouvez utiliser un point d'arrêt conditionnel pour examiner l'état du programme dans une fonction souvent appelée uniquement si une variable atteint une certaine valeur.

L'exécution jusqu'au curseur revient à définir un point d'arrêt ponctuel. Lorsque l'exécution est suspendue, sélectionnez une ligne dans le code source et reprenez l'exécution jusqu'à la ligne sélectionnée. Par exemple, vous pouvez exécuter pas-à-pas une boucle dans une fonction et confirmer que le code dans la boucle est exécuté correctement. Au lieu d'une exécution pas-à-pas pour chaque itération de la boucle, lancez l'exécution jusqu'au curseur qui est positionné après l'exécution de la boucle.

Parfois, il est difficile d'afficher une valeur de variable dans la ligne d'une bulle d'informations ou de la fenêtre d'autres données. Le débogueur peut afficher des chaînes, le code HTML et XML dans un visualiseur de texte qui présente une vue mise en forme de la valeur dans une fenêtre déroulante.

Exemple 3

Dans cet exemple, vous définissez un point d'arrêt conditionnel pour s'arrêter au niveau d'une itération spécifique d'une boucle, puis vous lancez l'exécution jusqu'au curseur positionnée après la boucle. Vous affichez également la valeur d'une variable dans un visualiseur de texte.

Appeler la fonction example3 dans la fonction du module. Modifiez la fonction module et remplacez la ligne qui suit var callTrack = "module function"; par la ligne example3();.
Lancer l'exécution jusqu'au point d'arrêt. Démarrez la session de débogage en choisissant Démarrer le débogage dans le menu Déboguer (clavier : F5). Le débogueur suspend l'exécution au point d'arrêt dans la fonction module.
Exécuter pas-à-pas la fonction example3. Choisissez Pas à pas détaillé dans le menu Déboguer (clavier : F11) pour passer au point d'entrée de la fonction example3. Reprend l'exécution pas-à-pas dans la fonction jusqu'à l'itération d'une ou deux boucles du bloc for. Notez que l'exécution pas-à-pas de toutes les 1 000 itérations peut prendre du temps.
Définir un point d'arrêt conditionnel. Dans la marge gauche de la fenêtre de code, cliquez avec le bouton droit sur la ligne s += i.toString() + "\n";, puis choisissez Condition dans le menu contextuel.

Sélectionnez la case à cocher Condition, puis entrez i == 500; dans la zone de texte. Choisissez l'option Est VRAI et choisissez OK. Le point d'arrêt permet de vérifier la valeur à la 500 ème itération de la boucle for. Vous pouvez identifier une icône de point d'arrêt conditionnel par la croix blanche associée.
Lancer l'exécution jusqu'au point d'arrêt. Dans le menu Déboguer, choisissez Continuer (clavier : F5). Pointez la souris sur i pour vérifier que la valeur actuelle de i est égale à 500. Notez également que la variable s est représentée comme une ligne unique et est beaucoup plus longue que la fenêtre de la bulle d'informations.
Visualiser une variable chaîne. Cliquez sur l'icône de loupe dans la bulle d'informations de s.

La fenêtre du visualiseur de texte apparaît et la valeur de la chaîne est présentée comme chaîne multiligne.
Lancer l'exécution jusqu'au curseur. Sélectionnez la ligne callTrack += "->example3";, puis choisissez Exécuter jusqu'au curseur dans le menu contextuel (clavier : Ctrl + F10). Le débogueur exécute les itérations de boucle, puis suspend l'exécution au niveau de la ligne.
Arrêter le débogage. Dans le menu Déboguer, choisissez Arrêter le débogage (clavier : Maj + F5). La session de débogage se termine.

Utilisez l'option Exécuter jusqu'au curseur pour retourner dans le code et supprimer un point d'arrêt

L'exécution jusqu'au curseur peut être très utile lorsque vous avez lancé une exécution pas-à-pas dans le code de la bibliothèque Microsoft ou d'une bibliothèque tierce. Alors que l'exécution pas-à-pas dans le code de bibliothèque peut être souvent informative, l'opération peut prendre du temps. Et en général, vous êtes bien plus intéressé par votre propre code. Cet exercice montre comment le faire.

Définir un point d'arrêt pour l'appel app.start. Dans la fonction module, définissez un point d'arrêt au niveau de la ligne app.start()
Lancez l'exécution jusqu'au point d'arrêt et une exécution pas-à-pas dans la fonction de la bibliothèque.

Lorsque vous lancez une exécution pas-à-pas de app.start(), l'éditeur affiche le code dans base.js. Lancez une exécution pas-à-pas sur d'autres lignes.
Fonctions de survol ou de sortie de code. Lorsque vous effectuez un survol (F10) et que vous sortez du code (Maj + F11) dans base.js, vous pouvez décider que l'examen de la complexité et de la longueur de la fonction de démarrage n'est pas l'opération que vous souhaitez effectuer.
Placer le curseur dans votre code et lancez une exécution jusqu'à ce point. Basculez dans le fichier default.js dans l'éditeur de code. Sélectionnez la première ligne de code après app.start() (vous ne pouvez pas lancer une exécution jusqu'à un commentaire ou une ligne vide). Choisissez Exécuter jusqu'au curseur dans le menu contextuel. Le débogueur poursuit l'exécution de la fonction app.start et suspend l'exécution au point d'arrêt.

Afficher les données des variables dans la fenêtre Variables locales

Les fenêtres Variables locales représentent une arborescence des paramètres et des variables dans la chaîne de portée de la fonction en cours d'exécution.

Afficher les données des variables et la chaîne prototype d'un objet

Ajouter un objet tableau à la fonction du module. Modifiez la fonction module et remplacez la ligne qui suit var callTrack = "module function" par var myArray = new Array(1, 2, 3);
Lancer l'exécution jusqu'au point d'arrêt. Démarrez la session de débogage en choisissant Démarrer le débogage dans le menu Déboguer (clavier : F5). Le débogueur interrompt l'exécution au point d'arrêt. Effectuez une exécution pas-à-pas jusqu'à la ligne.
Ouvrir la fenêtre Variables locales. Dans le menu Déboguer, pointez sur Fenêtres, puis choisissez Variables locales. (clavier : Alt + 4).
Examiner les variables locales dans la fonction de module Les fenêtres Variables locales affichent les variables de la fonction en cours d'exécution (fonction module) sous la forme de nœuds de niveau supérieur dans l'arborescence. Lorsque vous entrez une fonction, JavaScript crée toutes les variables et leur affecte une valeur undefined. Le texte des fonctions qui sont définis dans la fonction se présente sous la forme d'une valeur.
Effectuer une exécution pas-à-pas dans les définitions callTrack et myArray. Recherchez les variables callTrack et myArray dans la fenêtre Variables locales. Effectuez un survol (F10) des deux définitions et notez que les champs Valeur et Type sont modifiés. La fenêtre Variables locales met en surbrillance les valeurs des variables qui ont été modifiées depuis le dernier point d'arrêt.
Examiner l'objet myArray Développez la variable myArray. Chaque élément du tableau est répertorié. Nœud [prototype] qui contient la hiérarchie d'héritage de l'objet Array. Développez ce nœud.
- Le nœud Méthodes répertorie toutes les méthodes de l'objet Array.
- Le nœud [prototype] contient le prototype de l'objet Object dérivé de Array. Les nœuds [prototype] peuvent être récursifs. Chaque objet parent dans une hiérarchie d'objets est décrit dans le nœud [prototype] de son enfant.
Arrêter le débogage. Dans le menu Déboguer, choisissez Arrêter le débogage (clavier : Maj + F5). La session de débogage se termine.

Examinez les données de la chaîne de portée

La chaîne de portée d'une fonction comprend toutes les variables qui sont actives et accessibles par la fonction. Les variables globales font partie de la chaîne de portée, de même que tous les objets (y compris les fonctions) qui sont définis dans la fonction qui définit la fonction en cours d'exécution. Par exemple, la variable callTrack définie dans la fonction module de default.js est accessible par toute fonction définie dans la fonction module. Chaque portée est indiquée séparément dans la fenêtre Variables locales.

Les variables de la fonction en cours d'exécution sont répertoriées en haut de la fenêtre.
Les variables de chaque portée de la fonction dans la chaîne de portée sont répertoriées sous un nœud [Scope] de la fonction. Les fonctions de portée sont répertoriés par ordre dans la chaîne, de la fonction qui définit la fonction active à la fonction à l'extérieur de la chaîne.
Le nœud [Globals] répertorie les objets globaux qui sont définis à l'extérieur d'une fonction.

Les chaînes de portée peuvent être ambigües et sont très bien illustrées par un exemple. Dans l'exemple suivant, découvrez comment la fonction module crée sa propre portée, et comment créer un autre niveau de portée en créant une clôture.

Exemple 4

Appeler la fonction example4 à partir de la fonction de module. Modifiez la fonction module et remplacez la ligne qui suit var callTrack = "module function" par example4() :
Lancer l'exécution jusqu'au point d'arrêt. Démarrez la session de débogage en choisissant Démarrer le débogage dans le menu Déboguer (clavier : F5). Le débogueur interrompt l'exécution au point d'arrêt.
Ouvrir la fenêtre Variables locales. Si nécessaire, dans le menu Déboguer, pointez sur Fenêtres, puis choisissez Variables locales. (clavier : Alt + 4). Notez que la fenêtre répertorie toutes les variables et les fonctions dans la fonction module et contient également un nœud [Globals].
Examiner les variables globales. Développez le nœud [Globals]. Les objets et les variables dans le nœud Global ont été définis par la bibliothèque Windows pour JavaScript. Vous pouvez ajouter vos propres variables à la portée globale.
Exécution pas-à-pas de la fonction example4 et examen de ses variables locales et de portée Effectuez une exécution pas-à-pas (clavier : F11) de la fonction example4. Comme example4 est défini dans la fonction module, la fonction module devient la portée parente. example4 peut appeler une fonction quelconque dans la fonction module et accéder à ses variables. Développez le nœud [Scope] dans la fenêtre Variables locales et notez qu'il contient les mêmes variables que la fonction module.
Exécution pas-à-pas de la fonction example4_a et examen de ses variables locales et de portée Continuez l'exécution pas-à-pas de la fonction example4 et de l'appel à example4_a. Notez que les variables locales sont maintenant issues d'example4_a, et que le nœud [Scope] continue à stocker les variables de la fonction module. Même si les variables d'example4 sont actives, elles ne sont pas accessibles par example4_a et ne font plus partie de la chaîne de portée.
Exécution pas-à-pas de multipyByA et examen de ses variables locales et de portéeEffectuez une exécution pas-à-pas dans le reste de la fonction example4_a et de la ligne var x = multilpyByA(b);.

La variable de la fonction multipyByA a été définie avec la fonction multiplyClosure qui est une clôture. multipyClosure définit et retourne une fonction interne, mulitplyXby, et capture (clôture) son paramètre et sa variable. Dans une clôture, la fonction interne retournée a accès aux données de la fonction externe et crée donc son propre niveau de portée.

Lorsque vous effectuez une exécution pas-à-pas var x = multilpyByA(b);, vous passez à la ligne return a * b; dans la fonction interne mulitplyXby.
Dans la fenêtre Variables locales, seul le paramètre b est répertorié comme variable locale dans multiplyXby, mais un nouveau niveau [Scope] a été ajouté. En développant ce nœud, vous pouvez noter qu'il contient les paramètres, les fonctions, et les variables de multiplyClosure, y compris la variable a appelée dans la première ligne de multiplyXby. Un contrôle rapide du deuxième nœud [Scope] révèle les variables de la fonction de module, accessibles par multiplyXby dans sa ligne suivante.
Arrêter le débogage. Dans le menu Déboguer, choisissez Arrêter le débogage (clavier : Maj + F5). La session de débogage se termine.

Naviguez jusqu'au code en utilisant la fenêtre Pile d’appels

La pile des appels est une structure de données qui contient des informations sur les fonctions en cours d'exécution dans le thread en cours de l'application. Lorsque vous atteignez un point d'arrêt, la fenêtre Pile d’appels affiche une liste de toutes les fonctions qui sont actives sur la pile. La fonction en cours d'exécution se trouve au début de la liste de la fenêtre Pile d’appels. La fonction qui initialise le thread se trouve en fin de liste. Les fonctions intermédiaires affichent le chemin d'appel de la fonction d'initialisation vers la fonction en cours.

En plus de l'affichage du chemin d'appel vers la fonction en cours d'exécution, la fenêtre Pile d’appels peut être utilisée pour accéder au code dans l'éditeur de code. Cette fonctionnalité peut s'avérer particulièrement utile lorsque vous utilisez plusieurs fichiers et que vous souhaitez passer rapidement à une fonction particulière.

Exemple 5

Dans cet exemple, vous effectuez une exécution pas-à-pas dans le chemin d'appel qui contient cinq fonctions définies par l'utilisateur.

Appeler la fonction example5 dans la fonction du module. Modifiez la fonction module et remplacez la ligne qui suit var callTrack = "module function"; par la ligne example5();.
Lancer l'exécution jusqu'au point d'arrêt. Démarrez la session de débogage en choisissant Démarrer le débogage dans le menu Déboguer (clavier : F5). Le débogueur suspend l'exécution au point d'arrêt dans la fonction du module.
Ouvrir la fenêtre Pile d’appels. Dans le menu Déboguer, choisissez Fenêtres, puis choisissez Pile d’appels (clavier : Alt + 7). Notez que la fenêtre Pile d’appels affiche deux fonctions :
- Global code est le point d'entrée de la fonction module en bas de la pile des appels.
- Anonymous function affiche la ligne dans la fonction module où l'exécution est suspendue. Il s'agit du haut de la pile des appels.
Exécution pas-à-pas dans des fonctions pour atteindre la fonction example5_d. Choisissez Pas à pas détaillé dans le menu Déboguer (clavier : F11) pour exécuter les appels dans le chemin d'appel jusqu'au point d'entrée de la fonction example5_d. Notez que chaque fois qu'une fonction appelle une fonction, le numéro de ligne de la fonction d'appel est enregistré et la fonction appelée est définie en haut de la pile. Le numéro de ligne de la fonction d'appel est le point au niveau duquel la fonction d'appel a suspendu l'exécution. Une flèche jaune pointe vers la fonction en cours d'exécution.
Utiliser la fenêtre Pile d’appels pour accéder au code example5_a et définir un point d'arrêt. Dans la fenêtre Pile d’appels, sélectionnez l'élément de liste example5_a, puis choisissez Atteindre la source dans le menu contextuel. L'éditeur de code définit son curseur sur la ligne de retour de la fonction. Définissez un point d'arrêt sur cette ligne. Notez que la ligne en cours d'exécution n'est pas modifiée. Seul le curseur d'éditeur a été déplacé.
Exécution pas-à-pas dans les fonctions et exécution jusqu'au point d'arrêt. Reprenez l'exécution pas-à-pas dans example5_d. Notez que lors du retour de la fonction, elle est enlevée de la pile des appels. Appuyez sur F5 pour poursuivre l'exécution du programme. Vous vous arrêtez au point d'arrêt créé à l'étape précédente.
Arrêter le débogage. Dans le menu Déboguer, choisissez Arrêter le débogage (clavier : Maj + F5). La session de débogage se termine.