Comprendre les possibilités de débogage de ASP.NET AJAX

Cet article est la traduction la plus fidèle possible de l'article original: Understanding ASP.NET AJAX Debugging Capabilities

La capactité de déboguer est un atout que chaque développeur devrait posséder, quelle que soit la technologie utilisée. Il va sans dire que comprendre les différentes options de débogage à disposition peut faire gagner énormément de temps sur un projet et même nous éviter quelques maux de tête. Alors que la plupart des développeurs sont habitués à utiliser Visual Studio .NET ou Web Developer Express pour déboguer le code VB.NET ou C# des applications ASP.NET, certains ne sont pas au courant que ces outils sont également extrémement utiles pour déboguer le code côté client tel que le javascript. Les mêmes genres de techniques utilisées pour déboguer les applications ASP.NET peuvent être également appliquées aux applications AJAX-enabled, et plus spécialement aux applications ASP.NET AJAX.

Dans cet article, nous allons voir comment Visual Studio 2008 et plusieurs autres outils peuvent être utilisés pour déboguer des applications ASP.NET AJAX. Cet article abordera les sujets suivants: configuer Internet Explorer 6.0 et versions supérieures pour le débogage, utiliser Visual Studio 2008 et l'explorateur de scripts pour parcourir le code aussi facilement qu'avec d'autres outils comme Web Development Helper. Vous apprendrez également à déboguer des applications ASP.NET AJAX dans Firefox en utilisant une extension appelée Firebug qui vous permet de parcourir le code Javacript directement dans le navigateur. Pour finir, je vous présenterai des classes de la librairie ASP.NET AJAX qui peuvent vous aider via plusieurs tâches de débogage comme la trace ou les instructions Assert.

Avant de pouvoir déboguer des pages avec Internet Explorer, il y a quelques étapes à franchir. Jetons-y un oeil.

La plupart des personnes ne souhaitent pas voir les erreurs Javascript lorsqu'ils naviguent sur un site avec Internet Explorer. En fait, l'utilisateur lambda ne serait même pas quoi faire s'il voyait un message d'erreur. C'est pourquoi, par défaut, les options de débogage sont désactivées dans le navigateur. Cependant, il est très simple d'activer le débogage et de s'en servir pendant le développement de nouvelles applications AJAX.

Pour activer les fonctionnalités de débogage, allez dans le menu Outils > Option Internet et sélectionnez l'onglet Avancé. Dans la section Navigation, assurez vous que les éléments suivants ne sont pas cochés:
- Désactiver le débogage des scripts (Internet Explorer)
- Désactiver le débogage des scripts (autres applications)

Bien que cela ne soit pas nécessaire, si vous êtes en train de déboguer une application, vous aurez probablement envie que n'importe quelle erreur Javascript dans la page soit immédiatement visible, et de manière évidente. Vous pouvez forcer chaque erreur à être affichée dans une boite de dialogue en cochant l'élément Afficher une notification de chaque erreur de script. Bien que cela soit une option intéressante lorsque vous développez une application, cela peut très vite devenir contraignant lorsque que vous naviguez sur d'autres sites, surtout que vos chances de rencontrer des erreurs Javascript sont loin d'être nulles.
La figure 1 montre à quoi devrait ressembler l'onglet Avancé une fois les fonctionnalités de débogage activées.

Une fois le débogage activé, vous verrez un nouvel élément, nommé Débogueur de script, apparaître dans le menu Affichage. Il a 2 sous-menus: Ouvrir et Arrêter à la prochaine instruction. En sélectionnant Ouvrir, vous serez invité à déboguer la page dans Visual Studio 2008 (ou Visual Web Develop Express). Si un Visual Studio est actuellement ouvert sur votre poste, vous pouvez choisir entre utiliser cette instance ou en créer une nouvelle. En sélectionnant Arrêter à la prochaine instruction, vous serez invité à déboguer la page quand le code Javascript sera exécuté. Si le code Javascript est exécuté dans l'événement onLoad de la page, vous pouvez rafraichir la page pour déclencher une session de debug. Si le code Javascript est exécuté lors d'un clic sur un bouton alors un clic sur ce bouton déclenchera l'ouverture de débogueur.

Si vous êtes sous Windows Vista avec l'UAC activé, et si Visual Studio 2008 est exécuté en tant qu'administrateur, alors Visual Studio ne pourra pas attacher le processus au moment venu. Pour contourner ce problème, démarrer d'abord Visual Studio puis utiliser cette instance pour déboguer.

Bien que la prochaine section vous montrera comment déboguer une page ASP.NET AJAX directement depuis Visual Studio 2008, utiliser l'option Script Debugger de Internet Explorer est utile quand une page est déjà ouverte et que vous aimeriez l'inspecter plus profondément.

Visual Studio 2008 fournit des fonctionnalités de débogage sur lesquelles chaque développeur compte chaque jour pour déboguer les applications .NET. Le déboguer incorporé vous permet de parcourir le code pas à pas, de visualiser les données des objets, de surveiller des variables spécifiques, de monitorer les appels à la pile, et bien plus encore. En plus de déboguer le code C# ou VB.NET, le débogueur est aussi utile pour déboguer les applications ASP.NET AJAX et vous permet de parcourir pas à pas le code Javascript. Les paragraphes suivants se focalisent sur les techniques qui peuvent être utilisées pour déboguer les scripts côté client plutôt que de fournir un long discours sur le processus de débogage des applications en utilisant Visual Studio 2008.

Le processus de débogage d'une page avec Visual Studio 2008 peut être démarré de différentes façons. Premièrement, vous pouvez utiliser le débogueur de script d'Internet Explorer mentionné dans la section précédente. Cela fonctionne parfaitement quand une page est déjà chargée dans le navigateur et que vous souhaitez la déboguer. Deuxièmement, vous pouvez faire un clic droit sur une page .aspx dans l'explorateur de solution et sélectionner Définir en tant que page de démarrage dans le menu. Si vous êtes habitués à déboguer des pages ASP.NET, alors vous avez surement déjà fait ça auparavent. Une fois la touche F5 pressée, la page peut être déboguée. Cependant, alors que vous pouvez généralement définir un point d'arrêt où que vous le souhaitez dans un code C# ou VB.NET, ce n'est pas toujours le cas dans un code Javascript comme nous le verrons par la suite.

Scripts embarqués contre scripts externes.

Le débogueur de Visual Studio 2008 traite différement un script embarqué dans la page et un script se trouvant dans un fichier externe. Avec des fichiers externes, vous pouvez ouvrir le fichier et définir un point d'arrêt sur n'importe quelle ligne. Les points d'arrêt peuvent être définis en cliquant dans la zone grise se trouvant à gauche de la fenêtre. Quand le Javascript est directement embarqué dans la page via le tag <script>, vous ne pouvez pas définir un point d'arrêt en cliquant dans la zone grise. Si vous essayez, vous obtiendrez un message "Ce n'est pas une position valide pour un point d'arrêt".

La solution est de déplacer le code dans un fichier .js externe et de le référencer en utilisant l'attribut src du tag <script>:

<script type="text/javascript" src="Scripts/YourScript.js"></script>

Que faire si déplacer le code dans un fichier externe n'est pas une option envisageable ou si cela demande plus de travail que ça ne le mérite? Alors que vous ne pouvez pas définir un point d'arrêt en utilisant l'éditeur, vous pouvez ajouter l'instruction debugger directement dans le code à l'endroit où vous souhaitez commencer le débogage. Vous pouvez également utiliser la classe Sys.Debug disponible dans la librairie ASP.NET AJAX pour forcer le débogage à démarrer. Vous en apprendrez d'avantage sur la classe Sys.Debug plus tard dans cet article.

Un exemple d'utilisation du mot clé debugger est disponible dans Listing 1. Cet exemple force le débogueur à marquer un arrêt juste avant l'appel à la fonction UpdatePerson.

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 debugger est atteinte, vous serez invité à déboguer la page en utilisant Visual Studio .NET et vous pourrez commencer à parcourir le code. En procédant ainsi, vous pourriez rencontrer un problème en accédant aux fichiers de script de la librairie ASP.NET AJAX utilisés dans la page, intéressons-nous donc à l'explorateur de scripts de Visual Studio .NET.

Une fois que la session de débogage est demarrée et que vous commencez à parcourir le code en utilisant la touche F11, vous pourriez rencontrer la fenêtre d'erreur montrée dans la figure 2, à moins que tous les fichiers utilisés dans la page soient ouverts et disponibles pour le débogage.

Cette fenêtre est affichée parce que Visual Studio .NET n'est pas sûr de savoir comment obtenir le code source des scripts référencés dans la page. Alors que ça peut être frustrant à première vue, il y a une solution simple. Une fois que vous avez démarré une session de débogage and défini un point d'arrêt, allez dans le menu Débogage > Fenêtres > Explorateur de scripts ou utilisez le raccourci Ctrl + Alt + N.

Si vous ne voyez pas l'élément Explorateur de scripts dans le menu, allez dans Outils > Personnaliser > Commandes. Localisez l'entrée Debug dans la section Catégories et sélectionnez la pour afficher toutes les commandes disponibles. Dans la liste des commandes, descendez jusqu'à Explorateur de scripts puis glissez cet élément dans le menu Débogage > Fenêtres mentionné plutôt. En faisant cela, le menu Explorateur de scripts sera disponible à chaque fois que vous exécuterez Visual Studio .NET.

L'explorateur de scripts peut être utilisé pour visualiser tous les scripts utilisés dans la page et les ouvrir dans l'éditeur de code. Une fois l'explorateur de scripts ouvert, double-cliquez sur la page .aspx actuellement déboguée pour l'ouvrir dans la fenêtre d'édition de code. Effectuez la même opération pour tous les scripts affichés dans l'explorateur de scripts. Une fois tous les scripts ouverts dans la fenêtre de code, vous pouvez presser la touche F11 (et utiliser les autres raccourcis de débogage) pour naviguer dans votre code. La figure 3 montre un exemple de l'explorateur de scripts. Il liste le fichier en train d'être débogué (Demo.aspx) ainsi que 2 scripts personnalisés et 2 scripts dynamiquement injectés dans la page par le ScriptManager d'ASP.NET AJAX.

Plusieurs autres fenêtres peuvent également être utilisées pour vous fournir des informations utiles pendant que vous naviguez dans le code de votre page. Par exemple, vous pouvez utiliser la fenêtre Variables locales pour voir la valeur des différentes variables utilisées dans la page, la fenêtre d'exécution pour évaluer des variables spécifiques ou des conditions et pour voir la sortie. Vous pouvez également utiliser la fenêtre de sortie pour voir le résultat des instructions de trace en utilisant la fonction Sys.Debug.trace (qui sera abordée plus tard dans l'article) ou la fonction Debug.writeln d'Internet Explorer.

Pendant que vous naviguez dans votre code en utilisant le débogueur, vous pouvez passer le curseur de la souris au-dessus des variables pour voir leur valeur actuelle. Occasionnelement, le débogueur de scripts ne montrera aucune valeur lorsque vous survolerez une variable Javascript. Pour voir la valeur, surlignez l'instruction ou la variable que vous essayez d'évaluer dans la fenêtre d'édition de code et survolez la avec la souris. Bien que cette technique ne fonctionne pas à chaque fois, la plupart du temps, vous serez capable de voir la valeur sans avoir à jeter un coup d'oeil dans d'autres fenêtres de débogage comme la fenêtre Variables locales.

Un tutoriel vidéo concernant certaines fonctionnalités abordées ici est disponible à l'adresse suivante: http://www.xmlforasp.net

