Les joies de la console

Instrument de débug très puissant en javaScript, la console n’est pas toujours exploitée à son juste potentiel. Il y a tout un monde à côté de console.log()

La plupart des dévs utilisent le console.log() pour afficher des infos de debug lorsqu’ils font du javaScript.

Ainsi le code suivant :

let theBeatGoesOn = "poumpoum";
console.log(theBeatGoesOn);

affichera “poumpoum”.

La gamme réduite de la console

C’est assez simple :

console.log(theBeatGoesOn);
console.warn(theBeatGoesOn);
console.error(theBeatGoesOn);
console.info(theBeatGoesOn);
console.debug(theBeatGoesOn);

Non seulement l’affichage n’est pas le même dans la console mais en plus il pourra se faire séparemment :

C’est déjà un premièr élément que l’on peut utiliser afin d’organiser un peu mieux son débug et gagner du temps dans la lecture des informations.

Comme vous le voyez dans le screenshot, les warnings et les erreurs bénéficient en plus d’un style différent.

D’autres consoles dans la gamme

Comme vu plus haut, déjà pas mal de variantes utilisables et qui permettent de catégoriser les logs mais c’est loin d’être la fin.

console.group() – console.groupEnd()

On peut catégoriser les logs, ok, mais saviez-vous que la notion de groupe existe pour la console ?

console.group();
console.info("Attention 1er groupe");
console.group();
console.info("Attention 2ème groupe imbriqué dans le 1er");
console.groupEnd();
console.groupEnd();

Il suffit donc d’entourer nos logs avec console.group() et console.groupEnd() pour créer un groupe de logs et chaque groupe peut être lui-même imbriqué dans un autre groupe.

console.trace()

La trace permet de décortiquer le code pour reconstituer le chemin d’exécution.

Cela peut s’avérer très utile en matière de débug car il est parfois fastidieux de rechercher la cause d’un problème dans une application js.

Source

console.table()

Travailler avec des tableaux en javaScript sera désormais plus agréable si vous ne connaissiez pas cette variante, par exempe :

let myArray = {
   "Ellen Page": "who would wanna be stuck in a dream for 10 years ?",
   "Dileep Rao": "Depends on the dream"
};
console.table(myArray);

affichera :

console.time()

Une des meilleures variantes, elle vous permet de timer votre code tout simplement. Ainsi :

console.time("chrono");
for (var i = 0; i < 9; i++) {
   console.log(i);
};
console.timeEnd("chrono");

ou dans la console directement :

Remarque: attention à bien donner le même label pour le console.time() et le console.timeEnd().

Et ce n’est pas fini…

En réalité, plein d’autres variantes pourrait être explorées mais je préfère vous présenter les plus courantes et AMHA les plus pratiques.

Vous trouverez ici https://developer.mozilla.org/fr/docs/Web/API/Console de quoi faire 🙂

La console ne suffit pas !

Destructurer

La gamme des consoles est large mais à nous aussi de nous organiser dans notre code pour gagner du temps et économiser de l’énergie (celle de l’Homme comme celle de la machine).

Destructurer les objets permet de travailler et déboguer plus facilement avec je trouve. Ainsi suivant la manière dont on code, le dev/débug sera plus ou moins verbeux.

Exemple :

const myObject = {lol:"lol", li:"li", _lol:"lol"};
const lol = myObject.lol;
const li = myObject.li;
const _lol = myObject._lol;
console.log(lol,li,lol);

est assez pénible à écrire alors imaginez avec des objets imbriqués dans d’autres objets…

Au lieu de ça, on peut destructurer l’objet pour utiliser/lire ce qu’il y a à l’intérieur plus facilement :

const myObject = {lol:"lol", li:"li", _lol:"lol"};
const {lol,li,_lol} = myObject;
console.log(lol,li,_lol);

Utiliser les substitutions

Une syntaxe qu’on peut retrouver à l’équivalent dans d’autres langages mais ici, à la sauce js, une fois n’est pas coutûme, ça donne un truc un peu plus logique :

  • %s pour les chaînes (string)
  • %i pour les entiers
  • %f pour les décimaux (float)
  • %o pour les objets
console.log("everybody call this is a %s", "robbery");

Utiliser un IDE puissant

Un IDE comme PHPstorm ou Webstorm permet de créer des live templates. Ces raccourcis très pratiques vous feront gagner un temps fou pour utiliser la console !

Conclusion

Vous savez maintenant que console.log() n’est qu’une variante parmi une multitude de possibilités de la console API. Vous pouvez aussi améliorer vos débugs avec de petites astuces et votre IDE.

Alors logguez !

Réagir

J'utilise un système de commentaires un peu expérimental basé sur les issues GitHub. Il suffit d'autoriser l'application Utteranc sur votre compte GitHub.

Remarque : si vous n'êtes pas d'accord pour donner cette autorisation, il est possible de commenter directement sur GitHub. Rendez-vous alors sur les issues de https://github.com/jmau111/julien-maury.com. Elles sont titrées avec l'URL du billet ;)