Tuto - Les bases du WLangage

Arrêtons-nous un instant sur le débogueur livré en standard avec WINDEV, WEBDEV et WINDEV Mobile.

• Gestion de point d'arrêt,
• Exécution de lignes de code pas à pas,
• Visualisation des variables,
• Affichage de la hiérarchie des traitements,
• Evaluation d'expressions et mise en place d'expressions autostop,
• Affichage du contenu des rubriques des fichiers de données, etc.

Nous allons utiliser le débogueur sur le projet "WLangage" :

1. Ouvrez si nécessaire le projet "WLangage" que vous avez créé dans la première leçon de ce tuto (consultez le paragraphe Un projet pour découvrir le WLangage de la leçon 1).
2. Affichez si nécessaire les événements WLangage liés au projet :
   • Dans la barre des éléments ouverts, faites un clic droit sur le bouton "P". Le menu contextuel s'affiche.
   • Sélectionnez l'option "Code de l'élément".
   • L'éditeur de code affiche les différents événements associés au projet.

Lancer le débogueur

Pour lancer le débogueur, nous allons poser un point d'arrêt et lancer le test du projet. Un point d'arrêt permet de définir la ligne de code à partir de laquelle le débogueur doit être lancé. Sous l'éditeur de code, un point d'arrêt se matérialise par une puce rouge présente devant la ligne de code voulue.

1. Cliquez devant la première ligne de code "MontantTTC est un monétaire" (ou utilisez le raccourci Ctrl + B).
2. Un point rouge apparaît pour matérialiser le point d'arrêt.
   
   
   Lorsque la ligne de code précédée du point d'arrêt sera exécutée, le débogueur se lancera.
   
   

   De nombreuses méthodes permettent de lancer le débogueur.

   Pour plus de détails, consultez Modes de lancement du débogueur.

1. Cliquez sur l'icône "GO" parmi les icônes d'accès rapide.
2. Lorsque la ligne de code associée au point d'arrêt est exécutée, le débogueur se lance.
3. L'éditeur de code apparaît en mode "Débogage" : un bandeau orange est affiché en bas de l'éditeur et le volet "Débogueur" du ruban est sélectionné. La ligne en cours d'exécution est précédée d'une petite flèche (). Une bulle d'aide permet de voir le contenu des variables manipulées dans la ligne de code.
   
   Dans la partie basse de l'écran, apparaît le volet "Débogueur". Ce volet affiche deux zones distinctes :
   • la pile des appels : Cette zone permet de connaître la hiérarchie des événements et traitements affichés dans le débogueur. Dans notre exemple, pour le moment, nous sommes en train de déboguer l'événement "Initialisation de WLangage".
   • la liste des expressions à évaluer. Par défaut, dans cette zone les principales variables utilisées dans le code WLangage sont affichées. Il est possible d'ajouter des variables pour suivre leur évolution (nous verrons cette fonctionnalité plus tard). Pour le moment, seule la variable MontantTTC est affichée dans cette zone.

Exécuter pas à pas

Tout d'abord, nous allons exécuter pas à pas les différentes instructions et voir le contenu des variables :

1. Appuyez sur la touche F8 (ou cliquez sur le bouton "Pas à pas" présent dans le ruban). La ligne en cours d'exécution devient la ligne de code suivante. Si nécessaire, les valeurs des variables sont modifiées dans le volet "Débogueur" (affiché par défaut en bas de l'écran).
2. Pour exécuter la procédure CalculTTC via le débogueur, appuyez sur la touche F7 (ou cliquez sur le bouton "Pas à pas détaillé" présent dans le ruban).
   
   

   Différence entre l'utilisation des touches F7 et F8 :

   • La touche F8 permet d'exécuter les lignes de code "pas à pas", mais sans entrer dans le code des fonctions/procédures.
   • La touche F7 permet de réaliser un "pas à pas détaillé" : ce mode permet d'entrer dans le code des procédures/fonctions et d'exécuter le code correspondant pas à pas.
3. Le code de la procédure CalculTTC est affiché.
4. Utilisez la touche F8 : la procédure est exécutée pas à pas (ligne par ligne).
5. Utilisez la combinaison de touches Alt + Fin (option "Sortir" du ruban) pour sortir directement de la procédure.

Exécuter un ensemble de lignes

Pour continuer nos manipulations sous le débogueur, nous allons reprendre un code WLangage que nous avons vu dans la leçon précédente.

1. Supprimez si nécessaire le code WLangage présent dans l'événement "Initialisation" du projet et copiez le code suivant :
   

   TableauNombres est un tableau d'entiers
   
   POUR Indice = 1 Ã€ 100
   	Trace("Tour de boucle | Valeur de l'indice : [%Indice%]")
   	SI Indice = 50 ALORS
   		Trace("Condition de sortie atteinte")
   		SORTIR
   	FIN
   	SI EstImpair(Indice) = Faux ALORS
   		Trace("L'indice est pair : passe à l'itération suivante")
   		CONTINUER
   	FIN
   	TableauNombres.Ajoute(Indice)
   	Trace("Ajout du nombre [%Indice%] dans le tableau")
   FIN
   
   POUR Indice = 1 _À_ TableauNombres.Occurrence
   	// Affiche l'indice et la valeur correspondante dans le tableau
   	Trace("Indice : " + Indice + " | Valeur : " + TableauNombres[Indice])
   FIN

   Rappel : Ce code permet de remplir un tableau via une boucle en ajoutant uniquement les chiffres impairs de 1 à 100.
