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

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!