présentation du débogage de Sites pages Web ASP.NET (Razor)

par Tom FitzMacken

cet article explique les différentes façons de déboguer les pages d’un site web pages Web ASP.NET (Razor). Le débogage est le processus de recherche et de correction des erreurs dans vos pages de codes.

Ce que vous allez apprendre :

  • Comment afficher des informations qui permettent d’analyser et de déboguer des pages.
  • Comment utiliser les outils de débogage dans Visual Studio.

voici les fonctionnalités ASP.NET introduites dans l’article :

  • ServerInfoApplication d’assistance.
  • ObjectInfo d’assistance.

Versions de logiciels

  • pages Web ASP.NET (Razor) 3
  • Visual Studio 2013

ce didacticiel fonctionne également avec pages Web ASP.NET 2. Vous pouvez utiliser WebMatrix 3, mais le débogueur intégré n’est pas pris en charge.

Un aspect important de la résolution des erreurs et des problèmes dans votre code consiste à les éviter en premier lieu. Pour ce faire, vous pouvez placer des sections de votre code susceptibles de provoquer des erreurs dans try/catch des blocs. pour plus d’informations, consultez la section relative à la gestion des erreurs dans Introduction à la ASP.NET de la programmation Web à l’aide de la syntaxe Razor.

L' ServerInfo application auxiliaire est un outil de diagnostic qui vous donne une vue d’ensemble des informations sur l’environnement de serveur Web qui héberge votre page. Il affiche également les informations de requête HTTP envoyées lorsqu’un navigateur demande la page. L' ServerInfo application auxiliaire affiche l’identité de l’utilisateur actuel, le type de navigateur qui a effectué la demande, et ainsi de suite. Ce type d’informations peut vous aider à résoudre les problèmes courants.

  1. Créez une nouvelle page Web nommée du. cshtml.

  2. À la fin de la page, juste avant la balise de fermeture </body> , ajoutez @ServerInfo.GetHtml() :

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
       @ServerInfo.GetHtml()
        </body>
    </html>
    

    Vous pouvez ajouter le ServerInfo code n’importe où dans la page. Mais l’ajout à la fin conserve sa sortie séparément de l’autre contenu de la page, ce qui en facilite la lecture.

    Notes

    Important Vous devez supprimer tout code de diagnostic de vos pages Web avant de déplacer des pages Web vers un serveur de production. Cela s’applique à l' ServerInfo application d’assistance, ainsi qu’aux autres techniques de diagnostic dans cet article qui impliquent l’ajout de code à une page. Vous ne souhaitez pas que les visiteurs de votre site Web voient les informations sur le nom de votre serveur, les noms d’utilisateur, les chemins d’accès sur votre serveur et les détails similaires, car ce type d’informations peut être utile aux personnes ayant des intentions malveillantes.

  3. Enregistrez la page et exécutez-la dans un navigateur.

    Debugging-1

    L' ServerInfo application auxiliaire affiche quatre tables d’informations dans la page :

    • Configuration du serveur. cette section fournit des informations sur le serveur web d’hébergement, y compris le nom de l’ordinateur, la version de ASP.NET que vous exécutez, le nom de domaine et l’heure du serveur.

    • Variables de serveur ASP.NET. Cette section fournit des informations détaillées sur les nombreux détails du protocole HTTP (appelés variables HTTP) et les valeurs qui font partie de chaque requête de page Web.

    • Informations d’exécution HTTP. cette section fournit des informations détaillées sur la version de Microsoft .NET Framework sous laquelle votre page web s’exécute, le chemin d’accès, les détails sur le cache, etc. (comme vous l’avez appris dans Introduction à la ASP.NET de la programmation web à l’aide de la syntaxe Razor, pages Web ASP.NET à l’aide de la syntaxe Razor reposent sur la technologie de serveur web ASP.NET de Microsoft, qui est elle-même basée sur une bibliothèque de développement de logiciels complète appelée .NET Framework.)

    • Variables d’environnement. Cette section fournit la liste de toutes les variables d’environnement locales et leurs valeurs sur le serveur Web.

      La description complète de toutes les informations relatives au serveur et à la demande n’entre pas dans le cadre de cet article, mais vous pouvez voir que l' ServerInfo application d’assistance renvoie un grand nombre d’informations de diagnostic. Pour plus d’informations sur les valeurs retournées par ServerInfo , consultez variables d’environnement reconnues sur le site Web Microsoft TechNet et variables de serveur IIS sur le site Web MSDN.

Incorporation d’expressions de sortie pour afficher les valeurs de page

