Name: Tremplin Numérique
Price range: $$$

Illustration montrant les instructions de journal de la console JavaScript

Les développeurs JavaScript sont familiers avec les humbles console.log() fonction. Bien que la journalisation de la console puisse sembler simple, il y a beaucoup plus de disponible dans le console objet. Voyons comment vous pouvez améliorer vos messages de journal avec un formatage avancé.

Sommaire

Les bases

Récapitulons les fonctions de la console les plus utilisées:

console.log(data, ...args) – Journaux data à la console. Tous les autres arguments passés seront également émis sur la même ligne.
console.info(data, ...args) – Équivalent à console.log() mais normalement avec une mise en forme accentuée – Chrome, par exemple, ajoute un arrière-plan bleu et une icône d’information «i».
console.error(data ...args) – Le même que console.log(), sauf que la sortie est dirigée vers le stderr (erreur) flux. La plupart des navigateurs mettent automatiquement en forme la sortie avec un fond rouge pour indiquer qu’une erreur s’est produite.
console.warn(data, ...args) – Le même que console.error(), sauf qu’un fond jaune est normalement appliqué pour indiquer l’état d’avertissement le moins grave.

Spécificateurs de format

Les développeurs ne transmettent généralement qu’un seul argument aux commandes ci-dessus. Néanmoins, ils acceptent tous plusieurs arguments, qui sont automatiquement concaténés dans la sortie finale.

Vous pouvez également utiliser des arguments avec printf-spécificateurs de format compatibles définis par une chaîne dans data:

const value = 10;
const available = "available";
console.log("There are %d options", value, available);
// Logs "There are 10 options available"

Les spécificateurs de format disponibles sont les suivants:

%s – Mettre en forme sous forme de chaîne.
%i – Mettre en forme comme un entier.
%f – Mettre en forme une valeur à virgule flottante.
%O – Mettre en forme comme un objet JavaScript.
%o – Formater comme un élément DOM.
%c – Format comme une règle CSS, qui est appliquée à la ligne de journal émise.

La prise en charge des deux derniers varie selon le moteur JavaScript. Ils sont disponibles dans les navigateurs modernes mais pas nécessairement dans d’autres contextes d’exécution.

Ajout d’images

En utilisant le spécificateur de format CSS, il est possible d’inclure des images dans la sortie de la console! Cela fonctionne dans les navigateurs mais ne sera pas pris en charge dans les environnements CLI tels que Node.js.

const css = [
    "background-image: url(https://example.com)",
    "background-size: cover",
    "height: 100px",
    "padding: 15px",
    "width: 100px"
];
console.log("%cI'm An Image!", css.join(";"));

Nous détournons CSS ‘ background-image règle pour rendre l’image. Bien que cela puisse sembler léger, cela pourrait avoir des cas d’utilisation pratiques si votre débogage implique de travailler avec des images. Vous pouvez vérifier les images en cours de récupération sans les envoyer réellement sur la page.

Sortie tabulée

JavaScript inclut une prise en charge intégrée pour l’émission de données tabulées vers la console. Utilisation console.table() avec un tableau d’objets uniformes. Les en-têtes de colonne seront déterminés automatiquement, en fonction des propriétés communes à chaque objet.

const objects = [{a: 1, x: "a"}, {a: 2, x: "b"}];
console.table(objects);

Cela peut être extrêmement utile lorsque vous travaillez avec des objets en masse. Au lieu d’avoir à parcourir un tableau et à appeler console.log() avec chaque article, il suffit d’utiliser console.table() et profitez de la sortie formatée automatiquement.

Sortie conditionnelle

Vous pouvez utiliser le console.assert() fonction pour conditionner la sortie sur la valeur d’une expression. Cela réduit le code que vous devez écrire par rapport au préfacé d’un console.log() avec un if déclaration.

Votre message ne sera enregistré que si l’expression évalue false. Une expression valorisant true n’entraînera aucune émission.

console.assert(true, "I never appear");
 
console.assert(false, "I will be logged");

La console.assert() n’affecte pas le temps d’exécution. Aucune erreur ne sera générée si l’assertion échoue; votre expression est utilisée uniquement pour déterminer s’il faut se connecter à la console.

Groupes de messages

Vous pouvez regrouper visuellement des sections de sortie avec console.group(). Cela appliquera un retrait automatique aux lignes suivantes en utilisant un nombre prédéfini d’espaces.

Pour fermer le groupe, appelez console.groupEnd(). Cela restaure l’indentation précédente.

Vous pouvez appeler console.group() plusieurs fois avant console.groupEnd() pour créer une sortie profondément imbriquée. console.groupEnd() annule l’indentation d’une étape à la fois, vous devrez donc faire correspondre le nombre de group() et groupEnd() appels avant de revenir au niveau par défaut.

Compteurs

Utilisation console.count(label) pour créer un compteur interne avec un nom donné:

console.count("my-counter");
// my-counter: 1
console.count("my-counter");
// my-counter: 2

Cela vous donne un moyen simple d’émettre des valeurs incrémentielles. Vous n’êtes pas obligé de spécifier un nom – le default compteur sera utilisé automatiquement. Vous pouvez remettre les compteurs à 0 en utilisant console.countReset(label).

Minuteries

La console a une prise en charge intégrée de la synchronisation des opérations. Le temps écoulé est mesuré en millisecondes et émis en secondes (par exemple «1,234s»); il n’est pas garanti qu’il soit de haute précision.

console.time();
// ...some time later...
console.timeEnd();
// Emits the elapsed time ("1.234s")

Les minuteries prennent en charge les étiquettes facultatives de la même manière que les compteurs. Cela vous permet de gérer plusieurs minuteries simultanément lorsque vous chronométrez différents aspects de votre code.

Méthodes utilitaires

La console object inclut plusieurs méthodes utilitaires qui vous aident à gérer votre sortie.

console.clear() – Efface la console de toutes les sorties visibles. Les effets varieront selon l’environnement d’exécution.
console.dir(obj, options) – Émet une liste de toutes les paires propriété / valeur énumérables de l’objet obj. Vous pouvez personnaliser la profondeur de récursivité en utilisant le depth propriété du options objet.
console.trace() – Émet une trace de pile au point actuel de votre code, permettant un débogage simple du chemin d’exécution emprunté.

Il existe d’autres méthodes non standardisées qui dépendent du moteur. Un exemple est console.profile(), qui est largement disponible mais avec des implémentations différentes. Dans les navigateurs, il invoque généralement un profilage de haute précision pour vous aider à diagnostiquer les problèmes de performances.

Conclusion

Il y a beaucoup plus dans la console de JavaScript que la base console.log()! Prendre le temps d’apprendre les fonctions disponibles peut accélérer considérablement le débogage, en particulier lorsque vous travaillez avec des objets complexes ou des sorties rapides.

Les fonctionnalités disponibles dépendent du moteur JavaScript avec lequel vous travaillez. En règle générale, vous obtiendrez le style le plus avancé à partir d’un navigateur à jour, bien que Node.js prenne également en charge la plupart des techniques que nous avons décrites ici.