2. Positionnez un point d'arrêt devant la première ligne de code et lancez le test du projet.
3. Le débogueur se lance. Nous allons faire quelques manipulations permettant de découvrir les possibilités du débogueur.

1. Positionnez le curseur de la souris sur la ligne de code suivante :
   

   SI EstImpair(Indice) = Faux ALORS

2. Utilisez la touche F6 (ou cliquez sur le bouton "Exécuter jusqu'au curseur" présent dans le ruban). Toutes les lignes de code placées entre la ligne en cours d'exécution et la ligne où le curseur est positionné sont exécutées. La fenêtre de trace s'affiche avec le contenu suivant :
   
   Tour de boucle | Valeur de l'indice : 1
   
   
   

   Attention : La fenêtre de trace peut être affichée "derrière" l'éditeur.
3. Utilisez la touche F8 (qui permet d'exécuter pas à pas les lignes de code). La condition étant fausse, les lignes de code de l'instruction SI ne sont pas exécutées.

Définir l'instruction suivante à exécuter

Le débogueur permet également de définir l'instruction suivante à exécuter. Cela permet par exemple de "sauter" certaines lignes de code : ces lignes de code ne seront pas exécutées.

1. A l'aide de la souris, déplacez la flèche indiquant la ligne en cours d'exécution () sur la ligne de code contenant la fonction "Trace" présente dans le SI :
   

   Trace("L'indice est pair : passe à l'itération suivante")

   Cette action permet de définir l'instruction suivante. Dans notre exemple, nous "sautons" les lignes permettant de faire l'ajout dans le tableau : l'ajout dans le tableau ne sera donc pas fait.
2. Positionnez un point d'arrêt sur la ligne :
   

   TableauNombres.Ajoute(Indice)

   Pour cela, il suffit de cliquer devant la ligne de code. Un point rouge apparaît.
3. Utilisez la touche F5 pour exécuter le code jusqu'au point d'arrêt. La fenêtre de trace affiche maintenant :
   
   Tour de boucle | Valeur de l'indice : 1
   L'indice est pair : passe à l'itération suivante
   Tour de boucle | Valeur de l'indice : 2
   L'indice est pair : passe à l'itération suivante
   Tour de boucle | Valeur de l'indice : 3
   La bulle indiquant les informations sur les variables du débogueur nous indique que nous sommes à l'indice 3.
4. Enlevez le point d'arrêt.

Ajouter une expression pour surveiller l'évolution de sa valeur

Nous allons maintenant ajouter une expression pour surveiller l'évolution de sa valeur dans le volet "Débogueur". Cette expression peut être de tout type : variable, fonction, opération sur variables, etc. Le résultat de l'expression est calculé et affiché. Cette expression permet d'effectuer un débogage personnalisé. Par exemple, il est possible de connaître le contenu d'une variable au fur et à mesure de son utilisation dans l'application.

1. Positionnez un point d'arrêt sur la ligne :
   
   POUR Indice = 1 _À_ TableauNombres.Occurrence
   Pour cela, il suffit de cliquer devant la ligne de code. Un point rouge apparaît.
2. Utilisez la touche F5 pour exécuter le code jusqu'à ce nouveau point d'arrêt.
3. Sélectionnez "Indice" dans l'éditeur de code sous le débogueur et affichez le menu contextuel (clic droit). Sélectionnez l'option "Ajouter l'expression dans le débogueur".
4. L'expression est automatiquement ajoutée dans le volet du débogueur en bas de l'écran. Pour le moment, l'expression n'est pas évaluable car la ligne de code n'a pas été exécutée.
5. Appuyez sur la touche F8 pour exécuter le code pas à pas.
6. La valeur de Indice passe à 1.

1. Dans le volet du "Débogueur", sélectionnez l'expression "Indice" que nous avons ajoutée précédemment.
2. Cliquez sur le rond vert : il devient rouge. Cela signifie que l'expression devient "Autostop". Le débogueur sera affiché lors du changement de la valeur de la variable.
3. Nous allons maintenant continuer le test de l'application : appuyez sur la touche F5.
4. Un message s'affiche indiquant que la valeur de la variable "Indice" a changé.
5. Validez.
6. Nous allons maintenant ajouter une condition pour l'affichage du débogueur : il faut que la valeur de Indice corresponde à 10. Dans le volet du "Débogueur", sélectionnez l'expression "Indice". Cliquez une seconde fois sur l'expression : la colonne "Expression" passe en édition. Dans la zone "Expression", ajoutez "=10". Vous obtenez "Indice = 10". Validez avec la touche Entrée.
7. Appuyez sur la touche F5. L'exécution du programme continue. Le débogueur est à nouveau lancé lorsque la variable Indice a pour valeur 10.

1. Dans le volet du "Débogueur", sélectionnez l'expression "TableauNombres".
2. Dans le menu contextuel, sélectionnez l'option "Editer". Une fenêtre spécifique s'affiche permettant de visualiser le contenu de la variable, dans notre cas, les différentes valeurs présentes dans le tableau. Cette fenêtre peut rester affichée pendant le débogage de l'application.
   
   

   La fenêtre de watch permet de visualiser le contenu de tout type de variables. Les informations affichées peuvent être visualisées en texte ou en hexadécimal.

Voilà, nous avons terminé notre tour d'horizon du débogueur. Pour arrêter le test sous le débogueur, cliquez sur "Terminer le test" présent dans le ruban.

Dans cette leçon, vous avez découvert les principales options du débogueur :

• Comment lancer le débogueur,
• Comment exécuter un projet pas à pas,
• Comment définir l'instruction suivante,
• Comment créer une expression autostop.