DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV 2024 !
Aide / Tuto WINDEV / Tuto - Les bases du WLangage
  • Leçon 7 - Le débogueur
  • Présentation
  • Utiliser le débogueur
  • Lancer le débogueur
  • Exécuter pas à pas
  • Exécuter un ensemble de lignes
  • Définir l'instruction suivante à exécuter
  • Ajouter une expression pour surveiller l'évolution de sa valeur
  • En résumé

Tuto - Les bases du WLangage

Leçon 7 - Le débogueur
Ce que vous allez apprendre :
  • Présentation.
  • Utiliser le débogueur.
Durée de la leçon 30 mn
Présentation
Arrêtons-nous un instant sur le débogueur livré en standard avec WINDEV, WEBDEV et WINDEV Mobile.
Qu'est-ce que le débogueur ?
Le débogueur est un outil puissant permettant de suivre pas à pas le déroulement d'un code ou d'une application. De nombreuses fonctionnalités sont offertes :
  • 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.
Mettre au point un traitement ou même une application devient un jeu d'enfant.
Dans cette leçon nous allons apprendre à manipuler le débogueur en l'utilisant sur le code des procédures que nous avons créées dans la leçon précédente. Nous pourrons ainsi découvrir les principales fonctionnalités du débogueur.
Utiliser le débogueur
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.
Placez un point d'arrêt dans le code d'initialisation du projet :
  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.
    Débogueur

    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.
Nous allons maintenant lancer le test de notre projet :
  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.
    Débogueur
    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.
Nous allons effectuer quelques manipulations sous le débogueur afin de découvrir ses possibilités.

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.
Fermez le débogueur : cliquez sur l'option "Terminer le test" dans le ruban du débogueur.

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.
Tout d'abord, voyons comment exécuter un ensemble de lignes de code directement. En effet, sous le débogueur, vous n'êtes pas obligé d'exécuter pas à pas toutes les lignes de code du traitement à déboguer.
  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.
Nous allons utiliser une expression "Autostop". Une expression "Autostop" permet de passer en mode débogage dès qu'une condition est vérifiée ou dès que la valeur d'une variable est modifiée. Dans notre exemple, nous allons afficher le débogueur dès que la valeur de Indice est à 10 :
  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.
Nous allons maintenant voir le contenu de la variable Tableau. Ce contenu peut être visualisé dans une fenêtre spécifique (appelée "Fenêtre de watch").
  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.
En résumé
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.
Dans la prochaine leçon, nous verrons comment utiliser la POO (Programmation Orientée Objet).
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 16/11/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale