Comprendre les possibilités de débogage de ASP.NET AJAX
Date de publication : 29 avril 2009
Par
Pascal ROZE (Traduction) (Page perso) (Blog)
La capactité de déboguer est un atout que chaque développeur devrait posséder, quelle que soit la technologie utilisée.
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.
Traduction
Déboguer des applications ASP.NET AJAX
Configurer Internet Explorer pour le débogage
Déboguer avec Visual Studio
Utiliser les fenêtres de Visual Studio .NET pour déboguer
Déboguer avec Web Development Helper
Déboguer avec Firefox et Firebug
Déboguer avec ASP.NET AJAX
Conclusion
Traduction
Déboguer des applications ASP.NET AJAX
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.
Configurer Internet Explorer pour le débogage
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.

Figure 1: Configurer Internet Explorer pour activer le débogage
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.
Déboguer avec Visual Studio
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.
| Listing 1. Utilisation du mot clé debugger pour forcer le débogueur de Visual Studio .NET à marquer un arrêt. |
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.
Utiliser les fenêtres de Visual Studio .NET pour déboguer
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.

Figure 2. Fenêtre d'erreur affichée quand il n'y a pas de code source disponible 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.

Figure 3. L'explorateur de scripts fournit un accès simple aux scripts utilisés dans la page.
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
Déboguer avec Web Development Helper
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.

Figure 4: Web Development Helper.
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.
| Listing 2. Ecrire un message de trace côté client en utilisant 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 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.
| Listing 3. Utilisation de la classe debugService 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);
}
|
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
| Listing 4. Utiliser la fonction debugService.inspect pour visualiser un 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.

Figure 5. Utiliser la fenêtre Object Inspector pour visualiser un objet JSON.
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.

Figure 6. Fenêtre de dialogue Script Error de Web Development Helper.
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.

Figure 7. Utiliser le visualiseur de log HTTP pour visualiser les données d'une requête et d'une réponse.
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.

Figure 8. Une réponse d'un UpdatePanel au travers le visualiseur de log HTTP.
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.
Déboguer avec Firefox et Firebug
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.

Gérer les points d'arrêt avec 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 ...

Utiliser l'inspecteur DOM de Firebug
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.
Déboguer avec ASP.NET AJAX
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.
| Nom de la fonction |
Description |
| assert(condtion, message, displayCaller) |
Vérifie que le paramètre condition est true. Si ce n'est pas le
cas, une boite de message sera utilisée pour afficher le message passé en paramètre. Si le paramètre
displayCaller est true, la méthode affichera également des informations sur l'appelant. |
| clearTrace() |
Efface la trace |
| fail(message) |
Force le programme à stopper son exécution et à lancer le débogueur. Le paramètre message
peut être utilisé pour fournir une raison à l'erreur. |
|
trace(message) |
Ecrit le paramètre message dans la trace |
| traceDump(object, name) |
Ecrit les données de l'objet dans un format lisible. Le paramètre name peut être
utilisé pour fournir un nom à la trace. N'importe quel sous-objet de l'objet sera également rendu par défaut. |
Table 1. Les fonctions de la classe Sys.Debug
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
| Listing 5. Utiliser 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 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.
| 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 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.

Figure 11. Sortie de la fonction Sys.Debug.traceDump
| Listing 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: 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.");
|

Un message d'erreur de la fonction Sys.Debug.asser
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.
| Listing 8. Charger la version debug des scripts en utilisant le ScriptManager. |
<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
| Listing 9. Charger vos propres scripts en utilisant le ScriptManager. |
<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.
| Listing 10. Hériter de la valeur de la propriété 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 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.
Conclusion
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.


Copyright © 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite
de ce site et de l'ensemble de son contenu : textes, documents, images, etc.
sans l'autorisation expresse de l'auteur.
Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 €
de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.
Cette page est déposée.