Bien que Visual Studio 2008 et Visual Web Developper Express possèdent des outils de débogage performants, il existe une autre option plus légère: Web Development Helper. Nikhil Kothari de Microsoft (un des architectes clés de ASP.NET AJAX chez Microsoft) a développé cet excellent outil qui peut effectuer différentes tâches allant du simple débogage jusqu'à la visualisation des requêtes HTTP et des messages de réponse. Web Development Helper peut être téléchargé à l'adresse suivante: http://projects.nikhilk.net/Projects/WebDevHelper.aspx

Web Development Helper peut être directement utilisé dans Internet Explorer, ce qui le rend très pratique. Dans le menu Outils de Internet Explorer, sélectionnez l'élément Web Development Helper. L'outil s'ouvrira dans le bas du navigateur ce qui permet de ne pas quitter la fenêtre pour s'en servir. La figure 4 vous montre à quoi ressemble Web Development Helper en pleine action.

Web Development Helper n'est pas un outil qui vous permettra de faire du pas à pas dans le code comme le permet Visual Studio 2008. Cependant, il peut être utilisé pour visualiser les messages de trace, facilement évaluer les variables dans un script ou explorer les données d'un objet JSON. Il est aussi très utile pour visualiser les données échangées entre une page ASP.NET AJAX et le serveur.

Une fois que Web Development Helper est ouvert dans Internet Explorer, le débogage de script doit être activé en sélectionnant Enable Script Debugging depuis le menu Script de Web Development Helper, comme montré dans la figure 4. Cela permet à l'outil d'intercepter les erreurs qui se produisent dans la page. Cela permet également un accès facile aux messages de trace de la page. Pour visualiser les informations concernant la trace ou pour exécuter des commandes de script dans le but de tester différentes fonctions de la page, sélectionnez l'élément Show Script Console dans le menu Script de Web Development Helper. Cela vous donne accès à une fenêtre de commande et à une fenêtre d'exécution.

Visualiser la trace et les données d'un objet JSON

La fenêtre d'exécution peut être utilisée pour exécuter des commandes ou charger/sauvegarder des scripts qui sont utilisés pour tester différentes fonctions dans la page. La fenêtre de commande affiche les messages de trace ou de debogage envoyés par la page en cours de visualisation. Le listing 2 vous montre comment écrire un message de trace en utilisant la fonction Debug.writeln de Internet Explorer.

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 a la valeur "Doe", Web Development Helper va afficher le message "Person name: Doe" dans la fenêtre de commande (à condition que le débogage soit activé). Web Development Helper ajoute également un objet debugService de haut niveau dans les pages qui peut être utilisé pour écrire des messages de trace ou pour visualiser les données d'un objet JSON. Le listing 3 vous montre un exemple d'utilisation de la fonction trace de la classe debugService.

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); 
}

Un aspect intéressant de la classe debugService est que cela fonctionne même si le débogage n'a pas été activé dans Internet Explorer, ce qui permet un accès facile à la trace quand Web Development Helper est en cours d'utilisation. Quand l'outil n'est pas utilisé pour déboguer une page, les instructions de trace seront ignorées étant donné qu'un appel à la fonction window.debugService retournera false.

La classe debugService permet également de visualiser les données d'un objet JSON en utilisant la fenêtre inspection de Web Development Helper. Listing 4 crée un simple objet JSON qui contient les données d'une personne. Une fois l'objet créé, un appel à la fonction inspect de la classe debugService va permettre de visualiser l'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); 
}

Appeler la fonction GetPerson() dans la page ou dans la fenêtre d'exécution va résulter en l'apparition d'une fenêtre de dialogue Object Inspector comme le montre la figure 5. Les propriétés de l'objet peuvent être modifiées dynamiquement en les sélectionnant, en changeant leur valeur dans la zone de texte Value puis en cliquant sur le lien Update. Utiliser l'Object Inspector rend très simple la visualisation d'un objet JSON et ses différents comportements lorsqu'on modifie la valeur de ses propriétés.

