Vue d'ensemble du débogage et du traçage des applications AJAX

Article
10/22/2014

Mise à jour : novembre 2007

Les applications ASP.NET AJAX contiennent un mélange de code serveur et de code client. Le navigateur peut également demander de façon asynchrone des données supplémentaires. Ceci peut rendre le débogage des applications Web AJAX difficile. Cette vue d'ensemble discute de quelques techniques et outils qui peuvent vous aider à déboguer votre code plus facilement.

Remarque :
À l'exception de Visual Studio et d'Internet Explorer, les programmes mentionnés dans cette rubrique sont des outils tiers et ne sont pas pris en charge par Microsoft. Consultez le site Web de l'outil pour obtenir des informations sur les licences et le support technique.

Cette rubrique contient les sections suivantes :

Scénarios
Contexte
Référence de classe

Scénarios

Vous pouvez utiliser les approches suivantes pour déboguer une application ASP.NET AJAX lors des différentes étapes de développement :

activation du débogage dans le fichier de configuration ;
utilisation du traçage sur le serveur ;
utilisation des es méthodes de la classe Sys.Debug pour définir des points d'arrêt et gérer la sortie de trace ;
activation du débogage dans votre navigateur ;
attachement du débogueur Visual Studio 2008 à votre instance d'Internet Explorer, ou utilisation d'outils externes pour déboguer dans d'autres navigateurs ;
utilisation d'outils externes pour capturer le trafic HTTP.

Retour au début

Contexte

L'architecture ASP.NET AJAX fournit un modèle pour les modes release et debug. Le mode release offre une recherche des erreurs et une gestion des exceptions optimisées pour les performances, avec une taille de script réduite. Le mode debug fournit fonctionnalités de débogage plus importantes, telles que le contrôle de type et d'argument. Si vous créez des versions debug de fichiers de script client ou de ressources de script, ASP.NET exécute les versions debug lorsque l'application est en mode débogage. Cela vous permet de lever des exceptions dans les scripts de débogage mais de garder la taille du code de la version release minimale.

Une classe d'assistance de débogage, Sys.Debug, fournit des méthodes pour afficher des objets de façon lisible à la fin d'une page Web. Elle affiche également les messages de trace, vous permet d'utiliser des assertions et vous permet l'arrêt de l'exécution dans le débogueur. Une API étendue de l'objet Error fournit des détails d'exception utiles avec une prise en charge des modes release et debug.

Les sections suivantes fournissent des détails à propos des techniques et outils que vous pouvez utiliser pour le débogage et le traçage.

Configuration de l'application pour le débogage

Pour activer le débogage, ajoutez un élément compilation dans le fichier Web.config à la racine du site, son attribut debug doit alors prendre la valeur true. Pour plus d'informations, consultez compilation, élément (Schéma des paramètres ASP.NET).

L'exemple suivant montre la section d'un fichier Web.config avec l'attribut debug paramétré pour le débogage.

<configuration>
  <system.web>
    <compilation debug="true">
      <!-- etc. -->
    </compilation>
  </system.web>
<configuration>

Lorsque le débogage est activé, ASP.NET utilise une version debug de Microsoft AJAX Library et des versions debug de vos fichiers de script client personnalisés, s'ils sont disponibles.

Passage de l'application du mode Debug au mode Release pour déploiement

Lorsque vous déployez une version release d'une application ASP.NET AJAX, affectez le mode release à l'application. Ceci permet de s'assurer que ASP.NET utilise la version release optimisée des bibliothèques AJAX. Si vous avez créé des versions debug et release de vos fichiers et ressources de script personnalisés, ASP.NET utilise également les versions release. Pour affecter le mode release à l'application, procédez comme suit.

Dans le fichier Web.config, si l'élément compilation contient un attribut debug, veillez à ce que l'attribut debug ait la valeur false.
Assurez-vous que toute page Web qui contient un contrôle ScriptManager a sa propriété ScriptMode définie à Release.

L'attribut de debug de la directive @ Page n'affecte les applications ASP.NET AJAX. Le contrôle ScriptManager se sert uniquement des paramètres du fichier Web.config et dans ses propriétés IsDebuggingEnabled et ScriptMode pour déterminer s'il faut restituer des scripts de débogage.

Traçage sur le serveur

Si vous utilisez le traçage sur le serveur pour déboguer les pages Web ayant un rendu de page partiel activé, vous devez utiliser la visionneuse de traces (Trace.axd) pour afficher la sortie de trace. Vous pouvez ajouter la sortie de trace à la fin de la page, elle sera affichée la première fois que la page est restituée. Toutefois, l'affichage des traces n'est pas mis à jour lors des publications (postback) asynchrones, car seul le contenu des contrôles UpdatePanel sera actualisé. Pour plus d'informations sur l'utilisation de la visionneuse de trace, consultez Vue d'ensemble du traçage ASP.NET.

Remarque :
Le rendu de page partiel est activé lorsque la page contient un contrôle ScriptManager avec sa propriété EnablePartialRendering définie à true. La page doit également contenir un ou plusieurs contrôles UpdatePanel.

