Formattare e applicare stili ai messaggi nella console

Jecelyn Yeen

Questa guida mostra come formattare e applicare uno stile ai messaggi nella console DevTools di Chrome. 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 come utilizzare JavaScript per aggiungere interattività a una pagina.

Formattare i messaggi della console

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

Gli indicatori di formato iniziano con un carattere percentuale (%) e terminano con un "carattere di tipo" che indica il tipo di dati (numero intero, numero in virgola mobile e così via).

Ad esempio,

  1. Apri la console
  2. Inserisci il seguente comando della console. js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. Il comando riportato sopra genera un messaggio Chrome DevTools is awesome.. formatta valore stringa

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

Indicatore parzialmente impostato
%s Formatta il valore come stringa
%i o %d Formatta il valore come numero intero
%f Formatta il valore come valore in 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ù identificatori di formato

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

  1. Inserisci il seguente comando della console. js 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ù identificatori di formato

Informazioni sulle conversioni dei tipi

Il messaggio di output verrà convertito in base all'indicatore di formato.

  1. Inserisci il seguente comando della console. js console.log('I have %i apples and %d oranges.', 2, 3.5);
  2. Il comando riportato sopra genera un messaggio I have 2 apples and 3 oranges.. formattare valori interi
  3. Invece di registrare 3.5 oranges, l'output è 3 oranges. Il valore %d indica che il valore deve/sarà convertito in un numero intero.

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

  1. Inserisci il seguente comando della console. js console.log('Jane has %i kiwis.', 'two');
  2. Il comando riportato sopra genera un messaggio Jane has NaN kiwis.. NaN nel messaggio della console
  3. %i indica che il valore dovrebbe/sarà convertito in un numero intero, ma l'argomento è una stringa. Pertanto, restituisce NaN (Not-A-Number).

Applica stile ai messaggi della console

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

Stile con indicatore di formato

Puoi utilizzare l'indicatore di formato %c per definire lo stile dei messaggi della console con CSS.

  1. Inserisci il seguente comando della console. js 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 genera Hooray con gli stili CSS applicati. output di stile con CSS

Stile con sequenze di escape ANSI

Puoi utilizzare le sequenze di escape ANSI per definire lo stile dei messaggi della console.

Di solito gli sviluppatori Node.js colorano i messaggi di log tramite sequenze di escape ANSI, spesso con l'aiuto di alcune librerie di stili come chalk, colors, ansi-colors e kleur.

Tuttavia, puoi definire lo stile del messaggio con sequenze di escape ANSI senza utilizzare alcuna libreria. Ecco la sintassi:

\x1B[𝘗1;…;𝘗nm

Dove,

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

Ad esempio,

  1. Inserisci il seguente comando della console. js 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 di colore supportati in DevTools.

Primo piano Contesto 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

Ecco un elenco del codice di stile supportato in DevTools.

Parametri Significato
0 Reimposta tutti gli attributi di visualizzazione
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Aggiungi underline alla proprietà text-decoration
9 Aggiungi line-through alla proprietà text-decoration
22 Reimposta la proprietà font-weight
23 Reimposta la proprietà font-style
24 Rimuovi underline dalla proprietà text-decoration
29 Rimuovi line-through dalla proprietà text-decoration
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 Reimposta color property
48;2;R;G;B background: rgb(𝑅,𝐺,𝐵)
49 Reimposta background property
53 Aggiungi 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. ```js const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    console.log(ciao + spazio + mondo); ```

  2. Il comando riportato sopra produce un messaggio Hello World con 3 stili diversi. Hello World