L'objetconsole permet d'accéder à la console de débogage de l'environnement JavaScript (par exemplela console web de Firefox). Son fonctionnement varie d'un navigateur à l'autre, mais certaines fonctionnalités sont standardisées et généralement fournies.

On peut accéder à l'objetconsole depuis n'importe quel objet global,Window pour les contextes de navigation classiques etWorkerGlobalScope dans lesworkers, grâce à la propriétéconsole. Exposé viaWindows.console, on peut y faire référence avecconsole. Par exemple :

console.log("Erreur à l'ouverture du lien indiqué.");

Dans cette page, nous verronsles méthodes disponibles sur l'objetconsole et donnerons quelquescas d'utilisation.

Méthodes statiques

console.assert()

Affiche un message dans la console si l'assertion passée comme premier argument est fausse.

console.clear()

Vide le contenu de la console.

console.count()

Affiche le nombre de fois que le compteur avec le libellé correspondant a été appelé.

console.countReset()

Réinitialise la valeur du compteur avec le libellé corredpondant.

console.debug()

Affiche un message de débogage dans la console.

console.dir()

Affiche une représentation hiérarchique d'un objet JavaScript. L'interface utilisateur permet de déplier l'arborescence pour examiner le contenu des objets enfants.

console.dirxml()

Affiche une représentation d'un objet XML/HTML fourni (ou la vue JavaScript équivalente deconsole.dir() par défaut).

console.error()

Affiche un message d'erreur. Ce message peut contenir deschaînes de caractères de substitution et d'autres valeurs fournies comme arguments complémentaires.

console.exception()Non standardObsolète

Un synonyme pourconsole.error().

console.group()

Crée un nouveaugroupe, indentant l'affichage des messages suivants. Pour revenir au niveau courant, on appelleraconsole.groupEnd().

console.groupCollapsed()

Crée un nouveaugroupe, indentant l'affichage des messages suivants. Toutefois, contrairement àconsole.group(), les messages du groupe sont repliés. Pour revenir au niveau courant, on appelleraconsole.groupEnd().

console.groupEnd()

Ferme legroupe courant.

console.info()

Affiche des informations dans la console. Ce message peut contenir deschaînes de caractères de substitution et d'autres valeurs fournies comme arguments complémentaires.

console.log()

Affiche des messages généraux dans la console. Ce message peut contenir deschaînes de caractères de substitution et d'autres valeurs fournies comme arguments complémentaires.

console.profile()Non standard

Démarre l'enregistrement d'un profil de performance. Un nom peut être fourni en argument et associé au profil ainsi créé.

console.profileEnd()Non standard

Arrête l'enregistrement du profil de performance.

console.table()

Affiche des données tabulaires sous forme d'un tableau.

console.time()

Démarre unchronomètre avec un nom fourni en paramètre.

console.timeEnd()

Arrête lechronomètre indiqué et affiche la durée écoulée (exprimée en millisecondes) depuis le début de la mesure.

console.timeLog()

Affiche la valeur duchronomètre indiqué dans la console.

console.timeStamp()Non standard

Ajoute un marqueur de performance pour l'outil de mesure des performances du navigateur (Firefox,Chrome).

console.trace()

Affiche latrace de la pile d'appels.

console.warn()

Affiche un message d'avertissement dans la console. Ce message peut contenir deschaînes de caractères de substitution et d'autres valeurs fournies comme arguments complémentaires.

Exemples

Afficher du texte dans la console

On utilise la plupart du temps la console pour journaliser du texte et d'autres données. Il existe plusieurs catégories de messages qu'on peut afficher grâce aux méthodesconsole.log(),console.info(),console.warn(),console.error(), etconsole.debug(). Les messages de chacune de ces méthodes seront affichés différemment et l'interface du navigateur vous permettra de les filtrer en fonction du niveau qui vous intéresse.

Chacune de ces méthodes peut être utilisée de deux façons : soit en passant une liste d'objet dont les représentations en texte seront concaténées sur une seule chaîne de caractères puis affichées, soit en passant une chaîne de caractères contenant plusieurs chaînes de substitution, suivie d'une liste d'objet pour ces substitutions.

Afficher un objet

Un usage simple consiste à afficher les informations d'un objet :

const unObjet = { str: "Du texte", id: 5 };console.log(unObjet);

Le résultat dans la console ressemblera à :

{str:"Du texte", id:5}

Afficher plusieurs objets

On peut aussi afficher les données de plusieurs objets :

const voiture = "Peugeot 404";const unObjet = { str: "Du texte", id: 5 };console.info(  "Ma première voiture était une ",  voiture,  ". L'objet est :",  unObjet,);

Dans la console, on verra le message suivant :

Ma première voiture était une Peugeot 404. L'objet est : {str:"Du texte", id:5}

Utiliser des chaînes de substitution

Lorsqu'on passe une chaîne de caractères à l'une des méthodes d'affichage deconsole (telle quelog()), on peut utiliser des chaînes de substitution :