Déboguer les erreurs

En plus de permettre la visualistion des messages de trace et des objets JSON, Web Development Helper peut aussi vous aider dans le débogage des erreurs qui surviennent dans une page. Si une erreur est rencontrée, vous serez invité à continuer jusqu'à la ligne suivante ou alors à déboguer le script (voir figure 6). La fenêtre de dialogue Script Error vous montre l'appel complet à la pile ainsi que le numéro des lignes mis en cause afin de vous permettre d'identifier rapidement où se trouvent les problèmes à l'intérieur du script.

Sélectionner l'option Debug vous permet d'exécuter directement les instructions de script dans la fenêtre d'exécution de Web Development Helper afin de visualiser la valeur des différentes variables, de visualiser les objets JSON et bien plus. Si la même action qui a engendré l'erreur est de nouveau déclenchée et si Visual Studio 2008 est disponible sur votre machine, vous serez alors invité à démarrer une session de débogage afin de parcourir pas à pas votre code comme vu dans la section précédente.

Inspecter les requêtes et les réponses

Lorsque vous déboguez une application ASP.NET AJAX, il est souvent utile de regarder les requêtes et les réponses qui transitent entre la page et le serveur. Voir le contenu des messages échangés entre la page et le serveur vous permet de voir si les bonnes données sont échangées ainsi que la taille des messages. Web Development Helper fournit un excellent logger de messages HTTP qui vous permet de voir les données sous forme de texte brut.

Pour voir les requêtes et réponses ASP.NET AJAX, le logger HTTP doit être activé en sélectionnant Enable HTTP Logging dans le menu HTTP de Web Develoment Helper. Une fois activé, tous les messages envoyés depuis la page pourront être visualisés dans le visualiseur de log HTTP qui est accessible en sélectionnant Show HTTP Logs dans le menu HTTP.

Bien que voir le texte brut contenu dans chaque requête/réponse est certainement très utile, il est souvent plus facile de visualiser les données sous une forme plus graphique. Une fois les logs HTTP activés et les messages loggés, les données du message peut être vues en double-cliquant sur le message dans le visualiseur de log HTTP. Cela vous permet de voir toutes les en-têtes associées associées au message ainsi que le contenu du message. La figure 7 vous montre un exemple d'une requête et d'une réponse visualisés via le visualiseur de log HTTP.

Le visualiseur de log HTTP parse automatiquement les objets JSON et les affiche sous forme d'un arbre, ce qui permet d'accéder rapidement aux différentes propriétés de l'objet. Quand un UpdatePanel est utilisé à l'intérieure d'une page ASP.NET AJAX, le visualiseur sépare chaque portion du message dans des parties individuelles comme montré figure 8. C'est une fonctionnalité qui simplifie la visualisation et la compréhension de ce que contient le message, comparé à la visualisation du message en texte brut.

Il y a plusieurs autres outils qui peuvent être utilisés pour visualiser les requêtes et réponses. Une bonne alternative est Fiddler qui est disponible gratuitement à l'adresse suivante: http://www.fiddlertool.com. Bien que Fiddler ne sera pas abordé ici, c'est également une bonne option quand vous avez besoin de visualiser les données et les en-têtes des messages.

Alors qu'Internet Explorer est encore le navigateur le plus utilisé au monde, d'autres navigateurs tels que Firefox deviennent populaires et de plus en plus utilisés. C'est pourquoi, vous voudrez pouvoir visualiser et déboguer vos pages ASP.NET AJAX dans Firefox de la même manière qu'avec Internet Explorer afin de vous assurer que tout fonctionne correctement. Bien que Firefox ne puisse pas être directement relié à Visual Studio 2008 pour déboguer, il existe une extension appelée Firebug qui peut être utilisée pour déboguer les pages. Firebug peut être téléchargé gratuitement à l'adresse suivante: http://www.getfirebug.com.

