C'est quoi ce fameux console.log ?

C'est l'ami des développeurs JavaScript. C'est une méthode de l'objet Console qui permet d'afficher un message dans la console Web. Le message peut être une simple chaine ou peut être un ou plusieurs objets JavaScript. On dira donc que c'est une méthode qui a été surchargée.

Exemple:

console.log('Hello World !')

// Sortie: Hello World !

Commençons par le commencement: l'objet console

L'objet console permet d'accéder à la console de débogage du navigateur (par exemple, la console Web dans Firefox ou votre terminal, si votre code javascript est exécuté là bas). Comme tout autre objet, l'objet console est composé de plusieurs méthodes.

Je vais vous en présenter quelques-unes, afin que vous sachiez qu'il n'existe pas que la méthode log() 😉

1) console.log()

Un exemple montrant ce que regorge l'objet console:

let obj = console;
console.log(obj);

Sortie:

La sortie nous montre les méthodes de l'objet console, regardons les plus en détails.

2) console.warn()

Cette méthode envoie un message d'avertissement à la console Web. Par défaut, le message sera mis en évidence avec une couleur jaune.

Exemple:

let drapeau = ['vert', 'jaune', 'rouge'];
for(let i = 0, c = drapeau.length; i < c; i++){
    console.log(drapeau[i]);
    if( i == c-1)
        console.warn("C'est le dernier indice du tableau");
}

Sortie:

Remarquez bien la mise en évidence avec la couleur jaune.

3) console.error()

Cette méthode envoie un message d'erreur à la console Web. Par défaut, le message d'erreur sera mis en évidence avec une couleur rouge.

Exemple:

console.error("Echec connexion à la base de donnée.");

Sortie:

4) console.dir()

La méthode dir() affiche une liste interactive des propriétés de l'objet JavaScript spécifié. La sortie est présentée sous forme de liste hiérarchique avec des triangles de divulgation qui vous permettent de voir le contenu des objets enfants. Un exemple vaut mieux que mon bla bla.

Exemple:

let personne = {
    prenom: 'John',
    nom: 'Doe',
    age: 23,
    manger: (aliment) => {
        console.log("Je mange: " + aliment)
    },
    boire: (boisson) => {
        console.log("Je bois: " + boisson)
    }
};
console.dir(personne);

Sortie: En cliquant sur le triangle de divulgation, on voit:

Remarque:

console.log() imprime l'élément dans une arborescence de type HTML console.dir() imprime l'élément dans une arborescence de type JSON

5) console.time() et console.timeEnd()

console.time() démarre une minuterie que vous pouvez utiliser pour suivre la durée d'une opération. Vous donnez à chaque minuteur un nom unique et vous pouvez avoir jusqu'à 10 000 minuteries en cours d'exécution sur une page donnée. Lorsque vous appelez console.timeEnd() avec le même nom, le navigateur affiche le temps, en millisecondes, qui s'est écoulé depuis le démarrage du minuteur. C'est pratique non ? Regardons ce que ça donne sur un exemple:

console.log("Temps de calcul et affichage de factorielle 7 :");
let result = 1;

console.time('minuteur');
for(let i = 1; i <= 7; i++)
    result *= i;
console.log('7! = ' + result);

console.timeEnd('minuteur');

Sortie:

6) console.table()

Cette méthode permet de mieux visualiser des données (tableau, objet) sous forme de tableau. Si l'argument passé à la méthode est un tableau, ses valeurs seront les indices du tableau. Si c'est un objet, alors ses valeurs seront les noms de propriété.

Exemple:

let animaux = [
    'Chat',
    'Chien',
    'Lapin',
    'Souris'
];

console.table(animaux);

Sortie:

La méthode a un second paramètre qu est facultatif: columns. Ce dernier est un tableau contenant les noms des colonnes à inclure dans la sortie. Par défaut, console.table() affiche tous les éléments de chaque ligne. Avec le paramètre columns vous pouvez sélectionner un sous-ensemble de colonnes à afficher.

Exemple:

function Smartphone(marque, modele, couleur){
    this.marque = marque;
    this.modele = modele;
    this.couleur = couleur;
}

app1 = new Smartphone('Apple', 'Iphone X', 'gold');
app2 = new Smartphone('Samsung', 'A7', 'noir');
app3 = new Smartphone('Huawei', 'P40 Pro+', 'gris');

console.table([app1, app2, app3], ['marque']);

Sortie:

7) console.clear()

Cette méthode est utilisée pour effacer la console si l'environnement le permet.

console.clear ()

Sortie:

J'ai fait le tour de quelques fonctions qui peuvent vous être utiles pour l'affichage de message dans la console Web avec plus de lisibilité. Mais il en reste encore, je vous laisse découvrir ces autres fonctions par vous même pour ne pas tirer en longueur.

Styliser la sortie de console.log()

Regardons ensemble une version de la syntaxe de la méthode:

console.log(msg [, subst1, ..., substN]);

On voit que la méthode a un paramètre facultatif qui est un ensemble d'objets JavaScript par lesquels on peut remplacer les chaînes de substitution à l'intérieur de msg. Cela vous donne un contrôle supplémentaire sur le format de la sortie. Ainsi pour ajouter un style à la sortie de cette méthode afin de donner un aspect sophistiqué, il vous suffit d'ajouter un style CSS comme deuxième paramètre, tout en commençant le premier paramètre avec %c . Les styles remplaceront le %c dans msg.

Exemple:

drapeauSenegal = ['green', 'yellow', 'red'];
const styles = [
    `background-color: ${drapeauSenegal[0]}; border: 1px solid ${drapeauSenegal[0]}; font-size: 25px`,
    `background-color: ${drapeauSenegal[1]}; color: ${drapeauSenegal[0]}; border: 1px solid ${drapeauSenegal[1]}; font-size: 25px`,
    `background-color: ${drapeauSenegal[2]}; border: 1px solid ${drapeauSenegal[2]}; font-size: 25px`
];

console.log('%c     ' + '%c  *  ' + '%c     ', styles[0], styles[1], styles[2]);

Sortie:

Conclusion

En tant que développeurs, nous n'utilisons souvent que la méthode log de l'objet console. J'espère qu'à partir de maintenant vous aussi vous allez utiliser l'objet console à son plein potentiel afin qu'il soit plus facile de déboguer et d'afficher les messages du navigateur de manière vivante. J'espère que ce blog vous a été utile 😉. Merci pour votre lecture!