Formatar e estilizar mensagens no console

Jecelyn Yeen

Este guia mostra como formatar e estilizar mensagens no console do Chrome DevTools. Consulte Começar a registrar mensagens para saber como registrar mensagens no console.

Neste guia, pressupomos que você entende os princípios básicos do desenvolvimento da Web, como usar o JavaScript para adicionar interatividade a uma página.

Formatar mensagens do console

É possível usar os especificadores de formato para formatar as mensagens do console.

Os especificadores de formato começam com um caractere de porcentagem (%) e terminam com um "caractere de tipo" que indica o tipo de dados (inteiro, ponto flutuante etc.).

Por exemplo,

1. Abra o console

2. Digite o seguinte comando de console.

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

3. O comando acima produz a mensagem Chrome DevTools is awesome..

Confira a lista de especificadores de formato com suporte atual do Chrome DevTools.

Aplicar vários especificadores de formato

É possível usar mais de um especificador de formato em uma mensagem.

1. Digite o seguinte comando de console.

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

2. O comando acima produz a mensagem The total weight of 3 apples and 2 oranges is 432.4 grams..

Entender as conversões de tipos

A mensagem de saída será convertida de acordo com o especificador de formato.

1. Digite o seguinte comando de console.

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

2. O comando acima produz a mensagem I have 2 apples and 3 oranges..

3. Em vez de registrar 3.5 oranges, a saída é 3 oranges. O %d indica que o valor precisa/será convertido em um número inteiro.

Confira um exemplo do que acontece se a conversão de tipo for inválida.

1. Digite o seguinte comando de console.

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

2. O comando acima produz a mensagem Jane has NaN kiwis..

3. O %i indica que o valor precisa/será convertido em um número inteiro, mas o argumento é uma string. Assim, ele retorna NaN (Not-A-Number).

Estilo de mensagens do console

Há duas maneiras de estilizar mensagens do console nas Ferramentas do desenvolvedor.

Estilo com especificador de formato

É possível usar o especificador de formato %c para estilizar as mensagens do console com CSS.

1. Digite o seguinte comando de console.

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

2. O comando acima produz Hooray com estilos CSS aplicados.

Estilo com sequências de escape ANSI

É possível usar as sequências de escape ANSI para estilizar mensagens do console.

É comum que os desenvolvedores do Node.js colorifiquem mensagens de registro usando sequências de escape ANSI, geralmente com a ajuda de algumas bibliotecas de estilo, como chalk, colors, ansi-colors e kleur.

No entanto, é possível estilizar a mensagem com sequências de escape ANSI sem usar nenhuma biblioteca. Confira a sintaxe:

\x1B[𝘗1;…;𝘗nm

Em que,

• 𝘗1 a 𝘗n são subseqências válidas dos parâmetros SGR (Select Graphic Rendition).
• Qualquer um dos parâmetros 𝘗1 a 𝘗n pode ser omitido. Nesse caso, o valor é considerado zero.
• \x1B[m é a abreviação de \x1B[0m, em que o atributo de exibição será redefinido.

Por exemplo,

1. Digite o seguinte comando de console.

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

2. O comando acima produz uma mensagem Hello com fundo vermelho, texto amarelo e sublinhado.

Confira uma lista de códigos de cores aceitos no DevTools.

Confira uma lista de códigos de estilo com suporte no DevTools.

Confira outro exemplo mais complexo com vários estilos.

1. Digite o seguinte comando de console.

   const hello = '\x1B[41;93;4mHello';
   const space = '\x1B[m ';
   const world = '\x1B[34;102;9mWorld';
   
   console.log(hello + space + world);
   

2. O comando acima produz uma mensagem Hello World com três estilos diferentes.