Firebug fournit un environnement de débogage riche en fonctionnalités qui peut être utilisé pour faire du pas à pas dans le code, accéder à tous les scripts présents dans la page, visualiser la structure DOM, afficher les styles CSS et même traquer les événements qui se produisent dans la page. Une fois installé, Firebug peut être accédé via le menu Outils de Firefox, puis Firebug > Ouvrir Firebug. Comme Web Development Helper, Firebug s'ouvre directement dans le navigateur, mais il peut également être lancé dans une fenêtre séparée.

Une fois que Firebug est lancé, des points d'arrêt peuvent être définis sur n'importe quelle ligne d'un fichier Javascript, que le script soit embarqué dans la page ou non. Pour définir un point d'arrêt, commencez par charger dans Firefox la page que vous souhaitez déboguer. Une fois la page chargée, sélectionnez le script à déboguer dans la liste déroulante des scripts de Firebug. Tous les scripts utilisés par la page seront affichés. Un point d'arrêt peut être défini en cliquant dans la barre grise de Firebug, sur la ligne où le point d'arrêt doit être défini, de la même façon qu'avec Visual Studio 2008.

Une fois le point d'arrêt défini, vous pouvez réaliser l'action nécessaire pour exécuter le script tel que cliquer sur un bouton ou recharger la page pour déclencher l'événement onLoad. L'exécution s'arrêtera automatiquement sur la ligne contenant le point d'arrêt. La figure 9 montre un exemple de point d'arrêt atteint dans Firebug.

Une fois qu'un point d'arrêt a été atteint, vous pouvez vous déplacer dans le code en utilisant les touches fléchées. En même temps que vous vous déplacez dans le code, les variables du script sont affichées dans la partie droite du débogueur, vous permettant de voir leur valeur et d'explorer les objets. Firebug contient également une liste déroulante des appels à la pile vous permettant de voir les étapes de l'exécution jusqu'à la ligne actuellement déboguée.

Firebug contient également une fenêtre console qui peut être utilisée pour tester différentes instructions de scripts, évaluer des variables et voir la sortie de la trace. Cette fenêtre est accessible en cliquant sur l'onglet Console en haut de la fenêtre de Firebug. La page en cours de débogage peut également être inspectée pour voir sa structure DOM et son contenu en cliquant sur l'onglet DOM. Lorsque vous survolez les éléments DOM affichés dans la fenêtre inspection, la partie correspondante dans la page est mise en évidence, ce qui permet de voir facilement où l'élément est utilisé dans la page. La valeur des attributs d'un élément peut être changée "en live" afin de voir immédiatement ce que cela implique. C'est une fonctionnalité très pratique qui vous permet d'économiser le temps habituellement passé à basculer entre l'éditeur de code source et Firefox pour voir comment les changements affectent la page.

La figure 10 vous montre un exemple d'utilisation de l'inspecteur DOM pour localiser dans la page une zone de texte appelée txtCountry. L'inspecteur de Firebug peut également être utilisé pour visualiser les styles CSS utilisés dans une page ainsi que les événements qui se produisent tels que le suivi du curseur, le clic sur un bouton ...

Firebug fournit une façon très simple de rapidement déboguer une page directement dans Firefox. C'est également un excellent outil pour inspecter les différents éléments d'une page.

La librairie ASP.NET AJAX contient plusieurs classes qui peuvent être utilisées pour vous simplifier l'ajout de fonctionnalités AJAX dans votre page. Vous pouvez utiliser ces classes pour localiser des éléments dans la page et les manipuler, ajouter des contrôles, appeler des WebServices et même gérer les événements. La librairie ASP.NET AJAX contient également des classes qui peuvent être utilisées pour améliorer le débogage des pages. Dans cette section, je vous présenterai la classe Sys.Debug et comment l'utiliser dans les applications.

Utiliser la classe Sys.Debug.

