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,
- Ouvrez la console
Saisissez la commande de console suivante.
const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
La commande ci-dessus génère le message
Chrome DevTools is awesome.
.
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.
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);
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 type
Le message de sortie sera converti selon le spécificateur de format.
Saisissez la commande de console suivante.
console.log('I have %i apples and %d oranges.', 2, 3.5);
La commande ci-dessus génère le message
I have 2 apples and 3 oranges.
.Au lieu d'enregistrer
3.5 oranges
, la sortie est3 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.
Saisissez la commande de console suivante.
console.log('Jane has %i kiwis.', 'two');
La commande ci-dessus génère le message
Jane has NaN kiwis.
.%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.
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);
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 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,
Saisissez la commande de console suivante.
console.log('\x1B[41;93;4mHello\x1B[m');
La commande ci-dessus génère un message
Hello
souligné en rouge et en jaune.
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.
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);
La commande ci-dessus génère un message
Hello World
avec trois styles différents.