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:
- Apri la console
- Inserisci il seguente comando della console.
js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
- Il comando riportato sopra genera il messaggio
Chrome DevTools is awesome.
.
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.
- 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);
- Il comando riportato sopra genera il messaggio
The total weight of 3 apples and 2 oranges is 432.4 grams.
.
Informazioni sulle conversioni dei tipi
Il messaggio di output verrà convertito in base all'identificatore di formato.
- Inserisci il seguente comando della console.
js console.log('I have %i apples and %d oranges.', 2, 3.5);
- Il comando riportato sopra genera il messaggio
I have 2 apples and 3 oranges.
. - 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.
- Inserisci il seguente comando della console.
js console.log('Jane has %i kiwis.', 'two');
- Il comando riportato sopra genera il messaggio
Jane has NaN kiwis.
. %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.
- 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);
- Il comando riportato sopra genera
Hooray
con gli stili CSS applicati.
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:
- Inserisci il seguente comando della console.
js console.log('\x1B[41;93;4mHello\x1B[m');
- Il comando riportato sopra genera un messaggio
Hello
con sfondo rosso, testo giallo e sottolineato.
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.
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); ```
Il comando riportato sopra produce un messaggio
Hello World
con 3 stili diversi.