Comment utiliser la console en JavaScript

La console sert à voir ce qu’il se passe avec nos script JS, souvent pour debuger des erreurs ou tester des trucs dessus genre voir la valeur de tel variable ou le resultat de tel fonction avant de l’intégrer au site.

La console est accessible sur votre navigateur en faisant F12, ce qui ouvrira ce qu’on appel la barre des « DevTools », puis en allant dans l’onglet « Console ». Ci-dessous un exemple de ce que vous devriez avoir :

Si vous n’avez pas JQMIGRATE truc muche là, c’est pas grave, le but c’est d’avoir juste la console.

Code de base

console.log('toto');

Résultat obtenu

Différencier les messages que l’on reçoit dans la console

Nativement, la console en javascript fournit pleins de codes couleur et d’affichage différents selon nos besoins, et je vous propose d’en voir quelques uns (honnêtement pratique dans certains codes).

La commande console.info()

console.info("Ceci est une info");

Résultat de console.info()

De façon commune, les infos de tous fichiers confondus s’afficheront dans l’onglet « info » qui se situe à gauche. Après si on veut voir les infos spécifiques à un fichier il suffit de cliquer dessus et le resultat s’affichera sur la droite. Ca sera le même principe pour les autres codes qui viennent.

La commande console.warn()

console.warn("Attention : quelque chose pourrait mal tourner");

Résultat de console.warn()

La commande console.error()

console.error("Une erreur est survenue");

Résultat de console.error()

La commande console.table()

const utilisateurs = [{ nom: "Alice" }, { name: "Flandre" }];
console.table(utilisateurs);

Résultat de console.table()

Alors celui-là est un peu tricky des fois, il faut avoir la barre DevTools déjà ouverte et refresh la page pour voir la tableau apparaitre (des fois). Donc pas de panique.