JavaScript

Como adicionar cor as mensagens do console.log

29 de junho de 2021

Como adicionar cor as mensagens do console.log

Neste artigo você vai aprender a como adicionar cor as mensagens do console.log, que é exibido no navegador, customizando ele

adicionar cor as mensagens do console capa

Fala programador(a), beleza? Bora aprender mais sobre customização no console.log!

Para mudar a cor do console.log será necessário enviar mais um argumento a função

O primeiro será o texto que queremos exibir, da mesma forma que já estamos acostumados a fazer

Veja o exemplo:

console.log("Hello World!");

E em seguida colocaremos um outro parâmetro de texto, porém este será com propriedades de cor

Estas propriedades são idênticas as do CSS:

  • color: para mudar a cor;
  • background: para mudar a cor de fundo;

Podemos enviar valores hexadecimais para representar a cor!

Veja um exemplo de console.log customizado:

console.log("%cHello World!", "background: #000; color: #FFF");

Neste exemplo aqui alteramos a cor de fundo para preto (#000) e a de texto para branco (#FFF)

Invertendo o que já é exibido por padrão, legal né? 😀

Conclusão

Neste artigo aprendemos a como adicionar cor as mensagens do console com JS puro

Alteramos a cor e a cor de fundo do console.log, passamos um segundo parâmetro, após o texto que é passado para a função

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
4 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Diego Rodrigues Góes

Estranho, não consegui ver nada de diferente quando eu testei…

Battisti

opa Diego, acredito que no Chrome vc consegue reproduzir…

dziul

Esqueceu de add o %c no inicio da mensagem

console.log("%cHello World!", "background: #000; color: #FFF");
Battisti

opa valeuu, já ajustei =)

4
0
Would love your thoughts, please comment.x