una - ¿Cómo creo mensajes de registro de consola de JavaScript formateados?

mostrar variable javascript en html

Question

Me ''waddled'' por la consola en Chrome en Facebook hoy.
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 tipo de formato de fuente en la consola? (¿y es console.log?)

Answer 1

Desde el sitio web de Google: sitio

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

Answer 2

Prueba esto:

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

Citando los documentos,

Utiliza el especificador de formato% c para aplicar reglas de 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

Answer 3

También puede formatear subcadenas.

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

Answer 4

Sí, puede formatear 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 el %c precede al texto en el primer argumento y las especificaciones de estilo en el segundo argumento. El texto se verá como tu ejemplo.

Consulte la "Salida de la consola Styling 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, como incluir enlaces de objeto en un registro de consola.