Comment utiliser console.log en JavaScript ?

Vous utilisez console.log depuis un moment ? Savez-vous que l’objet console propose bien plus de méthodes pour afficher du contenu textuel ?

Alors cet article dédié à la maîtrise de l’objet console en JavaScript est fait pour vous !

À la fin de cette article vous saurez :

• à quoi sert l’objet console et sa méthode console.log
• utiliser les méthodes les plus importantes de l’objet console
• comment afficher efficacement vos variables avec console.log

Découvrons ensemble les méthodes essentielles que tous les développeurs JavaScript devraient connaître !

C’est quoi console log ?

console.log() est une méthode de l’objet console en JavaScript qui est utilisée pour afficher tout type de variables ou bien des messages devant être affichés à l’utilisateur dans la console d’un navigateur ou dans le terminal.

Comment afficher un console log ?

Pour afficher le contenu des variables en JavaScript, on utilise la méthode console.log en passant autant de variables qu’on veut en paramètres : console.log(permiere_variable, deuxieme_variable, ...).

Quand utiliser console log ?

console.log est une méthode qui permet de déboguer du code JavaScript en affichant le contenu de variables à différents moments. Il permet aussi d’informer publiquement les autres développeurs de ce que fait le code. La méthode console.log ne devrait pas remplacer le debugger JavaScript.

1. console.log

console.log() permet d’afficher des messages dans la console

console.log("Hello, World!")

// Hello, World!

console.log("Joyeux anniversaire %s, vous avez %d ans.", "Alice", 42)

// Joyeux anniversaire Alice, vous avez 42 ans.

2. console.warn

console.warn() affiche un message d’avertissement

console.warn("Message d’avertissement")

// ⚠️ Message d’avertissement

3. console.error

console.error() affiche un message d’erreur

console.error("Message d’erreur")

// ❌ Message d’erreur

4. console.clear

console.clear() vide la console

console.clear()

// La console a été vidée

5. console.table

console.table() affiche les clés et les valeurs d’un objet dans un tableau

console.table({
  langage: "JavaScript",
  naissance: "Brendan Eich",
  auteur: 1996,
})

/*
  (index)                Value
  langage                “JavaScript”
  naissance              1996   
  auteur                 “Brendan Eich”
*/

6. console.count

console.count() affiche le nombre de fois que la ligne a été appelée

for (let i = 0; i < 5; ++i) {
  console.count("Boucle")
}

/*
  Boucle: 1
  Boucle: 2
  Boucle: 3           
  Boucle: 4           
  Boucle: 5 
*/

7. console.time et console.timeEnd

console.time() démarre un chronometre

console.timeEnd() arrête un chronometre

console.time("Chrono")

// Du code à exécuter

console.timeEnd("Chrono")

// Chrono: 8842.1220003125 ms

8. console.group et console.groupEnd

console.group() démarre un nouveau groupe de log

console.groupEnd() termine le groupe d’indentation

console.group("Titre")
console.log("Sous groupe")
console.group()
console.warn("Sous sous groupe")
console.groupEnd()
console.groupEnd()

/*
> Titre              
    Sous groupe    
    console.group                 
      ⚠️ Sous sous groupe
*/

Astuce bonus pour mieux utiliser console.log

La méthode habituelle

Lorsque vous travaillez avec JavaScript, vous utilisez peut-être console.log() pour afficher quelque chose dans la console du navigateur. Ainsi, disons qu’on veuille afficher l’objet suivant dans la console, on va utiliser quelque chose comme ça :

const utilisateur = {
  id: 1,
  nom: "Jean Duboix",
}

console.log(utilisateur)

// { id : 1, nom : 'Jean Duboix' }

L’objet utilisateur sera affiché dans la console, mais comme vous pouvez le constater, le problème de cette approche est que vous ne savez pas exactement quelle variable a été loggée.

