Como faço para criar mensagens de log do console javascript formatadas

91

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?)

Anders Kjeldsen
fonte

Respostas:

131

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.

Dallas
fonte
Você pode querer verificar se um navegador compatível está em uso antes de tentar usar strings de formato no 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.
Silas S. Brown
38

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.

Fonte: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

blurfus
fonte
7
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
30

Você também pode formatar substrings.

var red = 'color:red';
var blue = 'color:blue';
console.log('%cHello %cWorld %cfoo %cbar', red, blue, red, blue);

insira a descrição da imagem aqui

Krzysztof Boduch
fonte
4
Observe que só é possível estilizar dentro do primeiro argumento de console.loge os estilos devem seguir imediatamente.
Qwerty
9

Do site do Google: site

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
Jonathan
fonte