La console JavaScript au-delà du fameux console.log

Si vous êtes intéressé par la console, je vous invite également à lire Rédiger un meilleur rapport de bug.

En tant que développeur Web, vous savez très bien qu’il est nécessaire de débogguer votre code. Nous utilisons souvent des bibliothèques externes pour générer des journaux, ou Logs, les formater et/ou les afficher dans tel ou tel cas, mais la console JavaScript de nos navigateurs est beaucoup plus puissante que nous le pensons.

Quand nous pensons à la console, la première chose qui vient à l’esprit est la commande console.log. Il existe pourtant beaucoup plus de méthodes qu’on imagine. Voyons comment tirer le meilleur parti de l’utilisation de la console en plus de vous donner quelques trucs pour rendre le tout plus lisible.

La console JavaScript au-delà du fameux console.log

Les méthodes les plus utilisées

La console web permet d’écrire, de gérer et de surveiller le code JavaScript directement dans votre navigateur. Les méthodes les plus utilisées sont :

• console.log (ou son alias console.debug) affiche un message dans la console web;
• console.error affiche un message d’erreur dans la console du navigateur;
• console.warn affiche un message d’avertissement dans la console web;

Vous pouvez passer plusieurs paramètres à ces méthodes. Chaque paramètre est évalué et concaténé dans une chaîne délimitée par un espace, mais dans le cas d’objets ou de tableaux, vous pouvez naviguer entre leurs propriétés.

// someObject
const someObject = {a: 1, b: 2, c: 3};

// log
console.log('Log:', someObject, new Date());

// warn
console.warn('Warning:', someObject, new Date());

// error
console.error('Error:', someObject, new Date());

Affichera :

Console.dir()

Affiche une liste interactive des propriétés de l’objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l’affichage du contenu des objets-enfants.

En d’autres termes, console.dir est le moyen de voir toutes les propriétés de l’objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l’objet.

// define any DOM element
let element = document.getElementById('popup-overlay');

// show DOM
console.log(element);

// show object properties
console.dir(element);

Affichera :

Console.group()

Cette méthode vous permet de regrouper une série de console.log (mais aussi des informations à propos d’erreur, etc.) sous un groupe pouvant être réduit. La syntaxe est vraiment simple: il suffit de regrouper tous les console.log que nous voulons regrouper entre console.group() (ou console.groupCollapsed() si vous voulez que le groupe soit fermé par défaut) et console.groupEnd().

// profile function
function profile(object) {
  console.group('Profile');
  const date = new Date();
  console.log('Date is:', date);
  const fullname = `${object.firstname} ${object.lastname}`;
  console.log('Fullname is:', fullname);
  const id = Math.random(1);
  console.log('ID is:', id);
  console.groupEnd();
}

// call function
profile({firstname: 'Hugues', lastname: 'Brunelle'});

Affichera :

Console.table()

L’affichage de données JSON dans un console.log est une expérience plutôt terrifiante. console.table nous permet de visualiser les structures dans une table où nous pouvons nommer les colonnes et les passer comme paramètres.

// Array
const battleDeck = [
  {
    id: 1234,
    name: 'Ice Golem',
    level: 11,
    rarity: 'Rare',
    type: 'Troop'
  },
  {
    id: 5678,
    name: 'The Log',
    level: 10,
    rarity: 'Legendary',
    type: 'Spell'
  },
  {
    id: 9012,
    name: 'Zap',
    level: 12,
    rarity: 'Common',
    type: 'Spell'
  }
]

// Output all data
console.table(battleDeck);

// Output some data
console.table(battleDeck, ["name", "level"]);

Affichera :

Un ensemble de fonctionnalités

Il existe une vingtaine de méthodes dont celles un peu moins connues, par exemple :

• console.count affiche dans la console le nombre de fois où la fonction count() a été appelée;
• console.time chronomètre une opération;
• console.timeEnd arrête un chronomètre précédemment démarré par console.time();
• console.trace affiche la trace de la Stack dans la console;
• console.assert affiche un message d’erreur dans la console si l’assertion est fausse. Si l’assertion est vraie, rien ne se produit.

Les spécificités de l’objet console varient d’un navigateur à l’autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.

Amusez-vous avec la console, mais n’en abusez pas!

Si vous avez besoin d’aide pour mettre en place une méthodologie adéquate pour vous aidez à débogguer votre code, n’hésitez pas à communiquer avec nous.

Ressources externes :

• Canella, Riccardo, « How you can improve your workflow using the JavaScript console », 11 juin 2018
• Burgess, Matt, « Beyond console.log() », 6 novembre 2018
• MDN Web Docs « Console », 8 juin 2018