Procédure pas à pas : débogage des pages Web dans Visual Web Developer

Article
08/21/2008

Mise à jour : novembre 2007

Visual Web Developer vous fournit des outils qui vous permettent de localiser les erreurs dans vos pages Web ASP.NET. Dans cette procédure pas à pas, vous utiliserez le débogueur qui vous permet de parcourir le code de la page ligne par ligne et d'examiner les valeurs des variables.

Dans la procédure pas à pas, vous allez créer une page Web qui contient une calculatrice simple qui élève un nombre au carré. Une fois la page créée (avec une erreur délibérée), vous utiliserez le débogueur pour examiner la page lors de son exécution.

Cette procédure pas à pas illustre les tâches suivantes :

Définition de points d'arrêt.
Appel du débogueur à partir d'une page Web Forms sur un site Web de système de fichiers.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez utiliser :

Visual Web Developer et le .NET Framework.

Vous devez également avoir une connaissance générale des fonctions de Visual Web Developer. Pour une introduction à Visual Web Developer, consultez Procédure pas à pas : création d'une page Web de base dans Visual Web Developer.

Création du site et de la page Web

Dans la première partie de la procédure pas à pas, vous allez créer une page que vous pouvez déboguer.

Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, à l'aide de la rubrique Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site et passer à l'étape "Ajout de contrôles au débogueur" de cette procédure. Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

Ouvrez Visual Web Developer.
Dans le menu Fichier, cliquez sur Nouveausite Web.

La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, cliquez sur Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

Par exemple, tapez le nom du dossier C:\SitesWeb.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.

Le langage de programmation choisi sera la valeur par défaut de votre site Web. Toutefois, vous pouvez utiliser plusieurs langages dans la même application Web en créant des pages et des composants dans différents langages de programmation. Pour plus d'informations sur la création de composants qui utilisent des langages différents, consultez Dossiers de code partagé dans des sites Web ASP.NET.
Cliquez sur OK.

Visual Web Developer crée le dossier et une page nommée Default.aspx.

Création d'une page à déboguer

Vous allez d'abord créer une page. Dans cette procédure pas à pas, il est important de créer une page en respectant la procédure suivante.

Pour ajouter une page au site Web

Fermez la page Default.aspx.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de votre site Web (par exemple C:\WebSite), puis cliquez sur Ajouter un nouvel élément.
Sous Modèles Visual Studio installés, choisissez Formulaire Web.
Dans la zone Nom, tapez DebugPage.aspx.
Dans la liste Langage, choisissez le langage de programmation que vous souhaitez utiliser.
Assurez-vous que la case à cocher Placer le code dans un fichier distinct est désactivée.

Dans cette procédure pas à pas, vous allez créer une page à fichier unique qui inclut le code et le HTML. Le code des pages ASP.net peut être stocké dans la page ou dans un fichier de classe distinct. Pour en savoir plus sur la conservation du code dans un fichier séparé, consultez Procédure pas à pas : création d'une page Web de base avec la séparation de code dans Visual Web Developer.
Cliquez sur Ajouter.

Visual Web Developer crée la page et l'ouvre en mode Source.

Vous pouvez maintenant ajouter des contrôles à la page, puis le code. Le code sera simple, mais suffisant pour vous permettre d'ajouter des points d'arrêt ultérieurement.

Pour ajouter des contrôles et du code pour le débogage

Passez en mode Design, puis à partir du dossier Standard de la Boîte à outils, faites glisser les contrôles suivants sur la page et définissez leurs propriétés comme indiqué :

Contrôle	Propriétés
Label	ID : CaptionLabel Text : (vide)
TextBox	ID : NumberTextBox Text : (vide)
Button	ID : SquareButton Text : Square
Label	ID : ResultLabel Text : (vide)

Remarque :
Pour cette procédure pas à pas, la disposition de la page n'a pas d'importance.

Double-cliquez sur le contrôle Button afin de créer un gestionnaire Click pour celui-ci.

Ajoutez une logique au gestionnaire Click afin d'appeler une fonction nommée Square pour élever au carré le nombre entré par l'utilisateur. Le gestionnaire peut se présenter comme dans l'exemple suivant :

