Gérez votre console comme un pro

Dans le développement javascript, la console est de loin votre meilleure amie. Mais elle est malheureusement trop souvent peu, et mal, utilisée.

Voyons ensemble jusqu’où nous pouvons aller !

Pour information, j’utilise, pour cet article, le navigateur Google Chrome. Mais ces quelques règles sont les mêmes pour tous les navigateurs récents (oui, même Internet Explorer …).

Utilisation basique

Je pense que tout le monde a déjà utilisé la console dans sa version basique. Rien de sorcier. Mais précisons tout de même :

Pour ouvrir la console, plusieurs moyens :

  • CMD + ALT + J sur mac
  • CTRL + MAJ + J sur PC
  • Clic droit « Procéder à l’inspection de l’élément »
  • Menu > Outils > Console JavaScript

Ensuite, dans votre javascript, vous appelez simplement le code suivant :

<script>
   console.log('Message');
</script>

Ce qui affichera quelque chose comme :

console.log

On peut même aller un petit peu plus loin (et c’est là que ça devient intéressant), en demandant le détail d’un objet :

<script>
    var obj = {
        param1: "value1",
        param2: 2
    };
    console.log(obj);
</script>

console.log object

Très pratique pour débugger vos scripts donc. Mais la console est capable d’aller un peu plus loins que ça et afficher plusieurs types de message avec, pour chacun, un comportement différent.

Types de message

Nous utilisons tous console.log. Mais il existe aussi d’autres méthodes d’utilisation de la console : error, warn, info et table.

Error

La méthode « error » est très pratique et permet de tracer les erreurs que vous allez, vous-même, déclencher.

<script>
    console.error("Une erreur est survenue");
</script>

 

console.error

Mais on peut aller un petit peu plus loin :

<script>
    function test() {
         if(typeof data == "undefined") {
             console.error("Une erreur est survenue");
         }
    }
    test();
</script>

console.error complex

On apprend ici que l’erreur a été appelée ligne 4, depuis la fonction « test » qui est elle-même appelée ligne 8. Pratique pour remonter dans votre code et savoir quel chemin vous avez emprunté pour en arriver à cette erreur.

Warn

Si vous souhaitez juste créer une alerte, non bloquante, vous pouvez simplement utiliser console.warn();

<script>
    console.warn("La machine à café est vide.");
</script>

console.warn

Info

Si vous souhaitez juste informer, utilisez console.info();

<script>
   console.info("J'ai terriblement besoin de café.");
</script>

console.info

Table

Dernière méthode, et pas des moindre, vous pouvez afficher un tableau directement dans votre console en appelant la méthode console.table();

 

<script>
    var table = [];
 
    table.push({day: "Lundi", coffee: 8,});
    table.push({day: "Mardi", coffee: 4,});
    table.push({day: "Mercredi", coffee: 5,});
    table.push({day: "Jeudi", coffee: 6,});
    table.push({day: "Vendredi", coffee: 12,});
    table.push({day: "Samedi", coffee: 0,});
    table.push({day: "Dimanche", coffee: 0,});
 
    console.table(table);
</script>

console.table

C’est beau hein ? Mais on peut aller encore plus loin.

Personnaliser la console

Effectivement, la console javascript est très pratique et très puissante, mais on peut aller encore plus loin, et ça ne sert vraiment à rien : personnaliser l’affichage de la console. Oui, on peut gérer, en CSS, son affichage ! Et c’est pas bien compliqué :

<script> 
 console.info("%cA developper is a living organism wich converts %ccoffee %cin line code.", "color: green", "font-weight: bold; color: brown", 'color: green');
</script>

console.css

Magique ! Enfin pas tant que ça …

Pour ça, il vous suffit de placer un « %c » à l’endroit de la chaîne de caractère où vous souhaitez commencer à attribuer votre style CSS, puis placez ce style CSS en paramètre de votre console. Placez autant de paramètre que vous avez de « %c » dans votre chaîne de caractère pour styliser les différents morceaux de votre chaîne.

MAIS !

Attention ! Si vous utilisez la console, sachez qu’Internet Explorer peut poser tout de même quelques soucis (on s’en serait douté). En effet, si vous mettez en production un code javascript qui fait appel à l’objet console, le navigateur a un comportement assez étonnant : Si le mode de développement est activé (touche F12, pour voir la console), tout se passera à merveille. Si par contre, le mode de développement est désactivé, alors l’appel à la console vous provoquera une belle fatal error qui bloquera tout votre script (ils sont bien chez Microsoft).

Mais comme je suis gentil, voici une petite astuce à intégrer dans toutes vos pages pour pallier à ce problème :

/* IE, c'est le mal */
(function () {
    var f = function () {};
    if (!window.console) {
        window.console = {
            log:f, info:f, warn:f, debug:f, error:f
        };
    }
}());

Laisser un commentaire