Dans un scénario réel où vous enregistrez plusieurs variables de votre base de code, il devient un peu confus de savoir quelle variable a été enregistrée dans la console et vous pouvez avoir tendance à perdre complètement le contexte.

Pour atténuer ce problème, voici ce que je fais à la place.

Enregistrer la variable comme un objet

Pour voir quelle variable a été enregistrée dans la console, tout ce que vous pouvez faire est d’enregistrer cette variable en tant qu’objet comme suit.

const utilisateur = {
  id: 1,
  nom: "Jean Duboix",
}

console.log({ utilisateur })

/*
{
  utilisateur: {
    id : 1,
    nom : 'Jean Duboix'
  }
}
*/

Comme vous pouvez le constater, en enregistrant la variable à l’aide de cette méthode, la console du navigateur affiche également le nom de la variable.

Si vous voulez voir le contenu de plusieurs variables dans un même console.log, vous pouvez donc faire quelque chose comme ça :

const site = "commentcoder.com"

const utilisateur = {
  id: 1,
  nom: "Jean Duboix",
}

const langages = [
  {
    id: 1,
    nom: "JavaScript",
  },
  {
    id: 2,
    name: "Python",
  },
]

console.log({ site, utilisateur, langages })
/*
{
  "site": "commentcoder.com",
  "utilisateur": {
    "id": 1,
    "nom": "Jean Duboix"
  },
  "langages": [
    {
      "id": 1,
      "nom": "JavaScript"
    },
    {
      "id": 2,
      "name": "Python"
    }
  ]
}
*/

Comment ajouter du style au texte affiché avec console.log ?

Il existe plusieurs moyens de modifier le style du texte qu’on affiche avec console.log. On peut lui appliquer des règles de CSS en utilisant la balise %c et ainsi spécifier des attributs comme une couleur ou une taille.

Disons qu’on veuille afficher du texte avec une taille, une couleur et un fond différents.

On peut afficher du texte avec les mêmes attributs de style comme ceci :

console.log(
  "%cCommentCoder.Com",
  "color: white; background: linear-gradient(300deg, #ff3366 5%, #6699ff 100%); font-size: 42px; border-radius: 4px; padding: 4px 8px;"
)

Ce qui donnera dans la console de votre navigateur :

On voit qu’on peut donc lui donner les mêmes attributs CSS qu’on donnerait à une balise HTML normale.

Ou pour le rendre plus lisible :

const styles = [
  "color: white",
  "background: linear-gradient(300deg, #ff3366 5%, #6699ff 100%)",
  "font-size: 42px",
  "border-radius: 4px",
  "padding: 4px 8px",
].join(";")

console.log("%cCommentCoder.Com", styles)

Qu’est-ce que la balise %c avec console.log ?

%c applique du CSS au texte affiché sur la sortie standard avec console.log.

Appliquer des couleurs à d’autres méthodes de l’objet console

Modifier le style ne fonctionne pas qu’avec console.log mais aussi avec les autres fonctions de l’objet console en JavaScript.

console.log("%cconsole.log", "color: blue;")
console.info("%cconsole.info", "color: green;")
console.warn("%cconsole.warn", "color: red;")
console.error("%cconsole.error", "color: purple;")

Utiliser des styles différents avec console.log

Pour afficher plusieurs styles, il faut utiliser plusieurs flags %c et fournir autant de paramètres à console.log.

console.log(
  "%car%cc%c-e%cn%c-%cci%cel",
  "color: violet",
  "color: indigo",
  "color: blue",
  "color: green",
  "color: yellow",
  "color: orange",
  "color: red"
)

Débugger efficacement son code JavaScript

Bravo, vous savez maintenant utiliser la fonction console.log de manière extensible !

Comme nous l’avons vu dans cet article, on peut utiliser console.log pour déboguer son code efficacement. Cependant, maîtriser les outils de débogage de votre navigateur et utiliser des bibliothèques de test vous mèneront bien plus loin en JavaScript.

Attention également à ne pas laisser des console.log en production si vous affichez des données sensibles !