Une autre façon de voir ce qui se passe dans votre code consiste à incorporer des expressions de sortie dans la page. Comme vous le savez, vous pouvez générer directement la valeur d’une variable en ajoutant un texte tel que @myVariable ou @(subTotal * 12) à la page. Pour le débogage, vous pouvez placer ces expressions de sortie à des points stratégiques de votre code. Cela vous permet de voir la valeur des variables clés ou le résultat des calculs lors de l’exécution de votre page. Lorsque vous avez terminé le débogage, vous pouvez supprimer les expressions ou les commenter. Cette procédure illustre un moyen classique d’utiliser des expressions incorporées pour faciliter le débogage d’une page.

  1. Créez une nouvelle page WebMatrix nommée OutputExpression. cshtml.

  2. Remplacez le contenu de la page par ce qui suit :

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>   
    
        @{
            var weekday = DateTime.Now.DayOfWeek;
            // As a test, add 1 day to the current weekday.
            if(weekday.ToString() != "Saturday") {
                // If weekday is not Saturday, simply add one day.
                weekday = weekday + 1; 
            }
            else {
                // If weekday is Saturday, reset the day to 0, or Sunday.
                weekday = 0; 
            }
            // Convert weekday to a string value for the switch statement.
            var weekdayText = weekday.ToString(); 
    
            var greeting = "";
            
            switch(weekdayText) 
            { 
                case "Monday":
                    greeting = "Ok, it's a marvelous Monday."; 
                    break; 
                case "Tuesday":
                    greeting = "It's a tremendous Tuesday.";
                    break; 
                case "Wednesday":
                    greeting = "Wild Wednesday is here!";
                    break; 
                case "Thursday":
                    greeting = "All right, it's thrifty Thursday.";
                    break;
                case "Friday":
                    greeting = "It's finally Friday!";
                    break;
                case "Saturday":
                    greeting = "Another slow Saturday is here.";
                    break;
                case "Sunday":
                    greeting = "The best day of all: serene Sunday.";
                    break;
                default:
                    break; 
            }
        }
        
        <h2>@greeting</h2>
    
        </body>
    </html>
    

    L’exemple utilise une switch instruction pour vérifier la valeur de la weekday variable, puis afficher un autre message de sortie en fonction du jour de la semaine. Dans l’exemple, le if bloc dans le premier bloc de code change arbitrairement le jour de la semaine en ajoutant un jour à la valeur actuelle du jour de la semaine. Il s’agit d’une erreur introduite à des fins d’illustration.

  3. Enregistrez la page et exécutez-la dans un navigateur.

    La page affiche le message pour le mauvais jour de la semaine. Quel que soit le jour de la semaine, le message s’affiche pendant un jour plus tard. Même si, dans ce cas, vous savez pourquoi le message est désactivé (car le code définit délibérément la valeur de jour incorrecte), en réalité, il est souvent difficile de savoir où les problèmes se posent dans le code. Pour déboguer, vous devez savoir ce qui se passe à la valeur des objets clés et des variables telles que weekday .

  4. Ajoutez des expressions de sortie en insérant @weekday comme indiqué dans les deux emplacements indiqués par les commentaires dans le code. Ces expressions de sortie affichent les valeurs de la variable à ce stade de l’exécution du code.

    var weekday = DateTime.Now.DayOfWeek;
    // DEBUG: Display the initial value of weekday. 
    @weekday
    
    // As a test, add 1 day to the current weekday.
    if(weekday.ToString() != "Saturday") {
        // If weekday is not Saturday, simply add one day.
        weekday = weekday + 1; 
    }
    else {
        // If weekday is Saturday, reset the day to 0, or Sunday.
        weekday = 0; 
    }
    
    // DEBUG: Display the updated test value of weekday.
    @weekday
    
    // Convert weekday to a string value for the switch statement.
    var weekdayText = weekday.ToString();
    
  5. Enregistrez et exécutez la page dans un navigateur.

    La page affiche d’abord le jour réel de la semaine, puis le jour de la semaine mis à jour qui résulte de l’ajout d’une journée, puis le message résultant de l' switch instruction. La sortie des deux expressions variables ( @weekday ) n’a pas d’espace entre les jours, car vous n’avez pas ajouté de balises HTML <p> à la sortie ; les expressions sont uniquement destinées au test.

    Debugging-2

    Vous pouvez maintenant voir l’origine de l’erreur. Lorsque vous affichez la weekday variable dans le code pour la première fois, elle affiche le jour correct. Lorsque vous l’affichez la deuxième fois, après le if bloc dans le code, la journée est décalée d’une unité. Vous savez qu’un événement s’est produit entre la première et la deuxième apparition de la variable de jour de la semaine. S’il s’agissait d’un véritable bogue, ce type d’approche vous permettra de limiter l’emplacement du code à l’origine du problème.

  6. Corrigez le code dans la page en supprimant les deux expressions de sortie que vous avez ajoutées, et en supprimant le code qui modifie le jour de la semaine. Le bloc de code complet restant se présente comme dans l’exemple suivant :

    @{
        var weekday = DateTime.Now.DayOfWeek;
        var weekdayText = weekday.ToString(); 
    
        var greeting = "";
            
        switch(weekdayText) 
        { 
            case "Monday":
                greeting = "Ok, it's a marvelous Monday."; 
                break; 
            case "Tuesday":
                greeting = "It's a tremendous Tuesday.";
                break; 
            case "Wednesday":
                greeting = "Wild Wednesday is here!";
                break; 
            case "Thursday":
                greeting = "All right, it's thrifty Thursday.";
                break;
            case "Friday":
                greeting = "It's finally Friday!";
                break;
            case "Saturday":
                greeting = "Another slow Saturday is here.";
                break;
            case "Sunday":
                greeting = "The best day of all: serene Sunday.";
                break;
            default:
                break; 
        }
    }
    
  7. Exécutez la page dans un navigateur. Cette fois, vous voyez le message correct affiché pour le jour réel de la semaine.

