Débogage de scripts avec les Outils de développement

Les Outils de développement d'Internet Explorer 8 comprennent un débogueur Microsoft JScript intégré qui permet aux développeurs de définir des points d'arrêt et d'examiner le code JScript côté client sans quitter le navigateur. Ce document présente les principales fonctionnalités de ce débogueur. Pour vous familiariser avec les autres fonctionnalités des Outils de développement Internet Explorer 8, consultez Découverte des Outils de développement Internet Explorer. Pour obtenir la liste complète des commandes de l'interface des Outils de développement, consultez Référence de l'interface utilisateur des Outils de développement (page éventuellement en anglais).

• Introduction
• Lancement du débogage
• Définition de points d'arrêt
• Contrôle de l'exécution
• Inspection des variables
• Inspection de la pile des appels
• Utilisation de la console pour l'exécution d'instructions de code
• Utilisation de la console pour l'enregistrement d'alertes et de messages d'erreur
• Remarques
• Voir aussi

Introduction

Le débogage JScript est un composant crucial des tâches de développement Web. Léger et intuitif, le débogueur JScript intégré aux Outils de développement d'Internet Explorer 8 simplifie toute la procédure de débogage en permettant aux développeurs qui ont installé Internet Explorer 8 de déboguer du code JScript sur n'importe quel site chargé dans Internet Explorer.

Pour ouvrir les Outils de développement dans Internet Explorer 8, appuyez sur F12 ou cliquez sur le bouton Outils de développement dans la barre de commandes Outils.

Remarque  Bien que le débogueur JScript puisse être utilisé pour déboguer n'importe quel moteur implémentant des interfaces IActiveScriptSite (par exemple Microsoft Visual Basic Scripting Edition (VBScript)), seul le débogage JScript est officiellement pris en charge.

Lancement du débogage

Figure 1. Interface utilisateur de l'onglet Script

Après avoir affiché l'onglet Script dans les Outils de développement, lancez le débogage en cliquant sur le bouton Démarrer le débogage ou en appuyant sur F5. Ce bouton déclenche les événements suivants :

• Une boîte de dialogue intitulée « Le débogage requiert l’actualisation de la page Web » s'affiche pour vous permettre d'actualiser la page. Si vous cliquez sur OK, le débogage démarre et la page est actualisée. Si vous cliquez sur Annuler, rien ne se produit.
• Si la fenêtre Outils de développement est attachée à l'instance d'Internet Explorer 8, elle s'en détache automatiquement lorsque le débogage commence. Vous pourrez ensuite la rattacher une fois le débogage terminé.

Pour arrêter le débogage, cliquez sur le bouton Arrêter le débogage ou appuyez sur MAJ+F5.

Remarque  La boîte de dialogue « Le débogage requiert l’actualisation de la page Web » ne s'affiche que si vous n'avez pas activé le débogage des scripts pour Internet Explorer. Lorsque vous cliquez sur OK dans cette boîte de dialogue, le débogage des scripts est temporairement activé pour cette instance d'Internet Explorer. Il est désactivé lorsque vous fermez la fenêtre. Pour activer le débogage des scripts pour toutes les instances d'Internet Explorer, sélectionnez Options Internet et cliquez sur l'onglet Avancé. Dans la catégorie Navigation, désactivez la case à cocher « Désactiver le débogage des scripts (Internet Explorer) » et cliquez sur OK. Pour que les modifications prennent effet, fermez tous les instances d'Internet Explorer et rouvrez-les.

Remarque  Que le débogage ait commencé ou non, la liste des scripts contient tous les scripts d'une page, qu'il s'agisse de fichiers distincts ou de blocs de scripts Inline. L'onglet Script vous permet de passer de l'un de ces fichiers à l'autre à tout moment. La source du fichier actuellement sélectionné apparaît dans le volet de contenu principal.

Définition de points d'arrêt

Vous pouvez définir des points d'arrêt à partir du volet de contenu principal dans lequel le code du script est affiché. Pour ce faire, effectuez l'une des opérations suivantes :

• Cliquez sur un numéro de ligne pour insérer ou supprimer un point d'arrêt.
• Cliquez avec le bouton droit sur une ligne de code et sélectionnez Insérer un point d'arrêt.
• Positionnez le curseur sur une ligne de code et appuyez sur F9 pour insérer ou supprimer un point d'arrêt.

