Utilisation de la console Outils F12 pour afficher les erreurs et le statut

Ce contenu fait référence à une ancienne version des outils de développement F12. Consultez notre documentation la plus récente sur les outils F12.

La console Outils F12 vous permet de recevoir des messages d’erreur de Windows Internet Explorer 9 et de renvoyer vos propres messages depuis votre code sans interrompre le fil de votre processus d’exécution.

Vous pouvez utiliser l’affichage de la console d’outils F12 afin d’exécuter immédiatement des instructions de script hors du code de programme.

Onglet et affichage de la console

Les messages de la console d’outils F12 peuvent être affichés soit dans l’onglet Console, soit dans le volet de la console sous l’onglet Script. La console reçoit des messages de Windows Internet Explorer à l’ouverture, par exemple en cas d’erreur dans le code. Internet Explorer 9 peut envoyer un grand nombre de messages d’information et d’erreur à la console. Pour atteindre l’emplacement d’une erreur dans le code, cliquez sur l’information source affichée dans cette erreur. Si un message est généré lorsque la console d’outils F12 est fermée, un message d’avertissement s’affiche lors de la prochaine ouverture de la console d’outils F12. La capture d’écran suivante illustre la console d’outils F12.

Capture d’écran d’un code d’erreur envoyé par Internet Explorer dans le volet de console sous l’onglet Script

Vous pouvez également envoyer des messages de votre code à la console pour journaliser l’état, signaler des erreurs ou émettre des avertissements relatifs à des problèmes via l’objet console. Internet Explorer 9 fournit quatre types de message pour différencier les problèmes présents dans votre code : journalisation, avertissement, erreur et information. Ces messages peuvent être utilisés à la place de "window.alert()" lors du débogage, ou simplement afin de conserver un journal actif des états importants dans votre code. Les chaînes de messages peuvent contenir du texte, des variables, ou des résultats d’expressions, ou une combinaison de l’ensemble. La capture d’écran suivante illustre la console d’outils F12 avec l’affichage de plusieurs messages.

Capture d’écran des messages de console envoyés par le code de script utilisateur

Envoi de message du code vers la console

Les outils F12 offrent des commandes qui peuvent être utilisées dans votre code de script pour envoyer des messages, démarrer ou terminer le profilage, ou modifier la fenêtre d’évaluation des instructions de script saisies sur la console.

Vous utilisez l’objet console pour envoyer un message à la console à partir de votre code. L’utilisation de la console à la place de "window.alert()" lors des tests du code offre une plus grande discrétion et ne vous interrompt pas avec une boîte de dialogue modale. Cet objet fournit plusieurs éléments que vous pouvez séparer en messages d’information et messages d’erreur, si vous le souhaitez. Lorsque vous utilisez l’objet console, assurez-vous que la console d’outils F12 est ouverte. Pour éviter d’exécuter du code inutile, utilisez la fonctionnalité de test suivante :


if(window.console && window.console.clear)


Lorsque vous testez de nombreux objets Internet Explorer 9 sans parenthèses ni paramètres, ils retournent une valeur true si la fonctionnalité existe. Dans le cas présent, nous testons la fonctionnalité console.clear(). Vous pouvez également faire une vérification générique en testant simplement l’objet console :


if (window.console){
// Add console commands here.
}

window.console

Le tableau suivant illustre la syntaxe et des exemples de commandes de console pouvant être utilisés dans le script.

CommandeExempleDescription
log(message)window.console.log("Message d’enregistrement"); Affiche un "message" dans la console, précédé de « JRN : ».
warn(message)window.console.warn("Message d’avertissement");Affiche un "message" d’avertissement dans la console. Le message est précédé d’une icône d’avertissement Image de l’icône d’avertissement.
error(message)indow.console.error("Message d’erreur"); Affiche un "message" d’erreur dans la console. La couleur du texte du message est rouge et celui-ci est précédé d’une icône d’erreur Image de l’icône d’erreur.
info(message)window.console.info("Message d’information");Affiche un " message" d’information dans la console. Le message est précédé de l’icône d’information Image de l’icône d’information.
clear()window.console.clear();Efface les messages de la console. N’efface pas les messages d’erreur de script ou le code de script entré en ligne de commande de la console. Cliquez avec le bouton droit de la souris dans le volet Console et cliquez sur l’option Effacer la console pour effacer tous les messages.
dir(objet)window.console.dir(oExample);Affiche les propriétés de "objet" dans la console.
assert(expression, message)window.console.assert((x == 1), "assert message: x != 1");Affiche un "message" si "expression" a la valeur false.
profile(rapport)window.console.profile("Mon rapport de profil");Démarre l’enregistrement des informations de profil sous le titre "rapport". Cette commande équivaut à cliquer sur le bouton Démarrer le profilage sous l’onglet Profil.
profileEnd()window.console.profileEnd();Arrête l’enregistrement des informations de profil sous le dernier titre de rapport. Cette commande équivaut à cliquer sur le bouton Terminer le profilage sous l’onglet Profil. Le "Rapport" peut être affiché sous l’onglet Profil.

 

