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.. format string value

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

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

É 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.. vários especificadores de formato

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

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.. 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. 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. estilizar a saída com CSS

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. Olá

Confira uma lista de códigos de cores aceitos nas Ferramentas do desenvolvedor.

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âmetro(s) 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 a propriedade font-weight
23 Redefinir a propriedade font-style
24 Remover underline da propriedade text-decoration
29 Remover line-through da propriedade text-decoration
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 Redefinir color property
48;2;𝑅;𝐺;𝐵 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.

    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. Hello World