Vous pouvez définir des points d'arrêt quel que soit l'état du débogueur (démarré ou arrêté). Lorsqu'un point d'arrêt est défini, l'icône s'affiche en regard du numéro de la ligne de code, et cette dernière est mise en surbrillance.

Les points d'arrêt suspendent l'exécution du script immédiatement avant la ligne sur laquelle ils ont été définis. Le débogueur met en surbrillance la ligne suivante qui doit être exécutée. Si une erreur d'exécution se produit pendant le débogage, le débogueur s'interrompt à l'emplacement correspondant. Pour éviter cela, désactivez le bouton Erreur de point d’arrêt ou appuyez sur CTRL+MAJ+E. Tant que l'exécution du débogueur est interrompue, le navigateur ne répond pas aux saisies utilisateur.

Figure 2. Définition et gestion de points d'arrêt

L'onglet Points d'arrêt du débogueur répertorie tous les points d'arrêt disponibles. Vous pouvez l'utiliser pour rechercher l'emplacement de tous les points d'arrêt, ainsi que le nom du fichier correspondant et le numéro de ligne où un point d'arrêt a été défini. Pour aller à l'emplacement du code source correspondant à un point d'arrêt, double-cliquez ce dernier dans la liste. Pour désactiver le point d'arrêt sans le supprimer, désactivez la case à cocher correspondante. Pour supprimer le point d'arrêt, cliquez dessus avec le bouton droit et sélectionnez Supprimer dans le menu contextuel. Internet Explorer conserve les informations relatives aux points d'arrêt jusqu'à ce que vous fermiez les Outils de développement, même si vous naviguez sur un autre site.

Remarque  Il arrive qu'un point d'arrêt ne soit plus valide ; cela peut se produire dans de nombreux scénarios. Lorsqu'un point d'arrêt n'est pas valide, il est désactivé et une icône d'avertissement s'affiche au-dessus de l'icône qui lui est associée. Un point d'arrêt n'est plus valide si vous accédez à un site autre que celui sur lequel il a été défini. Il peut également ne pas être valide si vous le définissez à un emplacement incorrect dans un mode autre que le mode débogage, si vous lancez le débogage à un emplacement où le débogueur ne trouve aucun code correspondant, ou si vous actualisez la page sur laquelle il a été défini alors que le code source a été modifié.

Lorsqu'un point d'arrêt est défini, l'exécution est suspendue par le système chaque fois qu'il rencontre ce point d'arrêt. Vous pouvez cependant définir une condition pour que l'exécution soit suspendue uniquement si cette condition est vraie. Pour définir une condition de point d'arrêt, procédez comme suit :

1. Cliquez avec le bouton droit sur le point d'arrêt dans le volet de contenu principal ou le volet Points d'arrêt. Un menu contextuel s'affiche.
2. Sélectionnez l'option Condition. Une boîte de dialogue s'affiche.
3. Dans la boîte de dialogue Point d'arrêt conditionnel, entrez la condition et cliquez sur OK.

L'exécution ne sera alors suspendue par le débogueur lorsqu'il rencontrera ce point d'arrêt que si la condition définie est vraie.

Contrôle de l'exécution

Les points d'arrêt sont utilisés pour suspendre l'exécution des scripts afin de vous permettre d'inspecter le code qui se trouve à cet emplacement. Lorsque l'exécution s'interrompt à un point d'arrêt, vous pouvez utiliser les boutons de commande suivants :

• Continuer

  Permet d'indiquer que le script doit continuer à s'exécuter jusqu'au prochain point d'arrêt, ou jusqu'à ce qu'une erreur de script soit rencontrée. Raccourci clavier : F5.

• Interrompre tout

  Permet de suspendre l'exécution immédiatement, avant l'exécution de l'instruction de script suivante. Cliquez sur le bouton ou appuyez sur CTRL+MAJ+B pour activer cette commande, puis exécutez les actions pour lesquelles vous souhaitez effectuer un débogage.

• Erreur de point d'arrêt

  Permet de suspendre l'exécution au point où l'erreur s'est produite. Cette commande est active par défaut. Si vous ne voulez pas que le débogueur suspende l'exécution lorsqu'il rencontre ces erreurs, cliquez sur ce bouton pour désactiver la commande. Que cette dernière soit activée ou non, un message d'erreur s'affichera dans la console pour chaque erreur rencontrée. Raccourci clavier à utiliser pour activer/désactiver la commande : CTRL+MAJ+E.

