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 do 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 compatíveis com o 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 do 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 do 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 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 do 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 definir o estilo das mensagens do console no DevTools.

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 do 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 do 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 nas Ferramentas do desenvolvedor.

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 do 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.