%o ou%O

Permettra d'afficher un objet JavaScript. L'interface permettra de cliquer sur le nom de l'objet pour consulter plus d'informations dans l'inspecteur.

%d ou%i

Permettra d'afficher un entier. Le formatage numérique est pris en charge et on pourra par exemple écrireconsole.log("Toto %.2d", 1.1) qui indiquera qu'il faut écrire le nombre avec deux chiffres significatifs et un 0 devant :Toto 01.

%s

Permettra d'afficher une chaîne de caractères.

%f

Permettra d'afficher une valeur décimale. Le formatage numérique est pris en charge et on pourra par exemple écrireconsole.log("Toto %.2f", 1.1) pour avoir deux chiffres décimaux :Toto 1.10.

Chaque chaîne de substitution est associé au paramètre correspondant dans la liste (la première chaîne avec le deuxième paramètre, la deuxième chaîne avec le troisième paramètre, et ainsi de suite).

for (let i = 0; i < 5; i++) {  console.log("Coucou, %s. Vous m'avez appelé %d fois.", "Olivier", i + 1);}

Avec le fragment de code précédent, le résultat sera :

Coucou, Olivier. Vous m'avez appelé 1 fois.Coucou, Olivier. Vous m'avez appelé 2 fois.Coucou, Olivier. Vous m'avez appelé 3 fois.Coucou, Olivier. Vous m'avez appelé 4 fois.Coucou, Olivier. Vous m'avez appelé 5 fois.

Mettre en forme la sortie de la console

La directive%c permet d'appliquer une règle CSS pour mettre en forme le message dans la console :

console.log(  "Voici mon %cmessage super stylé.",  "color: yellow; font-style: italic; background-color: blue;padding: 2px",);

Le texte situé avant la directive n'est pas modifié. Le texte situé après sera mis en forme à l'aide des déclarations CSS du deuxième paramètre.

La directive%c peut être utilisée plusieurs fois :

console.log(  "Utilisation de plusieurs styles : %cred %corange",  "color: red",  "color: orange",  "Un message non mis en forme",);

Les propriétés qui peuvent être utilisées avec cette syntaxe sont (au moins pour Firefox) :

• background et les propriétés détaillées correspondantes
• border et les propriétés détaillées correspondantes
• border-radius
• box-decoration-break
• box-shadow
• clear etfloat
• color
• cursor
• display
• font et les propriétés détaillées correspondantes
• line-height
• margin
• outline et les propriétés détaillées correspondantes
• padding
• Les propriétéstext-* commetext-transform
• white-space
• word-spacing etword-break
• writing-mode

Utiliser des groupes dans la console

On peut utiliser des groupes imbriqués pour organiser le contenu affiché dans la console. Pour créer un nouveau groupe, on utilisera la méthodeconsole.group(). La méthodeconsole.groupCollapsed() permettra également de créer un groupe, mais qui sera automatiquement replié (et qu'il faudra déplier via l'interface pour en consulter les informations).

Pour clôturer le groupe courant, on appelleraconsole.groupEnd(). Ainsi, si on écrit :

console.log("Il s'agit du niveau extérieur");console.group();console.log("Niveau 2");console.group();console.log("Niveau 3");console.warn("Un avertissement au niveau 3");console.groupEnd();console.log("Retour au niveau 2");console.groupEnd();console.log("Retour au niveau extérieur");

L'affichage dans la console ressemblera à ceci :

Chronomètres

On peut démarrer un chronomètre pour mesurer la durée d'une opération donnée. Pour lancer un chronomètre, on appellera la méthodeconsole.time(), à laquelle on pourra passer un nom comme paramètre. Pour arrêter le chronomètre et obtenir la durée écoulée, on appellera la méthodeconsole.timeEnd() (à laquelle on pourra aussi passer un nom en argument pour arrêter un chronomètre donné). Pour une page web donnée, on peut exécuter jusqu'à 10 000 chronomètres simultanément.

Si on écrit cela, par exemple :

console.time("ma mesure de temps");alert("Cliquez pour continuer");console.timeLog("ma mesure de temps");alert("Faire d'autres trucs…");console.timeEnd("ma mesure de temps");

Avec le fragment de code ci-avant, on affichera le temps écoulé après que la personne a fermé la première fenêtre modale, puis le temps total pris pour fermer les deux fenêtres :

On peut voir que le nom du chronomètre est affiché au démarrage et à l'arrêt de celui-ci.

Traces de piles d'appels

L'objetconsole permet également d'afficher une trace de pile d'appels. Cela permet de connaître la pile d'appels suivie pour atteindre le point où la méthodeconsole.trace() a été appelée :

function toto() {  function truc() {    console.trace();  }  truc();}toto();

Avec le fragment de code précédent, on aura la trace suivante dans la console :

Spécifications

Compatibilité des navigateurs

Voir aussi

• Google Chrome
• Microsoft Edge
• Apple Safari
• Mozilla Firefox