Conheça o Styled Logging, recurso para estilizar textos no Console que nasceu do plugin Firebug há 14 anos
A mensagem gigante de "PARE" no Developer Console do site TH AI Passport deixou muita gente curiosa; na verdade, trata-se do recurso Styled Logging, que existe desde a época do plugin Firebug, em 2012
Nos últimos dias, muitos internautas tailandeses podem ter se assustado ao abrir o Developer Console (a ferramenta para desenvolvedores escondida no navegador) ao acessar o TH AI Passport, site do governo, e encontrar a mensagem "PARE" em letras grandes e bem visíveis. Muitos só agora descobriram que o console pode exibir textos formatados de forma elegante assim, mas, na verdade, esse recurso está disponível para desenvolvedores há mais de uma década.
O recurso em questão se chama Styled Logging, que é a formatação de textos no Console usando CSS (a linguagem que define o estilo das páginas web) por meio do comando console.log, utilizando o identificador %c antes do texto, seguido dos valores de CSS, como cor da fonte, tamanho da fonte ou cor de fundo. Por exemplo: console.log("%cmensagem", "color: red; font-size: 20px;") — o texto exibido no console aparecerá imediatamente em vermelho e em tamanho grande.
Voltando a 2006, os navegadores ainda não tinham um Developer Console embutido como hoje. Joe Hewitt, ex-engenheiro de software da Netscape e cofundador do projeto Firefox, criou então o Firebug, um plugin adicional que permitia aos desenvolvedores depurar (encontrar e corrigir erros) sites diretamente no navegador. Mais tarde, em 2012, a versão 1.11 do Firebug adicionou o recurso Styled Logging por meio do %c, com suporte a múltiplos estilos de CSS em um mesmo log — o ponto de partida que tornou o recurso conhecido.
A partir daí, os principais navegadores passaram a incorporá-lo em suas próprias ferramentas. O Firefox incluiu os Styled Console Logs como ferramenta nativa desde a versão 31, em 2014, e Chrome, Edge e Safari também oferecem suporte. Atualmente, o %c já está definido como padrão internacional na WHATWG Console Specification.
No caso do site TH AI Passport, exibir uma mensagem de aviso em tamanho grande no console é uma técnica que os sites costumam usar para alertar usuários comuns a não colar códigos desconhecidos no console, pois podem ser enganados e acabar executando comandos maliciosos. Portanto, se você vir uma mensagem desse tipo, não precisa se assustar: basta não copiar códigos de lugar nenhum e colá-los seguindo instruções de estranhos para estar seguro.
Muitos tailandeses viram essa técnica pela primeira vez em um site do governo. Conhecer o Styled Logging ajuda a entender que as mensagens de aviso no console são uma medida de proteção contra golpistas que tentam induzir pessoas a colar códigos maliciosos, e não um problema ou algo fora do normal no site.