Olá, Web Developers!
Muitos aqui sabem que os navegadores possuem console e que podemos executar o comando console.log() para imprimir mensagens e objetos, o que nos ajuda muito na hora de fazer debug.
Curso
React - Despertando o Poder dos Hooks
Conhecer o curso
Porém, quando entramos em sites como, por exemplo, o Facebook e abrimos o console, podemos ver a seguinte mensagem:
Muitas pessoas não sabem, mas as mensagens do console podem ser estilizadas em alguns navegadores. Para o exemplo a seguir, abra o console em seu computador e clique na aba Result:
Você terá o seguinte resultado:
Para poder estilizar as mensagens do console, basta colocar %c junto ao texto que você está passando para o comando console.log() (ou qualquer outra função que imprima algo no console, como console.warn()). Em seguida, basta passar a estilização como um segundo parâmetro. Ela é feita via CSS mesmo:
console.log('%c Meu Texto','color: white; background-color: red;');
Mas, já que estamos falando de CSS, que tal também imprimir uma imagem?
No console, execute o seguinte comando:
console.log('%c', 'padding: 40px 45px;line-height:100px;background:url("http://i65.tinypic.com/dnixjm.png") no-repeat;background-size: cover;');
Você terá o seguinte resultado:
Ok, mas o console é mais para debug. Por que eu usaria isso?
Um cenário é quando a sua equipe usa muito o console para monitorar algo durante o desenvolvimento e deixa várias mensagens sendo impressas. Poder formatá-las, colocar imagens, etc, pode ajudar a deixá-lo mais organizado, facilitando a leitura dos conteúdos impressos. Mas há de se ter cautela, pois muitas mensagens sendo impressas com o console aberto podem afetar a performance da sua página e isso vai te atrapalhar no processo de desenvolvimento.
Um ótimo caso é fazer algo parecido com o Facebook. Se há possibilidade dos seus usuários abrirem o console para tentar algo, você pode chamar a atenção deles avisando que eles mesmos podem estar correndo algum tipo de risco.
O terceiro motivo é quando a intenção é exatamente fazer com que o usuário abra o console para usá-lo. Quando você entra no site da biblioteca RxJS e abre o console, você é recebido com uma simples mensagem dizendo que você pode experimentar os códigos da biblioteca diretamente por ele. Nesse caso, você poderia receber o usuário com o logo do seu projeto e uma mensagem com uma formatação simples (se o navegador dele suportar).
E aí, o que achou? Já usou essa funcionalidade? Compartilhe com a gente aí nos comentários!