Remarque :
L'exemple de code n'inclut délibérément aucune vérification des erreurs.

Sub SquareButton_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim number As Integer
    Dim result As Integer
    number = CInt(NumberTextBox.Text)
    result = Square(number)
    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
End Sub

protected void SquareButton_Click(object sender, System.EventArgs e)
{
    int number, result; 
    number = System.Convert.ToInt32(NumberTextBox.Text);
    result = Square(number);
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
}

Créez la fonction qui élève le nombre au carré. Incluez un bogue dans le code pour ajouter le nombre à lui-même au lieu de le multiplier. Le code peut se présenter comme dans l'exemple suivant :
```
Function Square(number As Integer) As Integer
    Square = number + number
End Function
```
```
int Square(int number )
{    
    int Square;
    Square = number + number;
    return Square;
}
```

Vous pouvez également ajouter le code à la page qui modifiera le texte de l'étiquette s'il s'agit de la première exécution de la page.

Pour modifier le contrôle CaptionLabel

En mode Design, double-cliquez sur l'aire de conception (pas sur un contrôle) pour créer un gestionnaire d'événements Page_Load.

Affectez au texte du contrôle CaptionLabel la valeur Enter a number: s'il s'agit de la première exécution de la page, ou Enter another number: sinon. Le gestionnaire se présentera comme dans l'exemple de code suivant :

Sub Page_Load(ByVal sender As Object, ByVal e as System.EventArgs)
    If Page.IsPostBack = False Then
        CaptionLabel.Text = "Enter a number: "
    Else
        CaptionLabel.Text = "Enter another number: "
    End If
End Sub

if(Page.IsPostBack == false)
{
    CaptionLabel.Text = "Enter a number: ";
}
else {
    CaptionLabel.Text = "Enter another number: " ;
}

Test de la page

Pour vérifier que la page fonctionne, exécutez-la dans son état actuel.

Pour exécuter la page

Enregistrez la page.
Appuyez sur CTRL+F5 pour exécuter la page.
Entrez la valeur 3, puis appuyez sur le bouton Carré.

Notez que le résultat est incorrect en raison de la présence d'un bogue dans le programme. Le bon résultat est 9.
Fermez le navigateur.

Débogage de la page

Dans cette partie de la procédure pas à pas, vous allez utiliser le débogueur pour examiner le code de page ligne par ligne lors de son exécution, ajouter des points d'arrêt au code, puis exécuter la page en mode Debug.

Vous allez d'abord définir des points d'arrêt dans votre code. Un point d'arrêt est une ligne dans votre code où l'exécution s'arrête et où le débogueur est appelé.

Pour définir des points d'arrêt

Passez en mode Source.
Cliquez avec le bouton droit sur la ligne suivante, choisissez Point d'arrêt, puis Insérer un point d'arrêt.

Remarque :

Vous pouvez activer/désactiver les points d'arrêt en appuyant sur F9.
```
If Page.IsPostBack = False Then
```
```
if(Page.IsPostBack == false)
```
Définissez un autre point d'arrêt sur la ligne suivante du gestionnaire SquareButton_Click :
```
result = Square(number)
```
```
result = Square(number);
```
Remarque :

Vous ne pouvez pas définir de point d'arrêt dans une instruction qui déclare une variable.

Remarque :
Vous pouvez activer/désactiver les points d'arrêt en appuyant sur F9.

Remarque :
Vous ne pouvez pas définir de point d'arrêt dans une instruction qui déclare une variable.

Avec au moins un jeu de points d'arrêt, vous êtes prêt à exécuter le débogueur.

Pour exécuter le débogueur

Dans le menu Déboguer, choisissez Démarrer le débogage (ou appuyez sur F5) pour exécuter la page en mode Debug.

