Notions de base d’ASP.NET Core : débogage dans Visual Studio

Le débogage est un processus essentiel pour identifier et corriger les erreurs dans une application Web. Consultez cet article pour découvrir plusieurs conseils de débogage dans Visual Studio.

Le débogage des applications Web est essentiel pour identifier et résoudre les problèmes, que ce soit dans le code ou dans un mécanisme externe. Lors du débogage d’une application, le développeur peut suivre étape par étape l’exécution du code, analyser les variables, inspecter les piles d’appels et identifier les erreurs possibles et les comportements inattendus, garantissant ainsi la qualité et le bon fonctionnement de l’application.

Visual Studio est le principal outil de développement d’applications .NET et offre un large éventail de fonctionnalités de débogage dans ASP.NET Core, rendant le processus plus efficace et productif.

Dans cet article de blog, nous allons créer une application dans ASP.NET Core et voir quelles sont les principales fonctions disponibles dans Visual Studio pour le débogage et le dépannage.

Visual Studio et le débogueur intégré

Visual Studio est un environnement de développement intégré (IDE) puissant et largement utilisé, développé et maintenu par Microsoft. Il offre un ensemble complet d’outils et de fonctionnalités pour faciliter la création, le débogage et la gestion de projets logiciels.

Dans le contexte d’ASP.NET Core, Visual Studio dispose d’une gamme de fonctionnalités importantes pour développer et déboguer des applications Web modernes et évolutives.

Le débogueur intégré de Visual Studio est un outil essentiel pour rechercher et corriger les erreurs dans les applications ASP.NET Core. Grâce à une interface intuitive, le débogueur intégré permet aux développeurs d’examiner les variables, de suivre le flux d’exécution et d’identifier les problèmes complexes dans le code.

Création de l’exemple d’application et exécution du débogage

Conditions préalables

Pour créer l’application, vous devez disposer de Visual Studio et du dernière version de .NET. Cet article utilise .NET 7, mais .NET 8 est maintenant disponible !

Les fonctions du débogueur abordées dans l’article ne sont présentes que dans Visual Studio pour Windows.

Le code source de l’application utilisée dans l’exemple est accessible ici : Gestionnaire des tâches.

Pour créer l’application dans Visual Studio, suivez les étapes ci-dessous :

• Créer un nouveau projet
• Choisissez l’API Web ASP.NET Core
• Choisissez .NET 7.0 (ou 8.0)
• Décochez l’option permettant d’utiliser des contrôleurs : nous n’en aurons pas besoin dans cet exemple
• Nommez-le « Gestionnaire des tâches »
• Cliquez sur Créer

Créons maintenant un enregistrement qui représentera l’entité de l’application, qui dans ce cas sera Tâches. Créez un nouveau dossier dans le projet appelé « Modèles » et à l’intérieur, créez une nouvelle classe appelée « TaskItem » et remplacez le code existant par le code ci-dessous :

namespace TaskManager.Models;
public record TaskItem(Guid Id, string Name, string Description, DateTime CreationDate, DateTime DueDate);

Créons maintenant une classe de service pour renvoyer des données. Comme l’article se concentre sur le débogage de l’application, nous n’utiliserons pas de base de données. Au lieu de cela, les données seront simulées dans la classe de service. À la racine du projet, créez un nouveau dossier appelé « Services » et créez-y une nouvelle classe appelée « TaskService.cs » et mettez-y le code suivant :

using TaskManager.Models;