Classe d'assistance de débogage

ASP.NET fournit la classe Sys.Debug pour déboguer des applications clientes. En appelant les méthodes de la classe Sys.Debug, vous pouvez afficher des objets de façon lisible à la fin de la page, afficher des messages de trace, utiliser des assertions d'utilisation et arrêter l'exécution dans le débogueur.

Si vous utilisez Visual Studio et Internet Explorer, vous pouvez attacher le débogueur Visual Studio au navigateur et afficher les messages de trace du débogueur dans la fenêtre Sortie. Si vous n'utilisez pas Visual Studio, vous pouvez consulter les messages de trace du débogueur dans Internet Explorer en créant un élément textarea sur la page et en donnant à son ID la valeur TraceConsole. Dans Mozilla Firefox, vous pouvez consulter les messages de trace du débogueur en utilisant des outils qui sont disponibles comme extensions. Les navigateurs Apple Safari et Opera affichent des messages de trace dans leurs consoles de débogage respectives.

Le tableau suivant décrit les méthodes de la classe Sys.Debug.

Sys.Debug.assert (condition, message, displayCaller)
Vérifie une condition et si la condition est false, affiche un message et invite l'utilisateur à arrêter l'exécution dans le débogueur.
Sys.Debug.clearTrace()
Efface tous les messages de trace de l'élément TraceConsoletextarea.
Sys.Debug.traceDump(objet, nom)
Effectue un dump de l'objet dans la console du débogueur et dans l'élément TraceConsoletextarea, s'il est disponible.
Sys.Debug.fail(message)
Affiche un message dans la fenêtre de sortie du débogueur et arrête l'exécution dans le débogueur.
Sys.Debug.trace(texte)
Ajoute une ligne de texte à la console du débogueur et à l'élément TraceConsoletextarea, s'il est disponible.

L'exemple de code suivant illustre la façon d'appeler les méthodes de la classe Sys.Debug :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

Configuration d'Internet Explorer pour le débogage

Par défaut, Internet Explorer ignore les problèmes qu'il rencontre dans JavaScript. Vous pouvez activer le débogage en utilisant la procédure suivante.

Pour activer le débogage dans Internet Explorer

Dans le menu Outils, cliquez sur Options Internet.
Sous l'onglet Avancés, désactivez les cases à cocher Désactiver le débogage des scripts (Internet Explorer) et Désactiver le débogage des scripts (Autre).
Activez la case à cocher Afficher une notification de chaque erreur de script.
Pour désactiver les messages d'erreur « conviviaux », désactivez la case à cocher Afficher des messages d'erreur HTTP simplifiés.

Si le message d'erreur « convivial » est activé et si une réponse d'erreur HTTP 500 envoyée par le serveur est d'une longueur inférieure à 513 octets, Internet Explorer en masque le contenu. À la place des informations sur l'erreur, Internet Explorer affiche un message pour les utilisateurs finaux, pas pour les développeurs.

Attachement du débogueur Visual Studio à Internet Explorer

