Apprenez à coder gratuitement en moins de 30 jours !   📕

Comment utiliser console.log en JavaScript ?

Article mis à jour le mercredi 20 juillet 2022.

Comment maîtriser console.log en JavaScript ?

Vous utilisez console.log depuis un moment ? Savez 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

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

console.warn() affiche un message d’avertissement

console.warn("Message d’avertissement")

// ⚠️ Message d’avertissement

3. console.error

console.error

console.error() affiche un message d’erreur

console.error("Message d’erreur")

// ❌ Message d’erreur

4. console.clear

console.clear

console.clear() vide la console

console.clear()

// La console a été vidée

5. console.table

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

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 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 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"
    }
  ]
}
*/

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 debuggage de votre navigateur et utiliser des bibliothèques de test vous menerons bien plus loin en JavaScript.

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

APPRENEZ GRATUITEMENT À CODER EN MOINS DE 30 JOURS !
Vous voulez apprendre la programmation ?
Recevez mon ebook GRATUIT : "9 astuces pour apprendre à coder".
Découvrez si le code est fait pour vous !

Comment Coder

Je m'appelle Thomas. J'ai commencé à coder dans mon enfance. Depuis ma sortie de la première promo de l'École 42, j'ai développé des centaines d'applications et sites web. Sur ce blog, je vous donne les meilleurs conseils et astuces pour apprendre comment apprendre à coder efficacement.