namespace TaskManager.Services;
public class TaskService
{
  public List<TaskItem> FindTasks()
  {
    var taskList = new List<TaskItem>()
    {
      new TaskItem(
        Id: Guid.NewGuid(),
        Name: "Study ASP.NET Core",
        Description: "Study ASP.NET Core for 2 hours a day",
        CreationDate: DateTime.Now,
        DueDate: DateTime.Now + TimeSpan.FromDays(7)
      ),
      new TaskItem(
        Id: Guid.NewGuid(),
        Name: "Study ASP.NET Core",
        Description: "Clean the room at 4 pm",
        CreationDate: DateTime.Now,
        DueDate: DateTime.Now + TimeSpan.FromDays(7)
      ),
      new TaskItem(
        Id: Guid.NewGuid(),
        Name: "Submit Monthly Report",
        Description: "Submit the monthly sales report by the end of the week",
        CreationDate: DateTime.Now,
        DueDate: DateTime.Now + TimeSpan.FromDays(5)
      ),
      new TaskItem(
        Id: Guid.NewGuid(),
        Name: "Prepare Presentation",
        Description: "Prepare a presentation for the upcoming client meeting",
        CreationDate: DateTime.Now,
        DueDate: DateTime.Now + TimeSpan.FromDays(3)
      ),
      new TaskItem(
        Id: Guid.NewGuid(),
        Name: "Buy Groceries",
        Description: "Buy groceries for the week",
        CreationDate: DateTime.Now,
        DueDate: DateTime.Now + TimeSpan.FromDays(2)
      )
    };
  return taskList;
  }

  public TaskItem FindTaskByName(string name)
  {
    try
    {
      var taskList = FindTasks();
      var task = taskList.SingleOrDefault(t => t.Name == name);
      return task;
    }
    catch (Exception ex)
    {
      return null;
    }
  }
}

Notez que dans le code ci-dessus, nous définissons deux méthodes, l’une pour renvoyer la liste complète des tâches et l’autre renvoyant une seule tâche basée sur le nom donné. L’étape suivante consiste à ajouter les points de terminaison qui accéderont à ces données, remplacez donc le fichier Program.cs par le code ci-dessous :

using TaskManager.Services;

var builder = WebApplication.CreateBuilder(args);



builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddScoped<TaskService>();

var app = builder.Build();