Utilisation de l’application auxiliaire ObjectInfo pour afficher des valeurs d’objet

L' ObjectInfo application auxiliaire affiche le type et la valeur de chaque objet que vous lui transmettez. Vous pouvez l’utiliser pour afficher la valeur des variables et des objets dans votre code (comme vous l’avez fait avec les expressions de sortie dans l’exemple précédent), ainsi que des informations sur les types de données de l’objet.

  1. Ouvrez le fichier nommé OutputExpression. cshtml que vous avez créé précédemment.

  2. Remplacez tout le code de la page par le bloc de code suivant :

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
        @{
          var weekday = DateTime.Now.DayOfWeek;
          @ObjectInfo.Print(weekday)
          var weekdayText = weekday.ToString(); 
      
          var greeting = "";
      
          switch(weekdayText) 
          { 
              case "Monday":
                  greeting = "Ok, it's a marvelous Monday."; 
                  break; 
              case "Tuesday":
                  greeting = "It's a tremendous Tuesday.";
                  break; 
              case "Wednesday":
                  greeting = "Wild Wednesday is here!";
                  break; 
              case "Thursday":
                  greeting = "All right, it's thrifty Thursday.";
                  break;
              case "Friday":
                  greeting = "It's finally Friday!";
                  break;
               case "Saturday":
                  greeting = "Another slow Saturday is here.";
                  break;
               case "Sunday":
                  greeting = "The best day of all: serene Sunday.";
                  break;
              default:
                  break; 
          }
        }
        @ObjectInfo.Print(greeting)
        <h2>@greeting</h2>
    
        </body>
    </html>
    
  3. Enregistrez et exécutez la page dans un navigateur.

    Debugging-4

    Dans cet exemple, l' ObjectInfo application d’assistance affiche deux éléments :

    • Type. Pour la première variable, le type est DayOfWeek . Pour la deuxième variable, le type est String .

    • La valeur. Dans ce cas, étant donné que vous affichez déjà la valeur de la variable Greeting dans la page, la valeur s’affiche à nouveau lorsque vous transmettez la variable à ObjectInfo .

      Pour les objets plus complexes, le ObjectInfo programme d’assistance peut afficher plus d’informations : en fait, il peut afficher les types et les valeurs de toutes les propriétés d’un objet.

Utilisation des outils de débogage dans Visual Studio

Pour une expérience de débogage plus complète, utilisez Visual Studio. avec Visual Studio, vous pouvez définir un point d’arrêt dans votre code à la ligne que vous souhaitez inspecter.

set breakpoint

Lorsque vous testez le site Web, le code en cours d’exécution s’arrête au point d’arrêt.

reach breakpoint

Vous pouvez examiner les valeurs actuelles des variables et parcourir le code ligne par ligne.

see values

pour plus d’informations sur l’utilisation du débogueur intégré dans Visual Studio pour déboguer des pages razor ASP.NET, consultez programmation d’pages Web ASP.NET (Razor) à l’aide de Visual Studio.

Ressources supplémentaires