Si vous n'avez jamais exécuté le débogueur auparavant, votre application n'est probablement pas configurée pour prendre en charge le débogage. Par défaut, le débogage est désactivé dans les applications pour des raisons de performance (les pages s'exécutent plus lentement dans le débogueur) et de sécurité. Visual Web Developer affiche un message vous indiquant la procédure à suivre pour activer le débogage.

Le commutateur d'activation du débogage est stocké sous forme de paramètre dans le fichier Web.config qui contient différentes options de configuration spécifiques au site. Si aucun fichier Web.config n'est défini, Visual Web Developer le crée ainsi que le paramètre du débogueur approprié.

Si le fichier Web.config est défini, mais que le débogage n'est pas activé, un message légèrement différent s'affiche afin d'indiquer que Visual Web Developer va modifier le fichier Web.config.
Si le message qui indique que le débogage n'a pas été activé s'affiche, cliquez sur OK pour l'activer.

Dans Visual Web Developer, le concepteur passe en mode Debug en affichant le code de votre page et des fenêtres du débogueur.

Le débogueur exécute votre page ligne par ligne. Lorsque le débogueur arrive à la ligne qui contient le point d'arrêt, il s'arrête et met la ligne en surbrillance.

Parce que le point d'arrêt est dans le gestionnaire Page_Load, le traitement de la page n'est pas encore terminé. Le navigateur est ouvert, mais la page n'est pas encore affichée.
Dans le menu Déboguer, cliquez sur Fenêtres, sur Espion, puis sur Espion 1.

Remarque :

Si vous utilisez Visual Web Developer Express, le débogueur affiche uniquement la fenêtre Espion.

Une fenêtre Espion s'ouvre alors dans laquelle vous pouvez spécifier les valeurs que vous souhaitez suivre.
Dans l'éditeur, cliquez avec le bouton droit sur la partie IsPostBack de l'expression Page.IsPostBack, puis surAjouter un espion.

L'expression est alors ajoutée à la fenêtre Espion et la valeur actuelle de la propriété (false) s'affiche dans la colonne Valeur. Vous pouvez également taper le nom d'une variable ou d'une propriété dans la colonne Nom de la fenêtre Espion.
Dans le menu Déboguer, choisissez Continuer pour poursuivre l'exécution ou appuyez sur F5.

La commande Continuer indique au débogueur de continuer jusqu'au point d'arrêt suivant. Le gestionnaire d'événements Page_Load termine le traitement et la page s'affiche dans le navigateur.
Entrez la valeur 2 dans la zone de texte et cliquez sur le bouton Square.

Le débogueur s'affiche de nouveau, avec le point d'arrêt sur la ligne dans le gestionnaire Page_Load. La fenêtre Espion affiche à présent la valeur de Page.IsPostBack définie sur true.
Appuyez de nouveau sur F5 pour continuer.

Le débogueur traite le gestionnaire Page_Load et accède au gestionnaire SquareButton_Click au niveau du deuxième point d'arrêt que vous avez défini.
Dans le menu Déboguer, cliquez sur Fenêtres, puis sur Variables locales.

La fenêtre Variables locales s'ouvre alors avec les valeurs de l'ensemble des variables et des objets concernés par la ligne actuelle en cours d'exécution. La fenêtre Variables locales offre une alternative à la consultation de ces valeurs. Elle présente l'avantage de ne pas avoir à définir explicitement un espion pour les éléments, mais l'inconvénient est qu'elle peut contenir plus d'informations que vous ne souhaitez en voir à la fois.

Dans la fenêtre Variables locales, vous constatez que la valeur de number est 2 et la valeur de result est 0.

Remarque :

Vous pouvez également afficher la valeur de toute variable du programme en maintenant le pointeur de la souris dessus.
Dans la colonne Valeur de la fenêtre Variables locales, cliquez avec le bouton droit sur la ligne de la variable number et sélectionnez Modifier la valeur. Modifiez la valeur de la variable number en 5.

L'affectation de la valeur 2 à la variable number n'est pas un test satisfaisant du programme, parce que l'ajout et l'élévation au carré de 2 donnent 4 dans les deux cas. Vous pouvez par conséquent modifier la valeur de cette variable pendant l'exécution du programme.
Dans le menu Déboguer, choisissez Pas à pas détaillé pour parcourir la fonction Square ou appuyez sur F11.

La commande Pas à pas détaillé oblige le débogueur à exécuter une ligne, puis à s'arrêter de nouveau.
Poursuivez votre pas à pas en appuyant sur F11 jusqu'à la ligne de code suivante.
```
ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
```
```
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
```
Le débogueur parcourt votre code ligne par ligne. Lorsque le débogueur exécute la fonction Square, vous pouvez utiliser la fenêtre Variables locales pour vérifier les données transmises à la fonction (number) et la valeur de retour de la fonction (Square).
Dans le menu Déboguer, cliquez sur Fenêtres, puis sur Exécution.

La fenêtre Exécution vous permet d'exécuter des commandes. Vous pouvez utiliser la fenêtre pour évaluer des expressions (par exemple, obtenir la valeur d'une propriété).
Dans la fenêtre Exécution, tapez l'expression suivante et appuyez sur Entrée.
```
? NumberTextBox.Text
```
Le point d'interrogation (?) est un opérateur de la fenêtre Exécution qui évalue l'expression qui le suit. Dans cet exemple, vous évaluez la propriété Text du contrôle NumberTextBox de la page. Vous pouvez évaluer toute variable, propriété d'objet ou expression qui combine celles-ci, à l'aide de la même syntaxe que celle que vous utiliseriez dans le code.
Dans la fenêtre Exécution, tapez le texte suivant et appuyez sur Entrée.
```
NumberTextBox.Text = "5"
```
Outre l'évaluation des expressions, la fenêtre Exécution vous permet de modifier des variables ou des propriétés
Appuyez sur F5 pour poursuivre l'exécution le programme.