if (app.Environment.IsDevelopment())
{
  app.UseSwagger();
  app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.MapGet("/tasks", (TaskService service) =>
{
  var tasks = service.FindTasks();

  return Results.Ok(tasks);
})
.WithName("FindTasks")
.WithOpenApi();

app.MapGet("/tasks/{name}", (TaskService service, string name) =>
{
  var task = service.FindTaskByName(name);
  return task is null ? Results.NotFound() : Results.Ok(task);
})
.WithName("FindTaskByName")
.WithOpenApi();

app.Run();

Maintenant, assurez-vous que dans l’onglet « Configurations de la solution », « Debug » est sélectionné. Exécutez le projet en cliquant sur l’icône de démarrage dans Visual Studio :

Ensuite, dans votre navigateur, accédez à l’adresse https://localhost:[PORT]/swagger/index.html et exécutez le deuxième point de terminaison, en passant ce qui suit dans le paramètre « name » : Study ASP.NET Corecomme le montre l’image ci-dessous.

Notez que le résultat sera un statut HTTP 404, cela signifie qu’il y a eu une erreur lors de la récupération des données. Pour découvrir quelle était l’erreur, déboguons l’application.

Débogage et recherche de l’erreur

Pour trouver l’erreur, suivons les étapes d’exécution de l’application. Pour cela, définissons un point d’arrêt où l’exception se produit. Ensuite, dans la classe « TaskService.cs », dans la ligne où l’exception se produit, cliquez dans le coin de l’onglet Visual Studio pour définir le point d’arrêt, comme indiqué dans l’image ci-dessous :

Les points d’arrêt sont une fonctionnalité de débogage. Vous pouvez définir des points d’arrêt où vous souhaitez que Visual Studio suspende votre code en cours d’exécution, de cette façon vous pouvez observer des valeurs de variables ou un comportement inattendu.

Maintenant, réexécutez le point de terminaison swagger en passant le Study ASP.NET Core paramètre. Ensuite, ouvrez Visual Studio et voyez que l’exécution a été arrêtée au point d’arrêt, et si vous cliquez sur les variables « ex » et développez-les, vous pourrez voir sa valeur, qui dans ce cas est l’erreur que nous recherchons :

Notez que l’exception dit ce qui suit : « La séquence contient plus d’un élément correspondant. » Cela signifie que nous filtrons un seul élément via la méthode « SingleOrDefault() » dans la liste des tâches, mais que plusieurs ont été trouvés. Cela est dû au fait que les deux premières tâches portent le même nom. Pour résoudre le problème, changez simplement le nom de l’un des deux.

Arrêtez ensuite le débogueur et changez le nom de la deuxième tâche avec le texte « Nettoyer la pièce », puis ajoutez un autre point d’arrêt où la variable « tâche » est renvoyée comme indiqué dans l’image ci-dessous :

Ensuite, exécutez à nouveau le débogueur et le point de terminaison dans Swagger. Notez que le débogueur s’est arrêté sur le point d’arrêt avant l’exception. Maintenant, si vous passez le curseur de la souris sur la variable de tâche, vous verrez que l’enregistrement portant le nom « Study ASP.NET Core » a été trouvé avec succès et sera renvoyé sur le point de terminaison.

Navigation dans le code

Le débogueur de Visual Studio vous permet de naviguer entre les points d’arrêt et les lignes de code via une interface intuitive. Pour tester ces fonctions, ajoutez la méthode suivante au-dessus du deuxième code de point de terminaison dans le fichier Program.cs :

static bool ValidateTaskName(string name)
{
    var userValid = true;

    if (name.Length < 3)
        userValid = false;

    return userValid;
}

Et dans le deuxième point de terminaison, ajoutez l’appel à la méthode de validation :

       if (!ValidateTaskName(name))
            return Results.BadRequest("The name must have at least 3 characters");

Ajoutez ensuite un point d’arrêt sur l’appel de la méthode « ValidateTaskName() » à l’intérieur du deuxième point de terminaison, puis redémarrez le débogueur, puis dans l’interface Swagger, sur le deuxième point de terminaison, ajoutez le texte st dans le champ du nom et cliquez sur Exécuter :

Dans Visual Studio, cliquez sur l’icône qui représente une flèche vers le bas. Cela fera entrer le curseur du débogueur dans la méthode « ValidateTaskManager() » :

Cliquez ensuite sur l’icône avec une flèche courbe tournée vers la droite. Cela fera passer le curseur du débogueur à la ligne suivante. C’est ainsi que nous parcourons le code via le débogueur :

Pour terminer l’exécution, cliquez sur l’icône de démarrage qui porte le nom « continuer ». Cette fonction est utilisée pour passer directement au point d’arrêt suivant. Comme nous n’avons plus de paramètres, le débogueur exécutera le reste du code d’un seul coup.

Ignorer le code pendant le débogage

Grâce au débogueur Visual Studio, il est possible d’ignorer des extraits de code lors du débogage. Placez simplement le curseur de la souris sur le curseur du débogueur et faites-le glisser vers la zone souhaitée. De cette façon, il est possible d’ignorer les méthodes de validation, par exemple, sans avoir besoin de les commenter ou de les supprimer. Le GIF ci-dessous montre comment procéder :

Inspection des valeurs des variables

Le débogueur dispose de fonctions permettant d’inspecter les valeurs des variables via les fenêtres Autos et Locals. La fenêtre Autos affiche les variables utilisées dans la ligne actuelle sur laquelle se trouve le curseur du débogueur ainsi que dans la ligne précédente. La fenêtre Locals affiche les variables définies dans la portée locale, qui est généralement la méthode ou la fonction actuelle.

Exécutez le débogueur, soumettez à nouveau le texte « Étudier ASP.NET Core » sur le deuxième point de terminaison et recherchez dans Visual Studio les fenêtres Autos et Locals.

Pour y accéder, dans Visual Studio, sélectionnez « Debug>Windows>Autos » dans la barre de menu de la fenêtre Autos et « Debug>Windows>Locals » pour la fenêtre Locals. Les images ci-dessous montrent les fenêtres pendant le débogage.

Suivi d’une variable

Vous pouvez suivre une variable ou une expression pendant le débogage en l’ajoutant à la fenêtre Espion.

Pour vérifier cette fonction, ajoutez cet extrait de code :

name = name.ToUpper();

à la première ligne à l’intérieur du deuxième point de terminaison, puis, avec le débogueur en cours d’exécution, cliquez avec le bouton droit sur le nom de la variable et choisissez Ajouter une surveillance.

La fenêtre de surveillance apparaîtra par défaut en bas de l’éditeur de code, alors parcourez le code pour voir la valeur de la variable de nom changer après avoir parcouru l’extrait de code ajouté, comme indiqué dans les captures d’écran ci-dessous :

Suivi du flux de débogage avec la fenêtre Pile d’appels

Une autre fonctionnalité importante du débogueur Visual Studio est la fenêtre de pile d’appels, qui permet une meilleure compréhension du flux d’exécution de l’application, montrant l’ordre dans lequel les méthodes et les fonctions sont appelées.

Pour vérifier la fenêtre de la pile d’appels, démarrez le débogueur et ouvrez la fenêtre de la pile d’appels à partir du menu Visual Studio : Debug>Windows>Call Stack. Parcourez le code via les points de terminaison. Les appels de méthode ainsi que d’autres détails comme la ligne où se trouve le code seront affichés dans la fenêtre de la pile d’appels comme dans l’image ci-dessous.

Touches de raccourci du débogueur

Visual Studio fournit plusieurs touches de raccourci pour vous aider à naviguer et à contrôler efficacement le débogueur. Vous trouverez ci-dessous quelques touches de raccourci du débogueur couramment utilisées :

• F5: démarre le débogage (ou continue en cas de pause).
• F10: Passer au-dessus – Exécute la ligne de code actuelle et passe à la ligne suivante, mais n’approfondit aucune fonction appelée sur cette ligne.
• F11: Entrez dans – Exécute la ligne de code actuelle et passe à la ligne suivante, en accédant à n’importe quelle fonction appelée sur cette ligne.
• Maj + F11: Quitter – Continuez l’exécution jusqu’à ce que la fonction actuelle revienne et que le contrôle revienne à la fonction appelante.
• F9: Basculer le point d’arrêt – Définit ou supprime un point d’arrêt sur la ligne actuelle.
• Ctrl+F5: Démarrer sans débogage – Exécutez le programme sans attacher le débogueur.
• Ctrl+F10: Exécuter jusqu’au curseur – Continuez l’exécution jusqu’à ce que la position actuelle du curseur soit atteinte.
• Ctrl+F9: Effacer tous les points d’arrêt – Supprime tous les points d’arrêt du document actuel.
• Ctrl + Maj + F9: Désactive tous les points d’arrêt – Désactive temporairement tous les points d’arrêt.
• Ctrl+Alt+P: Attacher au processus – Ouvre la boîte de dialogue « Attacher au processus » pour attacher le débogueur à un processus en cours d’exécution.
• Ctrl + Alt + Q: Quick Watch – Ouvrez la boîte de dialogue Quick Watch pour inspecter la valeur d’une expression.
• Ctrl + Maj + F5: Redémarrer le débogage – Arrêtez le débogage et redémarrez la session de débogage.
• Ctrl + Maj + B: Build – Construisez la solution (pas une action de débogage, mais souvent utilisée en conjonction avec le débogage).
• Maj + F5: Arrêter le débogage – Terminez la session de débogage.
• Ctrl + K, Ctrl + C: Commentez les lignes de code sélectionnées.
• Ctrl + K, Ctrl + U: Décommentez les lignes de code sélectionnées.
• Ctrl+]: Accédez à l’accolade fermante du bloc de code actuel.
• Ctrl+[[: Basculez entre les fenêtres Autos, Locales et Watch.

Ces touches de raccourci peuvent varier en fonction de la version de Visual Studio que vous utilisez et des personnalisations que vous avez pu effectuer. Vous pouvez également afficher et personnaliser les touches de raccourci en accédant à Tools > Options > Environment > Keyboard dans le menu Visual Studio.

Conclusion

Visual Studio est un formidable outil pour développer et déboguer des applications ASP.NET Core. Grâce au débogueur Visual Studio, il est possible de trouver rapidement des bogues en inspectant les valeurs des variables et d’autres objets, en suivant le flux d’exécution du processus avec la fenêtre Call Stack, en plus de plusieurs autres ressources.

Dans cet article, nous avons vu certaines des principales fonctions du débogueur Visual Studio et comment les utiliser. Ainsi, chaque fois que vous avez besoin d’analyser un problème pendant le développement, pensez à utiliser les fonctionnalités avancées du débogueur et augmentez encore plus votre productivité.