Formattare e applicare stili ai messaggi nella console

Jecelyn Yeen
Jecelyn Yeen
Twitter GitHub Homepage

Questa guida illustra 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 che tu conosca le 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 indicatori di formato per formattare i messaggi della console.

Gli identificatori di formato iniziano con un carattere percentuale (%) e terminano con un "carattere del tipo" che indica il tipo di dati (numero intero, 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 il messaggio Chrome DevTools is awesome.. formato stringa valore

Ecco l'elenco degli identificatori 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 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ù identificatori 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 il 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'identificatore 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 il messaggio I have 2 apples and 3 oranges.. formato valori interi
  3. Anziché registrare 3.5 oranges, l'output è 3 oranges. %d indica che il valore deve/sarà 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. js 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/sarà convertito in un numero intero, ma l'argomento è una stringa. Restituisce NaN (Not-A-Number).

Applicare uno stile ai messaggi della console

Esistono due modi per definire gli stili dei messaggi della console in DevTools.

Stile con specificatore di formato

Puoi utilizzare l'identificatore di formato %c per applicare uno stile ai 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. dell'output di stile con CSS

Applica stili con sequenze di escape ANSI

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

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

Tuttavia, puoi applicare stili al messaggio con sequenze di escape ANSI senza utilizzare alcuna libreria. La sintassi è la seguente:

\x1B[𝘗1;…;𝘗nm

Dove,

  • Da 𝘗1 a 𝘗n sono sottosequenze valide dei parametri SGR (Select Graphic Rendering).
  • Qualsiasi parametro da 𝘗1 a 𝘗n può essere omesso, nel qual caso il suo valore dovrebbe essere zero.
  • \x1B[m è la forma abbreviata di \x1B[0m, in cui l'attributo display 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. Buongiorno

Di seguito è riportato un elenco dei codici 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

Di seguito è riportato 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 più stili.

  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(hello + spazio + mondo); ```

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