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écifiants 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, virgule flottante, etc.).

Par exemple,

1. Ouvrez la console

2. Saisissez la commande de console suivante.

   const tools = 'Chrome DevTools';
   console.warn('%s is awesome.', tools);
   

3. La commande ci-dessus génère le message Chrome DevTools is awesome..

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

Appliquer plusieurs spécificateurs de format

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

1. Saisissez la commande de console suivante.

   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..

Comprendre les conversions de types

Le message de sortie sera converti en fonction du spécificateur de format.

1. Saisissez la commande de console suivante.

   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..

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.

   console.log('Jane has %i kiwis.', 'two');
   

2. La commande ci-dessus génère le message Jane has NaN kiwis..

3. %i indique que la valeur doit/sera convertie en entier, mais que l'argument est une chaîne. Elle renvoie donc NaN (n'est pas un nombre).

Styliser les messages de la console

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.

   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.

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

Vous pouvez utiliser les séquences d'échappement ANSI pour styliser les messages de 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.

Toutefois, vous pouvez styliser le 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).
• Vous pouvez omettre n'importe lequel des paramètres 𝘗1 à 𝘗n. Dans ce cas, sa valeur est supposée être nulle.
• \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.

   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, un texte jaune et un texte souligné.

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

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

Voici un autre exemple plus complexe avec plusieurs styles.

1. Saisissez la commande de console suivante.

   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.