Pour déboguer le script client, vous devez attacher un débogueur à Internet Explorer. Dans Visual Studio, si vous lancez votre application pour déboguer (en appuyant sur F5 ou à l'aide de la commande Démarrer le débogage dans le menu Déboguer), le débogueur est automatiquement attaché.

Vous pouvez également attacher le débogueur Visual Studio à Internet Explorer lorsque l'application s'exécute déjà. Pour cela, dans le menu Déboguer, cliquez sur Attacher au processus.... Dans la boîte de dialogue Attacher au processus, sélectionnez l'instance d'Internet Explorer (iexplore.exe) à laquelle vous souhaitez attacher le débogueur.

Remarque :
Si Internet Explorer est configuré pour le débogage, la colonne Type de l'instance appropriée d'Internet Explorer indique Script, x86. Si vous voyez uniquement x86 dans la colonne Type, assurez-vous que cet instance d'Internet Explorer est configurée pour le débogage.

Si Internet Explorer rencontre une erreur de script et est configuré pour le débogage de script, mais n'est pas actuellement attaché à un débogueur, le navigateur vous invite à sélectionner un débogueur. Vous pouvez soit poursuivre sans déboguer soit attacher un débogueur et passer pas à pas dans le code.

Problèmes de débogage connus d'Internet Explorer et solutions

Lorsque vous déboguez des applications ASP.NET AJAX qui utilisent Internet Explorer, ayez à l'esprit les problèmes et solutions ci-après :

Après avoir attaché le débogueur Visual Studio à Internet Explorer, vous pouvez consulter la liste des scripts débogués dans la fenêtre Explorateur de scripts. (Pour afficher cette fenêtre, cliquez sur Fenêtres dans le menu Déboguer, puis cliquez sur Explorateur de scripts.) La bibliothèque cliente ASP.NET AJAX s'affichera en tant que ressource commençant par ScriptResource.axd?..., générée dynamiquement par le serveur à partir de l'assembly ASP.NET AJAX. Un problème connu dans Visual Studio peut vous empêcher d'ouvrir le fichier. Si Visual Studio affiche un message d'erreur à cet effet, ou s'il ignore les clics sur le nom de fichier, fermez tous les fichiers de script ouverts. Vous pouvez ouvrir ensuite la page et sélectionner les fichiers de script que vous souhaitez déboguer.
Vous ne pouvez pas définir de points d'arrêt dans le code JavaScript à l'intérieur des éléments script dans une page ASP.NET tant que débogueur n'est pas passé pas à pas dans le code JavaScript de cette page. Pour contourner ce problème, définissez le point d'arrêt sur la fonction d'où provient l'appel puis passez en pas à pas dans le code de cette page Web ASP.NET. Après vous être arrêté sur une ligne de code JavaScript de la page, vous pouvez définir des points d'arrêt de façon habituelle. Une autre méthode pour que le débogueur reconnaisse les scripts d'une page ASP.NET est de créer une méthode dans le fichier de la page ASP.NET qui appelle la méthode Sys.Debug.fail. Lorsque vous appelez cette méthode, le débogueur arrêtera sur l'appel de Sys.Debug.fail et vous permettra de définir des points d'arrêt ailleurs. Une troisième alternative est de mettre tout votre code dans des fichiers JavaScript externes.
Visual Studio vous permet de définir des points d'arrêt sur la première ligne d'une fonction JavaScript normale, mais pas sur la première ligne de méthodes anonymes, qu'ASP.NET utilise dans les bibliothèques AJAX. Si une méthode anonyme contient une seule ligne de code, ou si vous devez définir un point d'arrêt sur la première ligne d'une méthode anonyme, insérez une ligne de code factice. Vous pouvez alors définir le point d'arrêt sur la deuxième ligne de la méthode.

Problèmes connus de IIS 7.0

Lorsque vous exécutez des pages ASP.NET AJAX via IIS 7.0 sur Windows Vista et que le mode pipeline géré a la valeur Intégré, les scripts traités par la classe ScriptResourceHandler ne sont pas mis en cache. Cependant, les scripts sont mis en cache lorsque le Mode pipeline géré a la valeur Classique.

Pour plus d'informations sur le Mode pipeline géré de IIS 7.0, consultez Upgrading ASP.NET Applications to IIS 7.0: Differences between IIS 7.0 Integrated Mode and Classic Mode.

Capture du trafic HTTP

Lorsque vous développez des applications Web, il est souvent utile de surveiller le trafic HTTP entre le serveur et le client. Il existe un outil accomplissant cette tâche : Fiddler ; vous pouvez obtenir cet outil sur la page Fiddler PowerToy sur le site MSDN. Fiddler s'exécute comme un proxy qui enregistre tout le trafic HTTP. Il prend en charge Internet Explorer ainsi que d'autres navigateurs. En utilisant Fiddler, vous pouvez examiner chaque requête et chaque réponse, comportant des en-têtes, des cookies et des contenus de message.

Débogage dans Mozilla Firefox

Mozilla Firefox n'est pas intégré avec le débogueur Visual Studio. En conséquence, vous ne pouvez pas utiliser le débogueur Visual Studio pour faire défiler pas à pas du code client qui s'exécute dans Firefox. Toutefois, Firefox prend en charge certaines fonctionnalités de débogage, telles qu'une console JavaScript. Vous pouvez également installer les extensions suivantes, disponibles depuis Mozilla, pour améliorer vos fonctions de débogage :

FireBug vous permet d'exécuter pas à pas un script client et d'examiner des éléments DOM HTML. Il fournit également une console de script, une ligne de commande et d'autres outils.
Le débogueur JavaScript (connu sous le nom de « Venkman ») offre un environnement de débogage JavaScript comprenant un navigateur de code source et bien d'autres fonctionnalités.
L'extension Web Developer vous permet d'inspecter le DOM et les styles CSS.

Fiddler fonctionne également avec Firefox. Toutefois, vous devez configurer Firefox pour router les requêtes HTTP via le proxy qui s'exécute sur port 8888 sur l'ordinateur local. Pour plus d'informations, consultez la page « Configuring Clients » sur le site Web de Fiddler.

Retour au début

Référence de classe

Sys.Debug, classe
Fournit des méthodes qui définissent des points d'arrêt et gèrent la sortie de trace.

Retour au début

Voir aussi

Tâches

Vue d'ensemble de la localisation de ressources pour les bibliothèques de composants

Concepts

Vue d'ensemble d'ASP.NET AJAX

Ajout de fonctionnalités AJAX et clientes

Vue d'ensemble du débogage et du traçage des applications AJAX

Scénarios

Contexte

Configuration de l'application pour le débogage

Passage de l'application du mode Debug au mode Release pour déploiement

Traçage sur le serveur

Classe d'assistance de débogage

Configuration d'Internet Explorer pour le débogage

Pour activer le débogage dans Internet Explorer

Attachement du débogueur Visual Studio à Internet Explorer

Problèmes de débogage connus d'Internet Explorer et solutions

Problèmes connus de IIS 7.0

Capture du trafic HTTP

Débogage dans Mozilla Firefox

Référence de classe

Voir aussi

Tâches

Concepts

Ressources supplémentaires