Accueil » JavaScript » En faire plus avec la Console Javascript

En faire plus avec la Console Javascript

Image représentant du code javascript

Si vous êtes développeur, vous connaissez l’importance de débugger votre code. En JavaScript, vous connaissez tous le console.log() classique mais il faut savoir que la console JavaScript de votre navigateur est bien plus puissante qu’il n’y parait.

Voici donc plusieurs fonctions qui vous aideront à y voir plus clair lors de vos développements.

Les plus connues

console.log, console.warn, console.error

La plus utilisée est sans aucun doute console.log() , c’est la fonction magique qui vous permet d’afficher le résultat d’une fonction, une variable, un texte, un « ici » lorsque vous débuggez.

La fonction console.log() possède deux variantes, console.warn() et console.error(), respectivement pour les avertissements et les erreurs.

Voici donc comment s’affiche les trois fonctions dans votre console JavaScript :

console.log(), console.warn() & console.error()

Petite information supplémentaire, ces 3 fonctions peuvent prendre plusieurs paramètres à afficher, de la même manière que le var_dump() en PHP.

On peut donc écrire :

console.log(param1, getParams(), new Date());

console.table

Fonction que j’ai d’ailleurs découverte il y a peu et que j’utilise de plus en plus. Utile lorsque vous avez un tableau, un tableau d’objets ou un objet.

Ci-dessous un petit exemple de la praticité de cette méthode console.table()

console.table()

Les fonctions méconnues mais indispensables

console.group

Fonction assez magique je dois l’avouer, console.group()vous permet, comme son nom l’indique de grouper vos traces laissées avec un console.log(). Fort pratique lorsque vous êtes dans une boucle, quand vous testez plusieurs fonctions en même temps ou bien lorsque vous souhaitez séparer convenablement plusieurs traces de variables différentes.

Voici plutôt

console.group('Customer');
console.log('name: John Doe');
console.log('id: ' + id);
console.groupEnd();

console.group("Cart content");
console.group('Shopping item');
console.log('Name: Dragon Ball Super 1');
console.log('Author: Toyotaro, Toriyama');
console.log('ISBN: 978-4-08-880661-7');
console.groupEnd();

console.group('Shopping item');
console.log('Name: Dragon Ball Super 2');
console.log('Author: Toyotaro, Toriyama');
console.log('ISBN: 978-4-08-880867-3');
console.groupEnd();
console.groupEnd();

donnera dans votre console navigateur

console.group()

console.time

Plus besoin de faire la différence entre deux objets dates pour connaître la durée d’éxecution d’une fonction ou d’un tour de boucle… Terminé !

Il vous suffit complement d’utiliser console.time() pour démarrer le compteur et console.timeEnd() pour l’arrêter et retourner le temps en microtime entre les deux.

Comme une bonne nouvelle ne vient jamais seule, vous pouvez également en déclencher plusieurs en même temps en leur donnant des noms 🙂

const slowFunction = number =>  {
  console.time('slowFunction');
  // something slow or complex with the numbers. 
  // Factorials, or whatever.
  console.timeEnd('slowFunction');
}

console.time();

for (i = 0; i < 100; ++i) {
  slowFunction(i);
}

console.timeEnd();

console.count

Encore une fonction pratique et indispensable au quotidien. Comme son nom l’indique, console.count() représente un compteur, que l’on peut nommer si besoin.

Dans le code suivant, on déclenche deux compteurs qui s’incrémenteront et s’afficheront à chaque tour de boucle et représentent donc un passage lorsque nous sommes sur un multiple de 5 ou une valeur impaire.

for (let i = 0; i < 100; i++) {
    if (i % 2) {
        console.count('odds');
    }
    if (!(i % 5)) {
        console.count('multiplesOfFive');
    }
}

Ce qui donnera

console.time()

N’oubliez pas, à la fin de l’utilisation de vos compteurs de faire un petit coup de console.countReset() pour le compteur par défaut ou de console.countReset("monCompteur") pour les réinitialiser.

Pour aller plus loin

La console JavaScript de votre navigateur regorge de fonctions utiles et indispensables à exploiter lors de vos développements ou de vos séances de débugs. Elles vous éviteront de réinventer la roue, notamment pour compter le temps d’exécution d’une fonction (moi le premier) et de gagner du temps au quotidien.

Voici plutôt :

  • console.assert()
  • console.dir()
  • console.trace()
  • console.clear() -> indispensable lorsqu’un site affiche énormément de logs, avertissements ou erreurs sur la console.

Je vous conseille d’aller faire un tour sur ces sites / articles :

C’est tout pour aujourd’hui, j’espère que vous avez vu des nouvelles choses. Certains bouts de codes illustratifs viennent des deux articles Medium cités plus haut, je les ai légèrement simplifiés pour qu’ils soient plus lisibles mais ils correspondaient parfaitement à ce que je voulais montrer. N’hésitez pas à aller les lire également 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.