Les commandes de la console de messagerie peuvent être mises en forme à l’aide de séquences de substitution de type "printf". Par exemple, vous pouvez appeler "console.log" selon l’une des méthodes suivantes :


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


Les méthodes de messagerie de la console acceptent des paramètres optionnels pour vous permettre de remplacer les variables de votre message par des valeurs. Par exemple, une seule fonction peut signaler des erreurs et les afficher dans la console :

        function sendErrorConsole(errorCode) {
              window.console.error("Error: %s occured", errorCode);
          }

Exécution de script et de commandes dans la console

En bas de l’onglet Console, ou du volet Console de l’onglet Script, vous pouvez exécuter une ou plusieurs lignes de commandes de console ou d’instructions de script. Toutes les commandes ou expressions de script peuvent être exécutées dans la console.

Par exemple, pour afficher une valeur de variable, saisissez le nom dans la console et appuyez sur Entrée. Pour modifier la valeur d’une variable dans un script, tapez l’affectation dans la console. Cliquez sur la flèche haut pour atteindre la commande précédemment exécutée.

Affichage de la console avec une seule ligne de commande

Le volet Console de l’onglet Script peut être utilisé, que le débogueur soit démarré ou non. Lorsque l’exécution s’arrête sur un point d’arrêt, les commandes saisies dans ce volet sont exécutées dans la portée du point d’arrêt ; sauf pause dans l’exécution, les commandes sont exécutées dans la portée globale.

Utilisation de cd() pour exécuter des commandes dans des cadres

Par défaut, les instructions et les commandes de script sont exécutées dans le contexte de la fenêtre de premier niveau. Si vous utilisez des cadres, utilisez la commande "cd()" de la console.

cd()

cd(window)

Permet de modifier l’évaluation des expressions de ligne de commande de la fenêtre de premier niveau de la page Web par défaut vers la fenêtre d’un cadre. L’appel de cd() sans paramètres renvoie à la fenêtre de premier niveau.

 

L’illustration suivante montre plusieurs étapes exécutées dans l’exemple.

Capture d’écran de commande de console utilisant cd()

En partant du haut de l’affichage de la console, les commandes suivantes ont été exécutées :

  • cd() - Affiche la fenêtre active.
  • cd(myframe) - Modification de l’évaluation d’expression en exemple de cadre avec pour id « myframe ».
  • counter - Affiche une variable globale du cadre iframe appelée « counter ».
  • counter = 25 - Remplace la valeur du compteur par 25.
  • cd() - Rétablit l’évaluation d’expression dans la fenêtre de premier niveau par défaut.
  • counter - Dans ce cas, counter n’est pas une variable valide dans la fenêtre de premier niveau.

Vous pouvez passer en cadres iframe à l’aide d’un nom d’ID, ou de la collection frames[]. Dans ce cas, "document.frames[0]" fonctionne également.

Exécution de scripts à plusieurs lignes

Pour exécuter des commandes de script sur plusieurs lignes, cliquez sur le bouton du mode multiligne Image du bouton du mode multiligne ou appuyez sur Ctrl+Alt+M. Tapez script dans la fenêtre multiligne, puis cliquez sur le bouton Exécuter le script pour lancer ce dernier. Contrairement au mode ligne simple, qui exécute une seule ligne de script, l’appui sur Entrée insère un saut de ligne dans la fenêtre de script. La fenêtre d’entrée redimensionnable comporte des contrôles supplémentaires via le clic droit ou menu contextuel, par exemple copier et coller, ainsi que des fonctionnalités Unicode.

Affichage de la console avec un script de plusieurs lignes

Filtrage des messages et extension de l’objet console

Les messages de la console peuvent être filtrés dans le volet Console afin d’afficher ou de masquer certaines classes de messages. Pour filtrer les messages, cliquez avec le bouton droit de la souris dans le volet Console et pointez sur Filtre. Une liste des filtres disponibles s’affiche et le filtre actif est coché.

Image du menu de filtres de messages

Il est possible d’étendre l’objet console pour ajouter de nouvelles fonctionnalités. Par exemple, vous pouvez sélectionner une méthode personnalisée de sortie des messages de débogage formatés vers la console. Pour ajouter une commande "console.debug", vous pouvez ajouter les extraits de code suivants à votre code JavaScript :


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


Cet exemple utilise deux arguments et les envoie au volet Console avec un formatage minimal. Vous pouvez personnaliser les arguments et le comportement des fonctions si vous le souhaitez. De cette manière, l’objet console peut être utilisé pour ajouter un nombre illimité de commandes que vous estimez nécessaires.

Remarque  Étant donné que vous utilisez des commandes de console existantes dans votre nouvelle commande, l’option Filtre sera toujours appliquée. Par exemple, la commande console.debug de l’exemple précédent utilise console.warn pour envoyer des messages au volet Console. Si vous supprimez Avertissements de la console de la liste Filtre, aucun envoi de console.warn ne s’affichera dans le volet Console.

Rubriques connexes

Comment utiliser les outils de développement F12 pour déboguer vos pages Web
Codes d’erreur de la console d’outils F12

 

 

Afficher:
© 2014 Microsoft