Comment styler le contenu de console.log dans Chrome DevTools

Découvrez comment la sortie de console.log peut être stylée dans DevTools à l'aide du spécificateur de format CSS. Nous aborderons également la manipulation des couleurs et des polices de sortie de console.log.

La console est une partie très utile de tout processus de développement. Nous l'utilisons pour enregistrer des éléments pour diverses raisons, pour afficher des données, pour conserver certaines données en vue d'une utilisation ultérieure, etc. En conséquence, il est normal que nous trouvions le moyen de lui donner une apparence attrayante, étant donné la constante interaction que nous entretenons avec elle directement et indirectement.

Dans cet article, nous allons montrer comment appliquer les styles lorsque enregistrer des éléments sur la console. Nous espérons que d'ici la fin de cet article, vous aurez appris tout ce que vous devez savoir pour styler le contenu de votre console. Sans plus tarder, commençons par enregistrer un simple «Hello World!» Et y appliquer des styles.

Spécificateur de format

Avant d’y plonger, prenons un moment pour comprendre comment cela fonctionne. Les spécificateurs de format contiennent le symbole % suivi d'une lettre spécifiant le type de formatage devant s'appliquer à la valeur.

Nous pouvons transmettre des propriétés en tant que second paramètre pour effectuer des modifications sur la chaîne (console message) dans l'ordre respectif ou pour insérer des valeurs dans la chaîne de sortie.

Liste des spécificateurs de format CSS et de leurs sorties respectives.

Syntaxe [19659005] Pour ajouter un style CSS à la sortie de la console, nous utilisons le spécificateur de format CSS % c . Nous commençons ensuite le message de la console, qui est généralement une chaîne avec le spécificateur suivi du message que nous avons l'intention de consigner, et enfin les styles que nous voulons appliquer au message:

 console .  log  ( "% cIl s'agit d'un texte vert"   "couleur: vert" ) ; 

Nous avons utilisé ici le % c spécificateur de format pour déclarer que nous appliquerons des styles CSS à la sortie de la console, nous avons écrit une chaîne que nous aimerions imprimer sur la console et, enfin, nous avons défini l'effet CSS que nous souhaitons appliquer à la console. Chaîne. Si nous vérifions maintenant la console, nous devrions obtenir la chaîne imprimée en vert.

Ajout de couleurs au contenu de la console

Par défaut, certaines méthodes de la console telles que console.warn () et console.error () enregistrent le contenu avec certaines différences de couleur pour attirer l'attention. aux messages importants pour l'utilisateur. Voyons comment nous pouvons reproduire cette fonctionnalité dans nos messages habituels console.log () . Comme nous l'avons montré dans l'exemple de syntaxe, nous pouvons ajouter des couleurs aux textes de la console en utilisant le spécificateur % c comme suit:

 console .  log  [[19659027] "% cIl s'agit d'un texte vert"   "couleur: vert" ) ; 

console .  log  ( "% cIl s'agit d'un texte bleu"   "couleur: bleu" ) ; 

console .  log  ( "% cIl s'agit d'un texte jaune"   "couleur: jaune" ) ; 

console .  log  ( "% cIl s'agit d'un texte en rouge"   "couleur: rouge" ) ; 

Ceci imprimera tous les textes que nous avons écrits sur la console dans leurs styles de couleur spécifiés, comme ceci:

Modification des polices de sortie de la console

De la même manière que nous avons appliqué les styles de couleur du texte à la sortie de la console, nous pouvons plus ou moins appliquer tous les styles CSS à la sortie. En développement et peut-être à des fins de débogage, nous aurons peut-être besoin d'imprimer des contenus similaires sur la console, mais nous aurons besoin d'un moyen de les différencier. Dans l'exemple précédent, nous avons modifié les couleurs du texte. voyons comment nous pouvons changer les polices.

 console .  log  ( "% cC'est un style de police par défaut"  "couleur: bleu ; font-size: 20px ") ; 

console .  log  ( "% cC'est un style de police personnalisé"  "couleur: bleu; police-famille: serif; taille de police: 20px" [19659026]) ; 

console .  log  ( "% cC'est un style de police personnalisé"  "couleur: bleu; famille de polices: monospace; taille de police: 20px" [19659026]) ; 

console .  log  ( "% cC'est un style de police personnalisé"  "couleur: bleu; police de la famille: sans-serif; taille de la police: 20px ") ; 

Si nous collons ce code dans la console et l'exécutons, nous obtiendrons le résultat suivant:

Nous avons maintenant quatre lignes de texte de même couleur, mais différents styles de police. Cela montre que nous pouvons appliquer autant de style que nous le souhaitons à la sortie de la console pour produire l’effet souhaité. Certaines personnes vont même jusqu'à appliquer des animations à la console. Bien que cela dépasse le cadre de cet article, il est bon de savoir que nous pouvons faire beaucoup avec la console.

Style de console étendu

Etant donné que nous pouvons étendre notre style de console au-delà du changement de polices et de couleurs, il est naturel que nous vous montrons comment prendre votre style d'un cran. Ici, nous allons vous montrer comment créer un texte ressemblant à un arc-en-ciel dans la console en combinant des couleurs et en utilisant des styles CSS tels que poids de la police, taille de la police, ombre du texte, couleurs, etc. pour générer le code:

 console .  log  ( '% c JavaScript !!'   'taille de la police de caractères: gras; taille de la police: 50 pixels; couleur: rouge; ombre du texte: 3px 3px 0 rgb (217,31,38), 6px 6px 0 rgb (226,91,14), 9px 9px 0 rgb (245,221,8), 12px 12px 0 rgb (5,148,68), 15px 15px 0 rgb (2.115.206) ), 18px 18px 0 rgb (4,77,145), 21px 21px 0 rgb (42,21,113) ') ; 

Ainsi, lorsque nous vérifions le code dans la console, nous devrions pouvoir récupérez cette sortie:

Conclusion

Dans cet article, nous avons montré comment styliser le contenu de la console à l'aide du spécificateur de contenu % c . Nous avons également procédé au stylage du contenu de la console avec des couleurs et du contenu. Nous sommes même allés plus loin en démontrant un style plus étendu pour montrer davantage de choses que nous pouvons faire avec la console. Pour en savoir plus sur la console et sur le nombre de styles que vous pouvez lui appliquer, n'hésitez pas à consulter la documentation officielle .