• Pas à pas détaillé

  Exécute la ligne suivante du script et suspend l'exécution, même si cette ligne est incluse dans une nouvelle méthode. Raccourci clavier : F11.

• Pas à pas principal

  Passe à la ligne de script suivante de la méthode active, puis suspend l'exécution. Cette option permet d'ignorer les appels de méthode. Raccourci clavier : F10.

• Pas à pas sortant

  Continue à exécuter le script jusqu'à la ligne suivante de la méthode ayant appelé la méthode active. Cette option est utile pour sortir des boucles et ne pas suivre les appels de méthode. Raccourci clavier : MAJ+F11.

Inspection des variables

Les volets Variables locales et Espion peuvent être utilisés pour inspecter toutes les variables. Pour inspecter des variables :

• Cliquez sur Démarrer le débogage pour lancer le débogueur.
• Définissez un ou plusieurs points d'arrêt dans le chemin d'exécution.
• Exécutez les scripts.

Pendant l'exécution, le débogueur s'interrompra au premier point d'arrêt rencontré. Une fois l'exécution suspendue, les variables affichées dans le volet Variables locales et dans le volet Espion peuvent être inspectées et modifiées.

Le volet Variables locales du débogueur affiche le nom, la valeur et le type de toutes les variables disponibles dans la portée d'exécution actuelle. Si une variable est hors portée, elle n'est pas disponible et n'apparaît pas dans le volet Variables locales. Vous pouvez cependant utiliser le volet Espion à tout moment pour contrôler les variables et les objets hors portée.

Vous pouvez contrôler des variables hors portée en les ajoutant à l'onglet Espion. Pour ce faire, vous pouvez utilisez différentes méthodes :

1. Dans le volet de contenu principal, sélectionnez un texte de script puis cliquez avec le bouton droit pour activer le menu contextuel. Cliquez ensuite sur Ajouter un espion. Le texte sélectionné est ajouté à la liste de suivi.
2. Dans le volet Variables locales, cliquez avec le bouton droit sur une variable ou un objet, puis cliquez sur Ajouter un espion pour l'ajouter à la liste de suivi.
3. Dans le volet Espion, sélectionnez Cliquez pour ajouter, puis tapez le nom de la variable à contrôler. Le texte « Cliquez pour ajouter » se trouve au bas de la liste de suivi. Il s'agit du dernier élément affiché dans la liste du volet Espion.

Figure 3. Inspection de variables dans le volet Variables locales.

Lorsque chaque ligne de code est exécutée, le débogueur actualise la valeur des variables dans les volets Variables locales et Espion. Les valeurs mises à jour sont affichées en rouge. Pour modifier la valeur d'une variable dans les volets Variables locales ou Espion, double-cliquez sur cette valeur, modifiez-la et appuyez sur ENTRÉE. Vous pouvez également cliquer avec le bouton droit sur l'objet, puis sélectionner Modifier la valeur et apporter les modifications voulues. Lorsque vous avez terminé, appuyez sur ENTRÉE pour valider ou sur Échap pour annuler la modification.

Inspection de la pile des appels

Le volet Pile d'appels fournit une liste de contextes d'exécution chaque fois que le débogueur suspend l'exécution à un point d'arrêt. Vous pouvez accéder directement à un élément inclus dans une pile en double-cliquant dessus. Le débogueur affiche la méthode correspondante dans le volet de contenu principal. Vous pouvez alors utiliser les volets Variables locales et Espion pour inspecter les variables dans ce contexte d'exécution.

Utilisation de la console pour l'exécution d'instructions de code

Le volet Console du débogueur permet d'exécuter des instructions de script instantanément. Tapez un nom de variable ou une instruction et appuyez sur ENTRÉE (ou cliquez sur Exécuter le script) pour exécuter cette instruction dans le contexte de la page active, à l'endroit où l'exécution est suspendue.

Pour définir les valeurs des variables, utilisez la syntaxe standard :

s = 'my query string';

Si vous cliquez sur le bouton Mode multiligne, la fenêtre de saisie est agrandie pour afficher plusieurs lignes d'entrée. Dans ce contexte, la touche ENTRÉE n'exécute pas le script mais crée une nouvelle ligne. Vous pouvez saisir plusieurs lignes de code et les exécuter en cliquant sur Exécuter le script. La fenêtre d'entrée peut être redimensionnée. Des commandes supplémentaires sont disponibles dans le menu contextuel.

