4 méthodes à connaitre sur l'API console en Javascript

Dans cette liste je ne vais pas vous faire l'affront de vous présenter des méthodes comme console.log(), console.warn() ou encore console.error().

À la place je vais vous présenter des méthodes qui peuvent vous faire gagner du temps lors de vos phase de debug, soit en vous offrant une mise en forme plus facile à lire, soit en vous donnant accès à des informations spécifiques.

C'est parti pour découvrir 4 méthodes de l'API Console en Javascript !

console.time

Cette méthode vous permet de mesurer le temps d'exécution (en ms) d'un bloc de code que vous aurez défini et de l'afficher directement dans la console.

Cette méthode vous permet d'éviter de créer un timer en Javascript simplement pour du debuggage et de l'optimisation.

console.time("test-alert");
alert("Waiting..."); //Alerting stops the execution but timer keeps running
console.timeEnd("test-alert");

/*
Result :
test-alert : 3145ms - timer ended
*/

Lien vers la documentation MDN : https://developer.mozilla.org/en-US/docs/Web/API/Console/trace

console.table

Lorsque vous voulez afficher le contenu d'un petit tableau à une dimension dans la console, un simple log peut suffire, mais lorsque vous avez des dizaines de colonnes, il devient intéressant de pouvoir visionner l'index relatif à chaque colonne.

Encore mieux, si vous travaillez avec des tableaux avec deux dimensions, la possibilité d'afficher le résultat sous la forme d'un vrai tableau devient alors presque magique !

let 2dArray = [[1,2,3],[4,5,6]];
console.table(2dArray);

/*
Result :
┌─────────┬───┬───┬───┐
│ (index) │ 0 │ 1 │ 2 │
├─────────┼───┼───┼───┤
│    0    │ 1 │ 2 │ 3 │
│    1    │ 4 │ 5 │ 6 │
└─────────┴───┴───┴───┘
*/

Lien vers la documentation MDN : https://developer.mozilla.org/en-US/docs/Web/API/Console/trace

console.trace

La "stack trace" correspond à la liste de toutes les fonctions appelées précédemment afin d'arriver à une ligne de code en question.

La trace s'affiche automatiquement lorsque vous utilisez la méthode error() sur un objet de type Error, mais ici vous pouvez choisir de l'afficher même sans avoir à générer une erreur !

/* Previous Code */
console.trace();
/* Next code */

/*
Result :
Trace
    at repl:1:9
    at Script.runInThisContext (vm.js:116:20)
    at REPLServer.defaultEval (repl.js:404:29)
    at bound (domain.js:420:14)
    at REPLServer.runBound [as eval] (domain.js:433:12)
    at REPLServer.onLine (repl.js:715:10)
    at REPLServer.emit (events.js:215:7)
    at REPLServer.EventEmitter.emit (domain.js:476:20)
    at REPLServer.Interface._onLine (readline.js:316:10)
    at REPLServer.Interface._line (readline.js:693:8)
*/

Lien vers la documentation MDN : https://developer.mozilla.org/en-US/docs/Web/API/Console/trace

console.group

Cette méthode vous permet de grouper plusieurs logs afin de les repérer plus facilement, mais aussi de les réduire tous en un clic.

L'affichage dépend de l'environnement, en NodeJS, les groupes seront simplement représentés par des indentations, tandis qu'ils seront intéractifs dans certains navigateurs.

console.group();
console.log("group-1");
console.group();
console.log("sub-group-1");
console.group();
console.log("sub-sub-group-1");
console.log("sub-sub-group-2");
console.groupEnd();
console.groupEnd();
console.groupEnd();

/*

Result :
| group-1 ▼
|    sub-group-1 ▼
|      sub-sub-group-1
|      sub-sub-group-2

*/

Lien vers la documentation MDN : https://developer.mozilla.org/en-US/docs/Web/API/Console/group