Eu 'gaguejei' pelo Console no Chrome no Facebook hoje.
Surpreendentemente, recebi esta mensagem no console.
Agora minha pergunta é:
como isso é possível?
Eu sei que existem alguns métodos de 'exploração' para o console, mas como você pode fazer essa formatação de fonte no console? (e é console.log?)
Como faço para criar mensagens de log do console javascript formatadas
Respostas:
Sim, você pode formatar o console.log()com algo assim:
console.log("%cExtra Large Yellow Text with Red Background", "background: red; color: yellow; font-size: x-large");Observe o %ctexto anterior no primeiro argumento e as especificações de estilo no segundo argumento. O texto será semelhante ao seu exemplo.
Consulte "Saída do console de estilo com CSS" do Google ou a documentação do console do FireBug para obter mais detalhes.
Os links de documentação também incluem alguns outros truques legais, como incluir links de objetos em um log do console.
Experimente isto:
console.log("%cThis will be formatted with blue text", "color: blue");Citando os documentos,
Use o especificador de formato% c para aplicar regras CSS personalizadas a qualquer string que você gravar no console com console.log () ou métodos relacionados.
Olá downvoter, algum comentário a ser adicionado? - é difícil melhorar uma resposta (que você acha que não é boa) quando você não deixa comentários que se explicam. :)
—
blurfus
Você também pode formatar substrings.
var red = 'color:red';
var blue = 'color:blue';
console.log('%cHello %cWorld %cfoo %cbar', red, blue, red, blue);
Observe que só é possível estilizar dentro do primeiro argumento de
—
Qwerty
console.loge os estilos devem seguir imediatamente.
console.log, já que navegadores mais antigos podem interromper seu script com uma exceção. caniuse diz que foi introduzido no Firefox 9 e Edge 79; O Chrome começou a suportá-lo evidentemente algum tempo antes do Chrome 83, mas não sabemos exatamente quando.