console
=======

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 :


```js
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 appellera `console.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 :


```js
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 :


```js
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).


```js
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 :


```js
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.

![Texte mis en forme dans la console de Firefox](/fr/docs/Web/API/console/css-styling.png)

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


```js
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` et `float`
* `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és `text-*` comme `text-transform`
* `white-space`
* `word-spacing` et `word-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 :


```js
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 :

![Une capture d'écran des messages imbriqués dans la sortie de la console.](/fr/docs/Web/API/console/nesting.png)

### 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 :


```js
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 :

![L'affichage produit par le chronomètre dans la console de Firefox](/fr/docs/Web/API/console/console-timelog.png)

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 :


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

toto();
```


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

![Trace de la pile d'appels dans la console Firefox](/fr/docs/Web/API/console/api-trace2.png)

Spécifications
--------------

| Specification |
| --- |
| Console Standard # console-namespace |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**Note :** Dans Firefox, si une page définit un objet `console`, cet objet surchargera l'objet natif exposé par Firefox.

Voir aussi
----------

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