Mettre en forme et appliquer un style aux messages dans la console

Jecelyn Yeen

Ce guide vous explique comment mettre en forme les messages et leur appliquer un style dans la console des outils pour les développeurs Chrome. Consultez Premiers pas avec la journalisation des messages pour découvrir comment journaliser des messages dans la console.

Dans ce guide, nous partons du principe que vous connaissez les principes de base du développement Web, tels que l'utilisation de JavaScript pour ajouter de l'interactivité à une page.

Mettre en forme les messages de la console

Vous pouvez utiliser les spécificateurs de format pour mettre en forme les messages de la console.

Les spécificateurs de format commencent par un caractère de pourcentage (%) et se terminent par un "caractère de type" qui indique le type de données (entier, flottant, etc.).

Par exemple :

  1. Ouvrez la console
  2. Saisissez la commande de console suivante : js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. La commande ci-dessus génère le message Chrome DevTools is awesome.. format string value

Voici la liste des spécificateurs de format actuellement compatibles avec les outils pour les développeurs Chrome.

Spécificateur Sortie
%s Met en forme la valeur sous forme de chaîne
%i ou %d Met en forme la valeur sous la forme d'un nombre entier
%f Met en forme la valeur en tant que valeur à virgule flottante
%o Met en forme la valeur en tant qu'élément DOM extensible
%O Met en forme la valeur en tant qu'objet JavaScript extensible
%c Applique les règles de style CSS à la chaîne de sortie comme spécifié par le deuxième paramètre

Appliquer plusieurs spécificateurs de format

Vous pouvez utiliser plusieurs spécificateurs de format dans un message.

  1. Saisissez la commande de console suivante : js console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
  2. La commande ci-dessus génère le message The total weight of 3 apples and 2 oranges is 432.4 grams.. plusieurs spécificateurs de format

Comprendre les conversions de type

Le message de sortie sera converti selon le spécificateur de format.

  1. Saisissez la commande de console suivante : js console.log('I have %i apples and %d oranges.', 2, 3.5);
  2. La commande ci-dessus génère le message I have 2 apples and 3 oranges.. formater des valeurs entières
  3. Au lieu d'enregistrer 3.5 oranges, la sortie est 3 oranges. %d indique que la valeur doit ou sera convertie en entier.

Voici un exemple de ce qui se passe si la conversion de type n'est pas valide.

  1. Saisissez la commande de console suivante : js console.log('Jane has %i kiwis.', 'two');
  2. La commande ci-dessus génère le message Jane has NaN kiwis.. NaN dans le message de la console
  3. %i indique que la valeur doit ou sera convertie en entier, mais l'argument est une chaîne. Il renvoie donc NaN (Not-A-Number).

Messages de la console de style

Il existe deux façons d'appliquer un style aux messages de la console dans les outils de développement.

Style avec spécificateur de format

Vous pouvez utiliser le spécificateur de format %c pour styliser les messages de la console avec CSS.

  1. Saisissez la commande de console suivante : js const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
  2. La commande ci-dessus génère Hooray avec des styles CSS appliqués. style de sortie avec CSS

Appliquer un style avec des séquences d'échappement ANSI

Vous pouvez utiliser les séquences d'échappement ANSI pour appliquer un style aux messages de la console.

Les développeurs Node.js ont tendance à colorer les messages de journal via des séquences d'échappement ANSI, souvent à l'aide de bibliothèques de styles comme chalk, colors, ansi-colors et kleur.

Néanmoins, vous pouvez appliquer un style au message avec des séquences d'échappement ANSI sans utiliser de bibliothèque. Voici la syntaxe:

\x1B[𝘗1;…;𝘗nm

Où :

  • 𝘗1 à 𝘗n sont des sous-séquences valides des paramètres SGR (Select Graphic Rendition).
  • Tous les paramètres 𝘗1 à 𝘗n peuvent être omis, auquel cas sa valeur est considérée comme étant égale à zéro.
  • \x1B[m est le raccourci de \x1B[0m, dans lequel l'attribut display sera réinitialisé.

Par exemple :

  1. Saisissez la commande de console suivante : js console.log('\x1B[41;93;4mHello\x1B[m');
  2. La commande ci-dessus génère un message Hello souligné en rouge et en jaune. Bonjour

Voici la liste des codes couleur acceptés dans les outils de développement.

Premier plan Contexte Thème clair Thème sombre
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
N° 55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
N° 55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

Voici une liste des codes de style pris en charge dans les outils de développement.

Paramètre(s) Signification
0 Réinitialiser tous les attributs d'affichage
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Ajouter underline à la propriété text-decoration
9 Ajouter line-through à la propriété text-decoration
22 Réinitialiser la propriété font-weight
23 Réinitialiser la propriété font-style
24 Supprimer underline de la propriété text-decoration
29 Supprimer line-through de la propriété text-decoration
38;2;R;V;B color: rgb(𝑅,𝐺,𝐵)
39 Réinitialiser color property
48;2;R;V;B background: rgb(𝑅,𝐺,𝐵)
49 Réinitialiser background property
53 Ajouter overline à la propriété text-decoration
55 Supprimer overline de la propriété text-decoration

Voici un autre exemple plus complexe impliquant plusieurs styles.

  1. Saisissez la commande de console suivante. ```js const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    console.log(hello + space + world); ```

  2. La commande ci-dessus génère un message Hello World avec trois styles différents. Hello World