La classe Sys.Debug (une classe Javascript se trouvant dans le namespace Sys) peut être utilisée pour exécuter différentes fonctions telles que l'écriture de message de trace, l'exécution de code d'assertion ou forcer un code à échouer de façon à le déboguer. Elle est utilisée à de nombreuses reprises dans les fichiers de débogage de la libraire ASP.NET AJAX (installés par défaut dans C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 by default) pour exécuter des tests conditionnels qui permettent de s'assurer que les paramètres sont correctement passés aux fonctions, que les objets contiennent les données attendues ou pour écrire des instructions de trace.

La classe Sys.Debug expose plusieurs fonctions qui peuvent être utilisées pour gérer le traçage, l'exécution de code d'assertion ou les erreurs.

La trace côté client peut être utilisée de la même façon que la trace disponible avec ASP.NET. Elle permet de visualiser différents messages sans interrompre l'exécution de l'application. Le listing 5 montre comment utiliser la classe Sys.Debug pour écrire dans la trace. Cette fonction prend simplement en paramètre le message

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 du listing 5, vous ne verrez aucune sortie de trace dans la page. La seule façon de la 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 la trace dans la page, alors vous aurez besoin d'ajouter un élément TextArea avec comme id TraceConsole comme montré ci-dessous:

<textArea id="TraceConsole" rows="10" cols="50"></textArea>

N'importe quelle instruction Sys.Debug.trace présente dans la page écrira dans la TextArea TraceConsole.

Dans le cas où vous souhaiteriez voir les données d'un objet JSON, vous pouvez utiliser la fonction traceDump de la classe Sys.Debug. Cette fonction prend 2 paramètres: l'objet à afficher dans la console de trace et le nom utilisé pour identifier l'objet dans la sortie de la trace. Le listing 6 vous montre un exemple d'utilisation de la fonction 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 vous montre la sortie obtenue en appelant la fonction Sys.Debug.traceDump. Vous pouvez remarquer qu'en plus de lister les données de l'objet Person, on obtient également les données du sous-objet adresse.

En plus de tracer, la classe Sys.Debug peut également être utilisée pour exécuter du code d'assertion. Les assertions sont utilisées pour s'assurer que certaines conditions sont remplies quand une application est exécutée. La version de débogage des scripts de la librairie ASP.NET AJAX contient plusieurs instructions d'assertion pour tester une variété de conditions.

Le listing 7 vous montre un exemple d'utilisation de la fonction Sys.Debug.assert pour tester une condition.

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: la condition à évaluer, le message à afficher si l'assertion retourne false et s'il faut afficher ou non des informations sur l'appelant. Dans le cas où une assertion échoue, le message sera affiché, ainsi que les informations sur l'appelant si le 3ème paramètre est true. La figure 12 vous montre un exemple de fenêtre d'erreur qui apparait si l'assertion du Listing 7 échoue.

La dernière fonction à aborder est Sys.Debug.fail. Quand vous voulez forcer un code à échouer sur une ligne particulière d'un script, vous pouvez ajouter un appel à Sys.Debug.fail plutôt qu'une instruction debugger habituellement utilisée dans les applications Javascript. La fonction Sys.Debug.fail accepte un seul paramètre de type chaîne de caractères qui représente la raison de l'échec comme montré ci-dessous:

Sys.Debug.fail("My forced failure of script.");

Quand une instruction Sys.Debug.fail est rencontrée lors de l'exécution du script, la valeur du paramètre message sera affichée dans la console de l'application utilisée pour déboguer, comme Visual Studio 2008, et vous serez invité à déboguer l'application. Un cas où cela peut s'avérer utile est quand vous ne pouvez pas définir un point d'arrêt avec Visual Studio 2008 dans un script embarqué mais vous aimeriez que le code s'arrête sur une ligne précise de façon à pouvoir inspecter la valeur des variables.

Comprendre la propriété ScriptMode du controle ScriptManager

