Présentation des fonctionnalités de débogage d’ASP.NET AJAX
par Scott Cate
La possibilité de déboguer du code est une compétence que chaque développeur doit avoir dans son arsenal, quelle que soit la technologie qu’ils utilisent. Bien que de nombreux développeurs soient habitués à utiliser Visual Studio .NET ou Web Developer Express pour déboguer des applications ASP.NET qui utilisent du code VB.NET ou C#, certains ne savent pas qu’il est également extrêmement utile pour le débogage de code côté client tel que JavaScript. Le même type de techniques utilisées pour déboguer des applications .NET peut également être appliqué aux applications avec AJAX et plus spécifiquement ASP.NET applications AJAX.
Débogage ASP.NET applications AJAX
Dan Wahlin
La possibilité de déboguer du code est une compétence que chaque développeur doit avoir dans son arsenal, quelle que soit la technologie qu’ils utilisent. Il va sans dire que la compréhension des différentes options de débogage disponibles peut vous faire gagner beaucoup de temps sur un projet et peut-être même quelques maux de tête. Bien que de nombreux développeurs soient habitués à utiliser Visual Studio .NET ou Web Developer Express pour déboguer des applications ASP.NET qui utilisent du code VB.NET ou C#, certains ne savent pas qu’il est également extrêmement utile pour le débogage de code côté client tel que JavaScript. Le même type de techniques utilisées pour déboguer des applications .NET peut également être appliqué aux applications avec AJAX et plus spécifiquement ASP.NET applications AJAX.
Dans cet article, vous allez voir comment Visual Studio 2008 et plusieurs autres outils peuvent être utilisés pour déboguer ASP.NET applications AJAX afin de localiser rapidement les bogues et autres problèmes. Cette discussion inclut des informations sur l’activation d’Internet Explorer 6 ou version ultérieure pour le débogage, l’utilisation de Visual Studio 2008 et du script Explorer pour parcourir le code, ainsi que l’utilisation d’autres outils gratuits tels que Web Development Helper. Vous apprendrez également à déboguer ASP.NET applications AJAX dans Firefox à l’aide d’une extension nommée Firebug qui vous permet de parcourir le code JavaScript directement dans le navigateur sans aucun autre outil. Enfin, vous allez découvrir les classes de la bibliothèque AJAX ASP.NET qui peuvent vous aider à effectuer diverses tâches de débogage telles que le suivi et les instructions d’assertion de code.
Avant d’essayer de déboguer les pages consultées dans Internet Explorer vous devez effectuer quelques étapes de base pour les activer pour le débogage. Examinons quelques conditions de configuration de base qui doivent être effectuées pour commencer.
Configuration de Explorer Internet pour le débogage
La plupart des gens ne sont pas intéressés par les problèmes JavaScript rencontrés sur un site web consulté avec internet Explorer. En fait, l’utilisateur moyen ne sait même pas quoi faire s’il voit un message d’erreur. Par conséquent, les options de débogage sont désactivées par défaut dans le navigateur. Toutefois, il est très simple d’activer le débogage et de l’utiliser lors du développement de nouvelles applications AJAX.
Pour activer la fonctionnalité de débogage, accédez à Outils Options Internet dans le menu Internet Explorer et sélectionnez l’onglet Avancé. Dans la section Navigation, vérifiez que les éléments suivants sont décochés :
- Désactiver le débogage de script (Internet Explorer)
- Désactiver le débogage de script (Autre)
Bien que ce ne soit pas obligatoire, si vous essayez de déboguer une application, vous voudrez probablement que toutes les erreurs JavaScript dans la page soient immédiatement visibles et évidentes. Vous pouvez forcer l’affichage de toutes les erreurs avec une boîte de message en cochant la case « Afficher une notification sur chaque erreur de script ». Bien qu’il s’agit d’une excellente option pour activer pendant le développement d’une application, cela peut rapidement devenir ennuyeux si vous parcourez simplement d’autres sites Web, car vos chances de rencontrer des erreurs JavaScript sont assez bonnes.
La figure 1 montre ce que le dialogue Internet Explorer avancé doit prendre en compte lorsqu’il a été correctement configuré pour le débogage.
Figure 1 : Configuration d’Internet Explorer pour le débogage. (Cliquez pour afficher l’image en taille réelle)
Une fois le débogage activé, un nouvel élément de menu s’affiche dans le menu Affichage nommé Débogueur de script. Il dispose de deux options: Ouvrir et Interrompre à l’instruction suivante. Lorsque l’option Ouvrir est sélectionnée, vous êtes invité à déboguer la page dans Visual Studio 2008 (notez que Visual Web Developer Express peut également être utilisé pour le débogage). Si Visual Studio .NET est en cours d’exécution, vous pouvez choisir d’utiliser cette instance ou de créer un instance. Lorsque l’option Break at Next Statement est sélectionnée, vous êtes invité à déboguer la page lors de l’exécution du code JavaScript. Si le code JavaScript s’exécute dans l’événement onLoad de la page, vous pouvez actualiser la page pour déclencher une session de débogage. Si le code JavaScript est exécuté après un clic sur un bouton, le débogueur s’exécute immédiatement après que vous avez cliqué sur le bouton.
Notes
Si vous exécutez sur Windows Vista avec l’utilisateur Access Control activé et que Visual Studio 2008 est configuré pour s’exécuter en tant qu’administrateur, Visual Studio ne parvient pas à s’attacher au processus lorsque vous êtes invité à attacher. Pour contourner ce problème, démarrez d’abord Visual Studio et utilisez cette instance pour déboguer.
Bien que la section suivante montre comment déboguer une page AJAX ASP.NET directement à partir de Visual Studio 2008, l’utilisation de l’option Débogueur de script Internet Explorer est utile lorsqu’une page est déjà ouverte et que vous souhaitez l’inspecter plus complètement.
Débogage avec Visual Studio 2008
Visual Studio 2008 fournit des fonctionnalités de débogage sur lesquelles les développeurs du monde entier s’appuient tous les jours pour déboguer des applications .NET. Le débogueur intégré vous permet de parcourir le code, d’afficher des données d’objet, watch pour des variables spécifiques, de surveiller la pile d’appels et bien plus encore. En plus du débogage du code VB.NET ou C#, le débogueur est également utile pour le débogage ASP.NET applications AJAX et vous permet de parcourir le code JavaScript ligne par ligne. Les détails qui suivent se concentrent sur les techniques qui peuvent être utilisées pour déboguer des fichiers de script côté client plutôt que de fournir un discours sur le processus global de débogage des applications à l’aide de Visual Studio 2008.
Le processus de débogage d’une page dans Visual Studio 2008 peut être démarré de différentes manières. Tout d’abord, vous pouvez utiliser l’option Débogueur de script Internet Explorer mentionnée dans la section précédente. Cela fonctionne bien lorsqu’une page est déjà chargée dans le navigateur et que vous souhaitez commencer à la déboguer. Vous pouvez également cliquer avec le bouton droit sur une page .aspx dans le Explorateur de solutions et sélectionner Définir comme page de démarrage dans le menu. Si vous avez l’habitude de déboguer ASP.NET pages, vous l’avez probablement déjà fait. Une fois la touche F5 enfoncée, la page peut être déboguée. Toutefois, bien que vous puissiez généralement définir un point d’arrêt où vous le souhaitez dans VB.NET code ou C#, ce n’est pas toujours le cas avec JavaScript comme vous le verrez ensuite.
Scripts incorporés et scripts externes
Le débogueur Visual Studio 2008 traite JavaScript incorporé dans une page différente des fichiers JavaScript externes. Avec les fichiers de script externes, vous pouvez ouvrir le fichier et définir un point d’arrêt sur n’importe quelle ligne de votre choix. Les points d’arrêt peuvent être définis en cliquant dans la zone de la barre d’état grise située à gauche de la fenêtre de l’éditeur de code. Lorsque JavaScript est incorporé directement dans une page à l’aide de la <script> balise, la définition d’un point d’arrêt en cliquant dans la zone de la barre d’état grise n’est pas une option. Les tentatives de définition d’un point d’arrêt sur une ligne de script incorporé entraînent un avertissement indiquant « Il ne s’agit pas d’un emplacement valide pour un point d’arrêt ».
Vous pouvez contourner ce problème en déplaçant le code dans un fichier de .js externe et en le référençant à l’aide de l’attribut src de la <balise de script> :
<script type="text/javascript" src="Scripts/YourScript.js"></script>
Que se passe-t-il si le déplacement du code dans un fichier externe n’est pas une option ou nécessite plus de travail que ce qu’il en vaut la peine ? Bien que vous ne puissiez pas définir de point d’arrêt à l’aide de l’éditeur, vous pouvez ajouter l’instruction de débogueur directement dans le code où vous souhaitez démarrer le débogage. Vous pouvez également utiliser la classe Sys.Debug disponible dans la bibliothèque ASP.NET AJAX pour forcer le démarrage du débogage. Vous en apprendrez plus sur la classe Sys.Debug plus loin dans cet article.
Un exemple d’utilisation de l’mot clé debugger est illustré dans la liste 1. Cet exemple force le débogueur à s’arrêter juste avant qu’un appel à une fonction de mise à jour soit effectué.
Liste 1. L’utilisation du débogueur mot clé pour forcer l’arrêt du débogueur Visual Studio .NET.
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
debugger;
UpdatePerson(person);
}
Une fois que l’instruction du débogueur est atteinte, vous êtes invité à déboguer la page à l’aide de Visual Studio .NET et pouvez commencer à parcourir le code. Lors de cette opération, vous pouvez rencontrer un problème d’accès à ASP.NET fichiers de script de bibliothèque AJAX utilisés dans la page. Nous allons donc jeter un coup d’œil à l’utilisation de Visual Studio . Explorer de script de NET.
Utilisation de Visual Studio .NET Windows pour déboguer
Une fois qu’une session de débogage est démarrée et que vous commencez à parcourir le code à l’aide de la clé F11 par défaut, vous pouvez rencontrer la boîte de dialogue d’erreur illustrée dans la figure 2, sauf si tous les fichiers de script utilisés dans la page sont ouverts et disponibles pour le débogage.
Figure 2 : boîte de dialogue d’erreur affichée lorsqu’aucun code source n’est disponible pour le débogage. (Cliquez pour afficher l’image en taille réelle)
Cette boîte de dialogue s’affiche, car Visual Studio .NET ne sait pas comment accéder au code source de certains des scripts référencés par la page. Bien que cela puisse être assez frustrant au début, il existe une solution simple. Une fois que vous avez démarré une session de débogage et atteint un point d’arrêt, accédez à la fenêtre Debug Windows Script Explorer dans le menu Visual Studio 2008 ou utilisez le raccourci Ctrl+Alt+N.
Notes
Si vous ne voyez pas le menu Script Explorer répertorié, accédez à Outils>Personnaliser>les commandes dans le menu Visual Studio .NET. Recherchez l’entrée Debug dans la section Catégories et cliquez dessus pour afficher toutes les entrées de menu disponibles. Dans la liste Commandes, faites défiler jusqu’à Script Explorer, puis faites-le glisser vers le haut dans le menu Déboguer Windows mentionné précédemment. Cela rend l’entrée de menu Script Explorer disponible chaque fois que vous exécutez Visual Studio .NET.
Le Explorer script permet d’afficher tous les scripts utilisés dans une page et de les ouvrir dans l’éditeur de code. Une fois le Explorer de script ouvert, double-cliquez sur la page .aspx en cours de débogage pour l’ouvrir dans la fenêtre de l’éditeur de code. Effectuez la même action pour tous les autres scripts affichés dans le Explorer script. Une fois tous les scripts ouverts dans la fenêtre de code, vous pouvez appuyer sur F11 (et utiliser les autres raccourcis de débogage) pour parcourir votre code. La figure 3 montre un exemple de Explorer de script. Il répertorie le fichier actif en cours de débogage (Demo.aspx) ainsi que deux scripts personnalisés et deux scripts injectés dynamiquement dans la page par le ASP.NET AJAX ScriptManager.
Figure 3. Le Explorer script permet d’accéder facilement aux scripts utilisés dans une page. (Cliquez pour afficher l’image en taille réelle)
Plusieurs autres fenêtres peuvent également être utilisées pour fournir des informations utiles à mesure que vous parcourez le code d’une page. Par exemple, vous pouvez utiliser la fenêtre Locals pour voir les valeurs des différentes variables utilisées dans la page, la fenêtre Exécution pour évaluer des variables ou des conditions spécifiques et afficher la sortie. Vous pouvez également utiliser la fenêtre Sortie pour afficher les instructions de trace écrites à l’aide de la fonction Sys.Debug.trace (qui sera abordée plus loin dans cet article) ou de la fonction Debug.writeln d’Internet Explorer.
Lorsque vous parcourez le code à l’aide du débogueur, vous pouvez passer la souris sur les variables du code pour afficher la valeur qui leur est attribuée. Toutefois, le débogueur de script n’affiche parfois rien lorsque vous passez la souris sur une variable JavaScript donnée. Pour afficher la valeur, mettez en surbrillance l’instruction ou la variable que vous essayez de voir dans la fenêtre de l’éditeur de code, puis passez la souris sur celle-ci. Bien que cette technique ne fonctionne pas dans toutes les situations, vous serez souvent en mesure de voir la valeur sans avoir à regarder dans une autre fenêtre de débogage, telle que la fenêtre Locals.
Un tutoriel vidéo illustrant certaines des fonctionnalités abordées ici peut être consulté à l’adresse http://www.xmlforasp.net.
Débogage avec l’assistant de développement web
Bien que Visual Studio 2008 (et Visual Web Developer Express 2008) soient des outils de débogage très performants, il existe d’autres options qui peuvent également être utilisées qui sont plus légères. L’un des outils les plus récents à publier est l’aide au développement web. Nikhil Kothari de Microsoft (l’une des clés ASP.NET architectes AJAX chez Microsoft) a écrit cet excellent outil qui peut effectuer de nombreuses tâches différentes, du débogage simple à l’affichage des messages de requête et de réponse HTTP.
L’aide au développement web peut être utilisée directement à l’intérieur d’Internet Explorer ce qui le rend pratique à utiliser. Pour commencer, sélectionnez Outils Web Development Helper dans le menu Internet Explorer. Cela ouvre l’outil dans la partie inférieure du navigateur, ce qui est agréable, car vous n’avez pas besoin de quitter le navigateur pour effectuer plusieurs tâches telles que la journalisation des requêtes HTTP et des messages de réponse. La figure 4 montre à quoi ressemble Web Development Helper en action.
Figure 4 : Web Development Helper (Cliquer pour afficher l’image en taille réelle)
L’aide au développement web n’est pas un outil que vous utiliserez pour parcourir le code ligne par ligne, comme avec Visual Studio 2008. Toutefois, il peut être utilisé pour afficher la sortie de trace, évaluer facilement les variables dans un script ou explorer les données qui se trouvent à l’intérieur d’un objet JSON. Il est également très utile pour afficher les données transmises à et à partir d’une page AJAX ASP.NET et d’un serveur.
Une fois que Web Development Helper est ouvert dans Internet Explorer, le débogage de script doit être activé en sélectionnant Script Activer le débogage de script dans le menu d’aide développement web, comme illustré plus haut dans la figure 4. Cela permet à l’outil d’intercepter les erreurs qui se produisent lors de l’exécution d’une page. Il permet également d’accéder facilement aux messages de suivi qui sont générés dans la page. Pour afficher les informations de trace ou exécuter des commandes de script afin de tester différentes fonctions dans une page, sélectionnez Script Show Script Console dans le menu Web Development Helper. Cela permet d’accéder à une fenêtre de commande et à une fenêtre d’exécution simple.
Affichage des messages de trace et des données d’objet JSON
La fenêtre immédiate peut être utilisée pour exécuter des commandes de script ou même charger ou enregistrer des scripts utilisés pour tester différentes fonctions dans une page. La fenêtre de commande affiche les messages de suivi ou de débogage écrits par la page affichée. La liste 2 montre comment écrire un message de trace à l’aide de la fonction Debug.writeln d’Internet Explorer.
Liste 2. Écriture d’un message de trace côté client à l’aide de la classe Debug.
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
Debug.writeln("Person name: " + person.LastName);
UpdatePerson(person);
}
Si la propriété LastName contient une valeur de Doe, Web Development Helper affiche le message « Nom de la personne : Doe » dans la fenêtre de commande de la console de script (en supposant que le débogage a été activé). Web Development Helper ajoute également un objet debugService de niveau supérieur dans des pages qui peuvent être utilisées pour écrire des informations de trace ou afficher le contenu d’objets JSON. La liste 3 montre un exemple d’utilisation de la fonction trace de la classe debugService.
Liste 3. Utilisation de la classe debugService de Web Development Helper pour écrire un message de trace.
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
if (window.debugService)
{
window.debugService.trace("Person name: " + person.LastName);
}
UpdatePerson(person);
}
Une fonctionnalité intéressante de la classe debugService est qu’elle fonctionne même si le débogage n’est pas activé dans Internet Explorer ce qui facilite l’accès aux données de trace quand Web Development Helper est en cours d’exécution. Lorsque l’outil n’est pas utilisé pour déboguer une page, les instructions de trace sont ignorées, car l’appel à window.debugService retourne false.
La classe debugService permet également d’afficher les données d’objet JSON à l’aide de la fenêtre inspecteur de Web Development Helper. La liste 4 crée un objet JSON simple contenant des données de personne. Une fois l’objet créé, un appel est effectué à la fonction inspect de la classe debugService pour permettre l’inspection visuelle de l’objet JSON.
Liste 4. Utilisation de la fonction debugService.inspect pour afficher les données d’objet JSON.
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
if (window.debugService)
{
window.debugService.inspect("Person Object",person);
}
UpdatePerson(person);
}
L’appel de la fonction GetPerson() dans la page ou via la fenêtre immédiate entraîne l’affichage de la boîte de dialogue Inspecteur d’objets, comme illustré dans la figure 5. Les propriétés de l’objet peuvent être modifiées dynamiquement en les mettant en surbrillance, en modifiant la valeur affichée dans la zone de texte Valeur, puis en cliquant sur le lien Mettre à jour. L’utilisation de l’inspecteur d’objets simplifie l’affichage des données d’objet JSON et l’expérimentation de l’application de différentes valeurs aux propriétés.
Erreurs de débogage
En plus d’autoriser l’affichage des données de trace et des objets JSON, l’assistant développement web peut également aider au débogage d’erreurs dans une page. Si une erreur est rencontrée, vous êtes invité à passer à la ligne de code suivante ou à déboguer le script (voir figure 6). La boîte de dialogue Erreur de script affiche la pile d’appels complète ainsi que les numéros de ligne afin que vous puissiez facilement identifier où se trouvent les problèmes au sein d’un script.
Figure 5 : Utilisation de la fenêtre Inspecteur d’objets pour afficher un objet JSON. (Cliquez pour afficher l’image en taille réelle)
La sélection de l’option de débogage vous permet d’exécuter des instructions de script directement dans la fenêtre immédiate de Web Development Helper pour afficher la valeur des variables, écrire des objets JSON, et bien plus encore. Si la même action qui a déclenché l’erreur est réécutée et que Visual Studio 2008 est disponible sur l’ordinateur, vous serez invité à démarrer une session de débogage afin de pouvoir parcourir le code ligne par ligne, comme indiqué dans la section précédente.
Figure 6 : Boîte de dialogue d’erreur de script de Web Development Helper (cliquez pour afficher l’image en taille réelle)
Inspection des messages de demande et de réponse
Lors du débogage ASP.NET pages AJAX, il est souvent utile de voir les messages de demande et de réponse envoyés entre une page et un serveur. L’affichage du contenu dans les messages vous permet de voir si les données appropriées sont transmises, ainsi que la taille des messages. Web Development Helper fournit une excellente fonctionnalité d’enregistreur de messages HTTP qui facilite l’affichage des données sous forme de texte brut ou dans un format plus lisible.
Pour afficher ASP.NET messages de requête et de réponse AJAX, l’enregistreur HTTP doit être activé en sélectionnant HTTP Activer la journalisation HTTP dans le menu Aide au développement web. Une fois activé, tous les messages envoyés à partir de la page active peuvent être affichés dans la visionneuse du journal HTTP accessible en sélectionnant HTTP Afficher les journaux HTTP.
Bien que l’affichage du texte brut envoyé dans chaque message de demande/réponse soit certainement utile (et une option dans Web Development Helper), il est souvent plus facile d’afficher les données de message dans un format plus graphique. Une fois la journalisation HTTP activée et les messages enregistrés, les données de message peuvent être consultées en double-cliquant sur le message dans la visionneuse du journal HTTP. Cela vous permet d’afficher tous les en-têtes associés à un message, ainsi que le contenu réel du message. La figure 7 montre un exemple de message de demande et de message de réponse affiché dans la fenêtre Visionneuse de journaux HTTP.
Figure 7 : Utilisation de la visionneuse du journal HTTP pour afficher les données des messages de requête et de réponse. (Cliquez pour afficher l’image en taille réelle)
La visionneuse de journal HTTP analyse automatiquement les objets JSON et les affiche à l’aide d’une arborescence, ce qui permet d’afficher rapidement et facilement les données de propriété de l’objet. Lorsqu’un UpdatePanel est utilisé dans une page AJAX ASP.NET, la visionneuse décompose chaque partie du message en parties individuelles, comme le montre la figure 8. Il s’agit d’une fonctionnalité intéressante qui facilite considérablement la visualisation et la compréhension de ce qui se trouve dans le message par rapport à l’affichage des données brutes du message.
Figure 8 : Message de réponse UpdatePanel affiché à l’aide de la visionneuse du journal HTTP. (Cliquez pour afficher l’image en taille réelle)
Il existe plusieurs autres outils qui peuvent être utilisés pour afficher les messages de demande et de réponse en plus de Web Development Helper. Une autre bonne option est Fiddler qui est disponible gratuitement sur http://www.fiddlertool.com. Bien que Fiddler ne soit pas abordé ici, il s’agit également d’une bonne option lorsque vous devez inspecter soigneusement les en-têtes de message et les données.
Débogage avec Firefox et Firebug
Si Internet Explorer est toujours le navigateur le plus utilisé, d’autres navigateurs tels que Firefox sont devenus très populaires et sont de plus en plus utilisés. Par conséquent, vous souhaiterez afficher et déboguer vos ASP.NET pages AJAX dans Firefox ainsi que les Explorer Internet pour vous assurer que vos applications fonctionnent correctement. Bien que Firefox ne puisse pas être lié directement à Visual Studio 2008 pour le débogage, il dispose d’une extension appelée Firebug qui peut être utilisée pour déboguer des pages. Firebug peut être téléchargé gratuitement en accédant à http://www.getfirebug.com.
Firebug fournit un environnement de débogage complet qui peut être utilisé pour parcourir le code ligne par ligne, accéder à tous les scripts utilisés dans une page, afficher les structures DOM, afficher les styles CSS et même suivre les événements qui se produisent dans une page. Une fois installé, Firebug est accessible en sélectionnant Outils Firebug Ouvrir Firebug dans le menu Firefox. Comme Web Development Helper, Firebug est utilisé directement dans le navigateur, bien qu’il puisse également être utilisé en tant qu’application autonome.
Une fois Firebug en cours d’exécution, les points d’arrêt peuvent être définis sur n’importe quelle ligne d’un fichier JavaScript, que le script soit incorporé ou non dans une page. Pour définir un point d’arrêt, commencez par charger la page appropriée que vous souhaitez déboguer dans Firefox. Une fois la page chargée, sélectionnez le script à déboguer dans la liste déroulante Scripts de Firebug. Tous les scripts utilisés par la page s’affichent. Un point d’arrêt est défini en cliquant dans la zone de la barre d’état grise de Firebug sur la ligne où le point d’arrêt doit se rendre comme vous le feriez dans Visual Studio 2008.
Une fois qu’un point d’arrêt a été défini dans Firebug, vous pouvez effectuer l’action requise pour exécuter le script qui doit être débogué, par exemple cliquer sur un bouton ou actualiser le navigateur pour déclencher l’événement onLoad. L’exécution s’arrête automatiquement sur la ligne contenant le point d’arrêt. La figure 9 montre un exemple de point d’arrêt qui a été déclenché dans Firebug.
Figure 9 : Gestion des points d’arrêt dans Firebug. (Cliquez pour afficher l’image en taille réelle)
Une fois qu’un point d’arrêt est atteint, vous pouvez entrer, passer à pas ou sortir du code à l’aide des boutons de direction. À mesure que vous parcourez le code, les variables de script s’affichent dans la partie droite du débogueur, ce qui vous permet de voir les valeurs et d’explorer les objets. Firebug inclut également une liste déroulante Pile des appels pour afficher les étapes d’exécution du script qui ont conduit à la ligne actuelle en cours de débogage.
Firebug inclut également une fenêtre de console qui peut être utilisée pour tester différentes instructions de script, évaluer des variables et afficher la sortie de trace. Vous pouvez y accéder en cliquant sur l’onglet Console en haut de la fenêtre Firebug. La page en cours de débogage peut également être « inspectée » pour afficher sa structure dom et son contenu en cliquant sur l’onglet Inspecter. Lorsque vous passez la souris sur les différents éléments DOM affichés dans la fenêtre de l’inspecteur, la partie appropriée de la page est mise en surbrillance, ce qui permet de voir facilement où l’élément est utilisé dans la page. Les valeurs d’attribut associées à un élément donné peuvent être modifiées « en direct » pour expérimenter l’application de différentes largeurs, styles, etc. à un élément . Il s’agit d’une fonctionnalité intéressante qui vous évite d’avoir à basculer constamment entre l’éditeur de code source et le navigateur Firefox pour voir comment les modifications simples affectent une page.
La figure 10 montre un exemple d’utilisation de l’inspecteur DOM pour localiser une zone de texte nommée txtCountry dans la page. L’inspecteur Firebug peut également être utilisé pour afficher les styles CSS utilisés dans une page, ainsi que les événements qui se produisent tels que le suivi des mouvements de la souris, les clics de bouton, etc.
Figure 10 : Utilisation de l’inspecteur DOM de Firebug. (Cliquez pour afficher l’image en taille réelle)
Firebug offre un moyen léger de déboguer rapidement une page directement dans Firefox, ainsi qu’un excellent outil pour inspecter différents éléments de la page.
Prise en charge du débogage dans ASP.NET AJAX
La bibliothèque AJAX ASP.NET comprend de nombreuses classes différentes qui peuvent être utilisées pour simplifier le processus d’ajout de fonctionnalités AJAX à une page web. Vous pouvez utiliser ces classes pour localiser des éléments dans une page et les manipuler, ajouter de nouveaux contrôles, appeler des services web et même gérer des événements. La bibliothèque AJAX ASP.NET contient également des classes qui peuvent être utilisées pour améliorer le processus de débogage des pages. Dans cette section, vous allez découvrir la classe Sys.Debug et voir comment elle peut être utilisée dans les applications.
Utilisation de la classe Sys.Debug
La classe Sys.Debug (une classe JavaScript située dans l’espace de noms Sys) peut être utilisée pour effectuer plusieurs fonctions différentes, notamment l’écriture de la sortie de trace, l’exécution d’assertions de code et l’échec forcé du code afin qu’il puisse être débogué. Il est largement utilisé dans le ASP.NET fichiers de débogage de la bibliothèque AJAX (installé dans C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 par défaut) pour effectuer des tests conditionnels (appelés assertions) qui garantissent que les paramètres sont transmis correctement aux fonctions, que les objets contiennent les données attendues et pour écrire des instructions de trace.
La classe Sys.Debug expose plusieurs fonctions différentes qui peuvent être utilisées pour gérer le suivi, les assertions de code ou les échecs, comme indiqué dans le tableau 1.
Tableau 1. Fonctions de classe Sys.Debug.
| Nom de la fonction | Description |
|---|---|
| assert(condition, message, displayCaller) | Affirme que le paramètre de condition est true. Si la condition testée est false, une boîte de message est utilisée pour afficher la valeur du paramètre de message. Si le paramètre displayCaller a la valeur true, la méthode affiche également des informations sur l’appelant. |
| clearTrace() | Efface la sortie des instructions des opérations de suivi. |
| fail(message) | Provoque l’arrêt de l’exécution du programme et l’arrêt du débogueur. Le paramètre message peut être utilisé pour fournir une raison de l’échec. |
| trace(message) | Écrit le paramètre de message dans la sortie de trace. |
| traceDump(object, name) | Génère les données d’un objet dans un format lisible. Le paramètre name peut être utilisé pour fournir une étiquette pour le vidage de trace. Tous les sous-objets de l’objet en cours de vidage sont écrits par défaut. |
Le suivi côté client peut être utilisé de la même manière que la fonctionnalité de suivi disponible dans ASP.NET. Il permet à différents messages d’être facilement visibles sans interrompre le flux de l’application. La liste 5 montre un exemple d’utilisation de la fonction Sys.Debug.trace pour écrire dans le journal de suivi. Cette fonction accepte simplement le message qui doit être écrit en tant que paramètre.
Liste 5. Utilisation de la fonction Sys.Debug.trace.
function BuildPerson()
{
var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
UpdatePerson(person);
}
Si vous exécutez le code affiché dans la liste 5, vous ne verrez aucune sortie de trace dans la page. La seule façon de le voir est d’utiliser une fenêtre de console disponible dans Visual Studio .NET, Web Development Helper ou Firebug. Si vous souhaitez voir la sortie de trace dans la page, vous devez ajouter une balise TextArea et lui attribuer l’ID TraceConsole comme indiqué ci-dessous :
<textArea id="TraceConsole" rows="10" cols="50"></textArea>
Toutes les instructions Sys.Debug.trace dans la page sont écrites dans traceConsole TextArea.
Dans les cas où vous souhaitez voir les données contenues dans un objet JSON, vous pouvez utiliser la fonction traceDump de la classe Sys.Debug. Cette fonction prend deux paramètres, notamment l’objet qui doit être vidé dans la console de trace et un nom qui peut être utilisé pour identifier l’objet dans la sortie de trace. La liste 6 montre un exemple d’utilisation de la fonction traceDump.
Listing 6. Utilisation de la fonction Sys.Debug.traceDump.
function UpdatePerson(person)
{
//Dump contents of the person object to the trace output
Sys.Debug.traceDump(person,"Person Data");
alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}
La figure 11 montre la sortie de l’appel de la fonction Sys.Debug.traceDump. Notez qu’en plus d’écrire les données de l’objet Person, il écrit également les données du sous-objet Address.
En plus du suivi, la classe Sys.Debug peut également être utilisée pour effectuer des assertions de code. Les assertions sont utilisées pour tester que des conditions spécifiques sont remplies pendant l’exécution d’une application. La version de débogage des scripts de bibliothèque ASP.NET AJAX contient plusieurs instructions d’assertion pour tester diverses conditions.
La liste 7 montre un exemple d’utilisation de la fonction Sys.Debug.assert pour tester une condition. Le code teste si l’objet Address est null avant de mettre à jour un objet Person.
Figure 11 : Sortie de la fonction Sys.Debug.traceDump. (Cliquez pour afficher l’image en taille réelle)
Référencement 7. Utilisation de la fonction debug.assert.
function UpdatePerson(person)
{
//Check if address is null
Sys.Debug.assert(person.get_address() == null,"Address is null!",true);
alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}
Trois paramètres sont passés, y compris la condition à évaluer, le message à afficher si l’assertion retourne false et si les informations sur l’appelant doivent être affichées ou non. En cas d’échec d’une assertion, le message s’affiche, ainsi que les informations de l’appelant si le troisième paramètre a la valeur true. La figure 12 montre un exemple de boîte de dialogue d’échec qui s’affiche si l’assertion affichée dans la liste 7 échoue.
La dernière fonction à couvrir est Sys.Debug.fail. Lorsque vous souhaitez forcer l’échec du code sur une ligne particulière d’un script, vous pouvez ajouter un appel Sys.Debug.fail plutôt que l’instruction de débogueur généralement utilisée dans les applications JavaScript. La fonction Sys.Debug.fail accepte un paramètre de chaîne unique qui représente la raison de l’échec, comme indiqué ci-dessous :
Sys.Debug.fail("My forced failure of script.");
Figure 12 : Message d’échec Sys.Debug.assert. (Cliquez pour afficher l’image en taille réelle)
Lorsqu’une instruction Sys.Debug.fail est rencontrée pendant l’exécution d’un script, la valeur du paramètre message s’affiche dans la console d’une application de débogage telle que Visual Studio 2008 et vous êtes invité à déboguer l’application. Cela peut être très utile lorsque vous ne pouvez pas définir un point d’arrêt avec Visual Studio 2008 sur un script inline, mais que vous souhaitez que le code s’arrête sur une ligne particulière afin que vous puissiez inspecter la valeur des variables.
Présentation de la propriété ScriptMode du contrôle ScriptManager
La bibliothèque AJAX ASP.NET inclut des versions de script de débogage et de mise en production installées dans C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 par défaut. Les scripts de débogage sont bien mis en forme, faciles à lire et ont plusieurs appels Sys.Debug.assert éparpillés tandis que les scripts de mise en production ont des espaces blancs supprimés et utilisent la classe Sys.Debug avec parcimonie pour réduire leur taille globale.
Le contrôle ScriptManager ajouté à ASP.NET pages AJAX lit l’attribut de débogage de l’élément de compilation dans web.config pour déterminer les versions des scripts de bibliothèque à charger. Toutefois, vous pouvez contrôler si des scripts de débogage ou de mise en production sont chargés (scripts de bibliothèque ou vos propres scripts personnalisés) en modifiant la propriété ScriptMode. ScriptMode accepte une énumération ScriptMode dont les membres incluent Auto, Debug, Release et Inherit.
Par défaut, ScriptMode a la valeur Auto, ce qui signifie que ScriptManager case activée l’attribut de débogage dans web.config. Lorsque le débogage a la valeur false, ScriptManager charge la version release de ASP.NET scripts de bibliothèque AJAX. Lorsque debug a la valeur true, la version de débogage des scripts est chargée. La modification de la propriété ScriptMode sur Release ou Debug forcera scriptManager à charger les scripts appropriés, quelle que soit la valeur de l’attribut de débogage dans web.config. La liste 8 montre un exemple d’utilisation du contrôle ScriptManager pour charger des scripts de débogage à partir de la bibliothèque AJAX ASP.NET.
Liste 8. Chargement des scripts de débogage à l’aide du ScriptManager.
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>
Vous pouvez également charger différentes versions (débogage ou mise en production) de vos propres scripts personnalisés à l’aide de la propriété Scripts de ScriptManager avec le composant ScriptReference, comme indiqué dans la description 9.
Liste 9. Chargement de scripts personnalisés à l’aide de ScriptManager.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
</Scripts>
</asp:ScriptManager>
Notes
Si vous chargez des scripts personnalisés à l’aide du composant ScriptReference, vous devez informer scriptManager lorsque le script est terminé de charger en ajoutant le code suivant au bas du script :
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
Le code affiché dans la liste 9 indique à ScriptManager de rechercher une version de débogage du script Person afin qu’il recherche automatiquement Person.debug.js au lieu de Person.js. Si le fichier Person.debug.js est introuvable, une erreur est générée.
Si vous souhaitez charger une version de débogage ou de mise en production d’un script personnalisé en fonction de la valeur de la propriété ScriptMode définie sur le contrôle ScriptManager, vous pouvez définir la propriété ScriptMode du contrôle ScriptReference sur Hériter. Cela entraîne le chargement de la version appropriée du script personnalisé en fonction de la propriété ScriptMode de ScriptManager, comme indiqué dans la liste 10. Étant donné que la propriété ScriptMode du contrôle ScriptManager est définie sur Debug, le script Person.debug.js est chargé et utilisé dans la page.
Liste 10. Hériter du ScriptMode du ScriptManager pour les scripts personnalisés.
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
</Scripts>
</asp:ScriptManager>
En utilisant correctement la propriété ScriptMode, vous pouvez déboguer plus facilement des applications et simplifier le processus global. Les scripts de publication de la bibliothèque AJAX ASP.NET sont plutôt difficiles à parcourir et à lire, car la mise en forme du code a été supprimée alors que les scripts de débogage sont mis en forme spécifiquement à des fins de débogage.
Conclusion
La technologie AJAX ASP.NET de Microsoft fournit une base solide pour la création d’applications ajax qui peuvent améliorer l’expérience globale de l’utilisateur final. Toutefois, comme pour toute technologie de programmation, des bogues et d’autres problèmes d’application se poseront certainement. Connaître les différentes options de débogage disponibles peut faire gagner beaucoup de temps et aboutir à un produit plus stable.
Dans cet article, vous avez découvert plusieurs techniques de débogage ASP.NET pages AJAX, notamment Internet Explorer avec Visual Studio 2008, Web Development Helper et Firebug. Ces outils peuvent simplifier le processus de débogage global, car vous pouvez accéder aux données variables, parcourir le code ligne par ligne et afficher les instructions de trace. En plus des différents outils de débogage abordés, vous avez également vu comment la classe Sys.Debug de la bibliothèque AJAX ASP.NET peut être utilisée dans une application et comment la classe ScriptManager peut être utilisée pour charger des versions de débogage ou de publication de scripts.
Bio
Dan Wahlin (Microsoft Most Valuable Professional for ASP.NET and XML Web Services) est formateur en développement .NET et consultant en architecture à Interface Technical Training (www.interfacett.com). Dan a fondé le site web XML for ASP.NET Developers (www.XMLforASP.NET), fait partie du Bureau des conférenciers de l’INETA et intervient lors de plusieurs conférences. Dan a co-écrit Professional Windows DNA (Wrox), ASP.NET: Tips, Tutorials and Code (Sams), ASP.NET 1.1 Insider Solutions, Professional ASP.NET 2.0 AJAX (Wrox), ASP.NET 2.0 MVP Hacks et xml créé pour les développeurs ASP.NET (Sams). Quand il n’écrit pas de code, d’articles ou de livres, Dan aime écrire et enregistrer de la musique et jouer au golf et au basket-ball avec sa femme et ses enfants.
Scott Cate travaille avec les technologies Web Microsoft depuis 1997 et est président de myKB.com (www.myKB.com) où il se spécialise dans la rédaction d’applications ASP.NET basées sur des solutions logicielles de base de connaissances. Scott peut être contacté par e-mail à l’adresse scott.cate@myKB.com ou son blog à ScottCate.com