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

Jecelyn Yeen

Ce guide vous explique comment mettre en forme et personnaliser le style des messages dans la console des outils pour les développeurs Chrome. Pour savoir comment consigner des messages dans la console, consultez la section Premiers pas avec la journalisation des messages.

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

Mettre en forme les messages de la console

Vous pouvez mettre en forme les messages de la console à l'aide des spécificateurs de format.

Les indicateurs 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 de valeur de la chaîne

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 Formate la valeur sous la forme d'un nombre entier
%f Formate 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 des 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 types

Le message de sortie sera converti conformément au 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 de consigner 3.5 oranges, la sortie est 3 oranges. %d indique que la valeur doit/sera convertie en entier.

Voici un exemple de ce qui se passe lorsque 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/sera convertie en entier, mais l'argument est une chaîne. Il renvoie donc NaN (Not-A-Number).

Définir le style des messages de la console

Il existe deux façons de styliser les 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 appliquer un style aux messages de la console en 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

Style avec séquences d'échappement ANSI

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

Il est courant pour les développeurs Node.js de colorer les messages de journal via des séquences d'échappement ANSI, souvent à l'aide de certaines bibliothèques de styles telles que craie, colors, ansi-colors et kleur.

Vous pouvez néanmoins appliquer un style au message avec des séquences d'échappement ANSI sans utiliser de bibliothèques. 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 pour 𝘗n peuvent être omis. Dans ce cas, sa valeur est considérée comme étant égale à zéro.
  • \x1B[m est le raccourci de \x1B[0m, dans lequel l'attribut d'affichage 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 avec un arrière-plan rouge, du texte jaune et souligné. 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
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

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

Paramètre(s) Signification
0 Réinitialiser tous les attributs à afficher
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 avec 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