Formatar e estilizar mensagens no console

Jecelyn yeen

Este guia mostra como formatar e estilizar mensagens no Console do Chrome DevTools. Consulte Introdução ao registro de mensagens para saber como registrar mensagens no console.

Este guia pressupõe que você compreende os fundamentos do desenvolvimento da Web, por exemplo, como usar JavaScript para adicionar interatividade a uma página.

Formatar mensagens do console

Use 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 (número inteiro, ponto flutuante etc.).

Por exemplo,

  1. Abra o console
  2. Digite o seguinte comando do console: js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. O comando acima produz a mensagem Chrome DevTools is awesome.. valor da string de formato

Veja a lista de especificadores de formato compatíveis com o Chrome DevTools atualmente.

Especificador Saída
%s Formata o valor como uma string
%i ou %d Formata o valor como um número inteiro
%f Formata o valor como um valor de ponto flutuante
%o Formata o valor como um elemento DOM expansível
%O Formata o valor como um objeto JavaScript expansível.
%c Aplica regras de estilo CSS à string de saída conforme especificado pelo segundo parâmetro

Aplicar vários especificadores de formato

Você pode usar mais de um especificador de formato em uma mensagem.

  1. Digite o seguinte comando do console: js 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.. vários especificadores de formato

Entender as conversões de tipo

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

  1. Digite o seguinte comando do console: js 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.. formatar valores inteiros
  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.

Veja um exemplo do que acontece quando a conversão de tipo é inválida.

  1. Digite o seguinte comando do console: js console.log('Jane has %i kiwis.', 'two');
  2. O comando acima produz a mensagem Jane has NaN kiwis.. NaN na mensagem do console
  3. O %i indica que o valor precisa/será convertido em um número inteiro, mas o argumento é uma string. Portanto, ela retorna NaN (Not-A-Number).

Definir o estilo das mensagens do console

Há duas maneiras de estilizar 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: js 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. saída de estilo com CSS

Estilo com sequências de escape ANSI

Use as sequências de escape ANSI para definir o estilo das mensagens do console.

Os desenvolvedores do Node.js costumam colorir as mensagens de registro usando sequências de escape ANSI, geralmente com a ajuda de algumas bibliotecas de estilo, como giz, cores, ansi-colors e kleur (links em inglês).

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

\x1B[𝘗1;…;𝘗nm

Em que,

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

Por exemplo,

  1. Digite o seguinte comando do console: js console.log('\x1B[41;93;4mHello\x1B[m');
  2. O comando acima produz uma mensagem Hello com plano de fundo vermelho, texto amarelo e sublinhado. Olá

Veja a seguir uma lista de códigos de cores com suporte no DevTools.

Primeiro plano Contexto Tema claro Tema escuro
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

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

Parâmetros Significado
0 Redefinir todos os atributos de exibição
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Adicionar underline à propriedade text-decoration
9 Adicionar line-through à propriedade text-decoration
22 Redefinir propriedade do font-weight
23 Redefinir propriedade do font-style
24 Remover underline da propriedade text-decoration
29 Remover line-through da propriedade text-decoration
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 Redefinir color property
48;2;R;G;B background: rgb(𝑅,𝐺,𝐵)
49 Redefinir background property
53 Adicionar overline à propriedade text-decoration
55 Remover overline da propriedade text-decoration

Confira outro exemplo mais complexo com vários estilos.

  1. Digite o seguinte comando do console. ```js const hello = '\x1B[41;93;4mHello'; const Space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    console.log(hello + espaço + world); ```

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