console
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
L'objet console
permet d'accéder à la console de débogage de l'environnement JavaScript (par exemple la 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'objet console
depuis n'importe quel objet global, Window
pour les contextes de navigation classiques et WorkerGlobalScope
dans les workers, grâce à la propriété console
. Exposé via Windows.console
, on peut y faire référence avec console
. Par exemple :
console.log("Erreur à l'ouverture du lien indiqué.");
Dans cette page, nous verrons les méthodes disponibles sur l'objet console
et donnerons quelques cas d'utilisation.
Note : Cette fonctionnalité est disponible via les Web Workers.
Note : Certains IDE et éditeurs peuvent implémenter l'API Console différemment. Cela se traduit par un comportement différent ou une absence de certaines fonctionnalités de l'API. Par exemple, les méthodes liées aux chronomètres pourraient ne pas afficher les durées en sortie. En cas de doute, utilisez la console des outils de développement de votre navigateur pour observer le fonctionnement décrit dans cette documentation.
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 de
console.dir()
par défaut). console.error()
-
Affiche un message d'erreur. Ce message peut contenir des chaînes de caractères de substitution et d'autres valeurs fournies comme arguments complémentaires.
console.exception()
Non standard Obsolète-
Un synonyme pour
console.error()
. console.group()
-
Crée un nouveau groupe, indentant l'affichage des messages suivants. Pour revenir au niveau courant, on appellera
console.groupEnd()
. console.groupCollapsed()
-
Crée un nouveau groupe, 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 le groupe courant.
console.info()
-
Affiche des informations dans la console. Ce message peut contenir des chaî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 des chaî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 un chronomètre avec un nom fourni en paramètre.
console.timeEnd()
-
Arrête le chronomè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 du chronomè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 la trace de la pile d'appels.
console.warn()
-
Affiche un message d'avertissement dans la console. Ce message peut contenir des chaî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éthodes console.log()
, console.info()
, console.warn()
, console.error()
, et console.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 de console
(telle que log()
), 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 écrire
console.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 écrire
console.log("Toto %.2f", 1.1)
pour avoir deux chiffres décimaux :Toto 1.10
.
Attention : Ce formatage pour la précision numérique ne fonctionne pas dans Chrome.
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 correspondantesborder
et les propriétés détaillées correspondantesborder-radius
box-decoration-break
box-shadow
clear
etfloat
color
cursor
display
font
et les propriétés détaillées correspondantesline-height
margin
outline
et les propriétés détaillées correspondantespadding
- Les propriétés
text-*
commetext-transform
white-space
word-spacing
etword-break
writing-mode
Note :
Le message de la console se comporte par défaut comme un élément en ligne. Pour observer des effets avec padding
, margin
ou autre, il faut modifier son affichage, par exemple avec display: inline-block
.
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éthode console.group()
. La méthode console.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 appellera console.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éthode console.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éthode console.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'objet console
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éthode console.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
Specification |
---|
Console Standard # console-namespace |
Compatibilité des navigateurs
BCD tables only load in the browser
Note :
Dans Firefox, si une page définit un objet console
, cet objet surchargera l'objet natif exposé par Firefox.