La librairie ASP.NET AJAX contient des versions debug et release qui sont installées par défaut dans le dossier C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0. La version debug est proprement formatée, facile à lire et a plusieurs appels à la fonction Sys.Debug.assert alors que la version release n'a aucun espaces blancs superflus et utilise avec modération la classe Sys.Debug afin de minimiser la taille du script.

Le controle ScriptManager ajouté aux pages ASP.NET AJAX lit la valeur de l'attribut debug de l'élément compilation dans le web.config afin de déterminer quelle version de la librairie charger. Cependant, vous pouvez controler si la version debug ou release des scripts est chargée en changeant la propriété ScriptMode. ScriptMode accepte une énumération ScriptMode dont les valeurs sont Auto, Debug, Release et Inherit.

La valeur par défaut de ScriptMode est Auto, ce qui signifie que le ScriptManager ira vérifier la valeur de l'attribut debug dans le web.config. Si debug est à false, le ScriptManager chargera la version release de la librairie ASP.NET AJAX. Si debug est à true, la version debug sera chargée. En passant la propriété ScriptMode à Release ou Debug, vous forcerez le ScriptManager à charger la version appropriée quelle que soit la valeur de l'attribut debug dans le web.config. Le listing 8 vous montre un exemple d'utilisation du controle ScriptManager pour charger la version debug de la libraire ASP.NET AJAX.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>

Vous pouvez également charger différentes versions (debug ou release) de vos propres scripts en utilisant la propriété Scripts du ScriptManager via l'élément ScriptReference comme montré ci-dessous

<asp:ScriptManager ID="ScriptManager1" runat="server">
	<Scripts>           
		<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>      
	</Scripts>
</asp:ScriptManager>

Note: si vous chargez vos propres scripts en utilisant l'élément ScriptReference, vous devez notifier le ScriptManager de la fin du chargement du script en ajoutant la ligne de code suivante à la fin du script:

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Le code du listing 9 indique au ScriptManager d'aller chercher une version debug du script Person, ainsi le ScriptManager ira automatiquement chercher le script Person.debug.js au lieu de Person.js. Si le fichier Person.debug.js n'est pas trouvé, une erreur se produira.

Dans le cas où vous souhaitez charger une version debug ou release d'un script personnalisé en se basant sur la valeur de la propriété ScriptMode du controle ScriptManaer, vous pouvez définir la propriété ScriptMode de l'élément ScriptReference à Inherit. Cela entrainera le chargement de la version appropriée du script personnalisé suivant la valeur de la propriété ScriptMode du controle ScriptManager, comme montré dans listing 10. Parce que la propriété ScriptMode est à Debug, le script Person.debug.js sera chargé et utilisé dans la page.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">      
	<Scripts>           
		<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>      
	</Scripts> 
</asp:ScriptManager>

En utilisant la propriété ScriptMode correctement, vous pouvez facilement déboguer vos applications et simplifier le processus. La version release de la librairie ASP.NET AJAX est plus difficile à lire étant donné que le formatage du code a été supprimé alors que la version debug est spécialement formatée pour faciliter le débogage.

La technologie Microsoft ASP.NET AJAX fournit de solides bases pour construire des applications AJAX-enabled qui améliorent l'expérience utilisateur. Cependant, comme avec n'importe quelle technologie, des bugs et autres problèmes vont certainement survenir. Connaitre les différentes options de débogage peuvent vous épargner d'importantes pertes de temps et permet d'avoir un produit plus stable.

Dans cet article, vous avez vu différents techniques pour déboguer les pages ASP.NET AJAX comme Internet Explorer couplé à Visual Studio, Web Development Helper et Firebug. Ces outils peuvent simplifier le processus de débogage en vous donnant accès aux variables, en vous permettant de vous déplacer pas à pas dans le code et en vous affichant la trace. En plus d'avoir vu différents outils de débogage, vous également vu comment utiliser la classe Sys.Debug dans vos applications et comment le ScriptManager peut être utilisé pour charger les versions debug ou release des scripts.