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.

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

3. Il comando riportato sopra produce il messaggio Chrome DevTools is awesome..

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

Applicare più identificatori di formato

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

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 produce 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'indicatore di 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 produce il messaggio I have 2 apples and 3 oranges..

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.

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

2. Il comando riportato sopra produce il messaggio Jane has NaN kiwis..

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.

   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.

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.

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

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

Ecco un elenco dei codici di colore supportati in DevTools.

Ecco un elenco del codice di stile supportato in DevTools.

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 produce un messaggio Hello World con 3 stili diversi.