¿Cómo creo mensajes de registro de la consola javascript formateados?

91

Hoy me paseé por la consola en Chrome en Facebook.
Sorprendentemente recibí este mensaje en la consola.

Ahora mi pregunta es:
¿Cómo es esto posible?
Sé que hay algunos métodos de 'explotación' para la consola, pero ¿cómo se puede hacer ese formato de fuente en la consola? (¿y es console.log?)

Anders Kjeldsen
fuente

Respuestas:

131

Sí, puede formatear el console.log()con algo como esto:

console.log("%cExtra Large Yellow Text with Red Background", "background: red; color: yellow; font-size: x-large");

Tenga en cuenta lo que %cprecede al texto en el primer argumento y las especificaciones de estilo en el segundo argumento. El texto se verá como su ejemplo.

Consulte la "Salida de la consola de estilo con CSS" de Google o la Documentación de la consola de FireBug para obtener más detalles.

Los enlaces de documentación también incluyen algunos otros trucos interesantes, como incluir enlaces de objetos en un registro de consola.

Dallas
fuente
Es posible que desee verificar que se esté utilizando un navegador compatible antes de intentar usar cadenas de formato console.log, ya que los navegadores más antiguos pueden detener su script con una excepción. caniuse dice que se introdujo en Firefox 9 y Edge 79; Chrome comenzó a admitirlo, evidentemente, algún tiempo antes de Chrome 83, pero no sabemos exactamente cuándo.
Silas S. Brown
38

Prueba esto:

console.log("%cThis will be formatted with blue text", "color: blue");

Citando los documentos,

Utilice el especificador de formato% c para aplicar reglas CSS personalizadas a cualquier cadena que escriba en la consola con console.log () o métodos relacionados.

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

difuminar
fuente
7
Hola votante negativo, ¿algún comentario para agregar? - Es difícil mejorar una respuesta (que crees que no es buena) cuando no dejas comentarios que te expliquen. :)
Blurfus
30

También puede formatear subcadenas.

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

ingrese la descripción de la imagen aquí

Krzysztof Boduch
fuente
4
Tenga en cuenta que solo es posible aplicar estilo dentro del primer argumento de console.logy los estilos deben seguir inmediatamente.
Qwerty
9

Desde el sitio web de Google: sitio

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