Vous pouvez utiliser le volet Console à tout moment, même si le débogueur n'est pas en cours d'exécution. Lorsque l'exécution s'interrompt à un point d'arrêt, les commandes entrées dans ce volet s'exécutent uniquement dans la portée qui correspond à ce point d'arrêt. Si l'exécution n'est pas suspendue, les commandes s'exécutent dans la portée globale.

Utilisation de la console pour l'enregistrement d'alertes et de messages d'erreur

Une fois les Outils de développement ouverts, toutes les erreurs de script liées à une instance particulière d'Internet Explorer sont consignées dans le volet Console. Pour accéder à l'emplacement d'une erreur, cliquez sur les informations relatives à la source de l'erreur dans le message consigné.

Pour envoyer les messages à la console, vous pouvez également utiliser les API console.log. Au lieu d'utiliser window.alert(), qui provoque l'affichage d'un grand nombre de boîte de dialogue, vous pouvez appeler console.log et indiquer que les chaînes de sortie doivent être envoyées au volet Console. Pour différencier les messages, utilisez plusieurs API console.log. Par exemple :

• console.log
• console.info
• console.warn
• console.error
• console.assert

Ces commandes de console peuvent être appelées avec une liste d'arguments qui seront concaténés pour générer la chaîne de sortie. Ces arguments peuvent également être mis en forme à l'aide de modèles de substitution du même style que printf. Par exemple, vous pouvez appeler console.log de l'une des deux façons suivantes :

• console.log("Variable x = " + x + " et variable y = " + y)
• console.log("Variable x = ", x, " et variable y = ", y)
• console.log("Variable x = %d et variable y = %d", x, y)

Toutefois, le premier argument de la commande console.assert doit contenir une expression pouvant être évaluée comme étant vraie (true) ou fausse (false). Si le résultat de l'expression est vrai, le message d'assertion ne sera pas envoyé à la console. Dans le cas contraire, il sera dirigé vers la console. Par exemple :

var x = 1;
var y = 1;
//This expression evaluates to TRUE, so the message will not show up in the console
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);
//This expression will evaluates to FALSE so the message will show up in the console
y = 2;
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);

Le volet Console permet d'afficher et de masquer les messages de la console. Pour sélectionner les messages qui doivent être affichés ou masqués dans le volet Console, vous devez définir un filtre. Pour ce faire, cliquez avec le bouton droit dans le volet Console et pointez sur Filtre. La liste des filtres disponibles s'affiche. Le filtre actif est celui qui est coché.

Pour mieux répondre à vos besoins de développement, vous pouvez ajouter de nouvelles fonctionnalités à l'objet console. Par exemple, vous pouvez définir une méthode personnalisée permettant de diriger vos messages de débogage vers la console. Pour ajouter une commande console.debug, vous pouvez ajouter les extraits de code suivants à votre code JScript :

console.debug = function(name, value){
	console.warn("DEBUG: " + name + "==" + value);
}

L'exemple précédent reçoit deux arguments et les dirige vers le volet Console avec une mise en forme minimale. console.debug étant configurable, vous pouvez personnaliser les arguments et le comportement associés pour les adapter à vos besoins. De cette façon, l'objet console peut être utilisé pour ajouter toutes les nouvelles commandes dont vous pourriez avoir besoin.

Remarque  Étant donné que vous utilisez des commandes de console existantes dans une nouvelle commande, le filtre continue à être appliqué. Par exemple, la commande console.debug de l'exemple précédent utilise console.warn pour diriger les messages vers le volet Console. Si vous désactivez l'option Avertissements de la console dans la liste Filtre, la sortie générée par console.warn n'apparaîtra pas dans le volet Console.

Remarques

• Pour effacer tous les messages console.log, utilisez console.clear() dans votre code ou sur la ligne de commande de la console. console.clear() n'efface pas les messages d'erreur correspondant aux scripts, ni les codes entrés sur la ligne de commande.
• Pour vider le volet Console, cliquez dessus avec le bouton droit et sélectionnez Effacer la console. Tous les messages affichés dans le volet Console sont effacés.

Voir aussi

• Découverte des Outils de développement Internet Explorer
• Débogage de code HTML et CSS avec les Outils de développement
• Profilage de scripts avec les Outils de développement
• Référence de l'interface utilisateur des Outils de développement (page éventuellement en anglais)
• Référence des raccourcis clavier des Outils de développement (page éventuellement en anglais)