Lorsque la page apparaît, elle affiche le résultat du passage de la valeur 5 à la fonction Square. De plus, le texte de la zone de texte a été modifié en 5.

Remarque :
Si vous utilisez Visual Web Developer Express, le débogueur affiche uniquement la fenêtre Espion.

Remarque :
Vous pouvez également afficher la valeur de toute variable du programme en maintenant le pointeur de la souris dessus.

Le résultat affiché, 10, est incorrect, puisque 10 n'est pas le carré de 5. Vous pouvez à présent corriger le bogue.

Pour corriger le bogue et effectuer un nouveau test

Passez du navigateur à Visual Web Developer.

Remarque :

Ne fermez pas la fenêtre du navigateur.
Dans la fonction Square, remplacez l'opérateur "+" par l'opérateur "*".

Le code n'étant pas en cours d'exécution (le traitement de la page est terminé), vous êtes en mode édition et vous pouvez apporter des modifications permanentes.
Appuyez sur CTRL+S pour enregistrer la page.
Dans le menu Déboguer, choisissez Supprimer tous les points d'arrêt afin que la page ne s'arrête pas chaque fois que vous l'exécutez.

Remarque :

Vous pouvez également effacer des points d'arrêt en appuyant sur CTRL+MAJ+F9.
Basculez vers la fenêtre du navigateur.
Entrez 5 dans la zone de texte et cliquez sur le bouton.

Si vous exécutez maintenant la page et entrez une valeur, elle est correctement élevée au carré. Les modifications temporaires que vous avez apportées précédemment, comme la modification de la propriété Text du contrôle NumberTextBox, ne sont pas persistantes, parce qu'elles ont été appliquées uniquement au cours de la dernière exécution de la page.
Fermez le navigateur pour arrêter le débogueur.

Remarque :
Ne fermez pas la fenêtre du navigateur.

Remarque :
Vous pouvez également effacer des points d'arrêt en appuyant sur CTRL+MAJ+F9.

Étapes suivantes

Le débogueur inclut des fonctionnalités supplémentaires qui vous aident à utiliser votre code. Vous pouvez également souhaiter en apprendre davantage sur les techniques de gestion des conditions d'erreur et les moyens qui vous permettent de surveiller le traitement d'une page au moment de l'exécution. Vous pouvez, par exemple, souhaiter explorer le traçage. Pour plus d'informations, consultez Procédure pas à pas : utilisation du traçage dans Visual Web Developer pour rechercher des erreurs de pages Web.

Voir aussi

Autres ressources

Débogage dans Visual Studio