Formattare e applicare stili ai messaggi nella console

Jecelyn Yeen

Questa guida mostra come formattare e applicare stili ai messaggi nella console Chrome DevTools. Consulta la Guida introduttiva ai messaggi di Logging per scoprire come registrare i messaggi nella console.

Questa guida presuppone la conoscenza delle nozioni di base dello sviluppo web, ad esempio l'utilizzo di JavaScript per aggiungere interattività a una pagina.

Formattare i messaggi della console

Puoi utilizzare gli specificatori di formato per formattare i messaggi della console.

I parametri di formato iniziano con un carattere percentuale (%) e terminano con un "carattere di tipo" che indica il tipo di dati (intero, decimale e così via).

Ad esempio,

  1. Apri la console

  2. Inserisci il seguente comando della console.

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

  3. Il comando riportato sopra genera il messaggio Chrome DevTools is awesome.. Valore della stringa di formato

Ecco l'elenco degli specificatori di formato attualmente supportati da Chrome DevTools.

Specificatore Output
%s Formatta il valore come stringa
%i o %d Formatta il valore come numero intero
%f Formatta il valore come valore con virgola mobile
%o Formatta il valore come elemento DOM espandibile
%O Formatta il valore come oggetto JavaScript espandibile
%c Applica le regole di stile CSS alla stringa di output come specificato dal secondo parametro

Applicare più specificatori di formato

In un messaggio puoi utilizzare più di un formato specificatore.

  1. Inserisci il seguente comando della console.

    console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);

  2. Il comando riportato sopra genera un messaggio The total weight of 3 apples and 2 oranges is 432.4 grams.. più specificatori di formato

Informazioni sulle conversioni di tipo

Il messaggio di output verrà convertito in base allo specificatore del formato.

  1. Inserisci il seguente comando della console.

    console.log('I have %i apples and %d oranges.', 2, 3.5);

  2. Il comando riportato sopra genera il messaggio I have 2 apples and 3 oranges.. formattare i valori interi

  3. Anziché registrare 3.5 oranges, l'output è 3 oranges. %d indica che il valore deve/verrà convertito in un numero intero.

Ecco un esempio di cosa succede se la conversione del tipo non è valida.

  1. Inserisci il seguente comando della console.

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

  2. Il comando riportato sopra genera il messaggio Jane has NaN kiwis.. NaN nel messaggio della console

  3. %i indica che il valore deve/verrà convertito in un numero intero, ma l'argomento è una stringa. Pertanto, restituisce NaN (Not-A-Number).

Applicare stili ai messaggi della console

Esistono due modi per applicare uno stile ai messaggi della console in DevTools.

Stile con specificatore di formato

Puoi utilizzare lo specificatore di formato %c per applicare uno stile ai messaggi della console con CSS.

  1. Inserisci il seguente comando della console.

    const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);

  2. Il comando riportato sopra produce Hooray con gli stili CSS applicati. personalizza l'output con CSS

Stile con sequenze di escape ANSI

Puoi utilizzare le sequenze di escape ANSI per applicare stili ai messaggi della console.

È comune per gli sviluppatori di Node.js colorare i messaggi di log tramite sequenze di escape ANSI, spesso con l'aiuto di alcune librerie di stili come chalk, colors, ansi-colors, kleur.

Tuttavia, puoi applicare uno stile al messaggio con le sequenze di escape ANSI senza utilizzare librerie. Ecco la sintassi:

\x1B[𝘗1;…;𝘗nm

Dove,

  • 𝘗1 a 𝘗n sono sottosequenze valide dei parametri SGR (Select Graphic Rendition).
  • Qualsiasi parametro da 𝘗1 a 𝘗n può essere omesso, nel qual caso si presume che il relativo valore sia zero.
  • \x1B[m è l'abbreviazione di \x1B[0m, in cui l'attributo di visualizzazione verrà reimpostato.

Ad esempio,

  1. Inserisci il seguente comando della console.

    console.log('\x1B[41;93;4mHello\x1B[m');

  2. Il comando riportato sopra genera un messaggio Hello con sfondo rosso, testo giallo e sottolineato. Ciao

Ecco un elenco dei codici colore supportati in DevTools.

Primo piano Sfondo Tema chiaro Tema scuro
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

Di seguito è riportato un elenco del codice di stile supportato in DevTools.

Parametro o parametri Significato
0 Reimpostare tutti gli attributi di visualizzazione
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Aggiungere underline alla proprietà text-decoration
9 Aggiungi line-through alla proprietà text-decoration
22 Reimposta la proprietà font-weight
23 Reimposta proprietà font-style
24 Rimuovi underline dalla proprietà text-decoration
29 Rimuovi line-through dalla proprietà text-decoration
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 Reimposta color property
48;2;𝑅;𝐺;𝐵 background: rgb(𝑅,𝐺,𝐵)
49 Reimposta background property
53 Aggiungere overline alla proprietà text-decoration
55 Rimuovi overline dalla proprietà text-decoration

Ecco un altro esempio più complesso con stili multipli.

  1. Inserisci il seguente comando della console.

    const hello = '\x1B[41;93;4mHello';
const space = '\x1B[m ';
const world = '\x1B[34;102;9mWorld';

console.log(hello + space + world);

  2. Il comando riportato sopra genera un messaggio Hello World con tre stili diversi. Hello World