Cómo puedo crear mensajes de registro de consola javascript formateados


Yo '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 'exploit' para la consola, pero ¿cómo se puede hacer tal formato de fuente en la consola? (y es la consola.¿tronco?)

Author: smerny, 2014-03-03

4 answers

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

Ver "Styling Console Output with CSS"de Googleo La documentación de la consola de FireBug para más detalles.

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

 96
Author: smerny,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-05 16:12:28

Prueba esto:

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

Citando los documentos,

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

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

 22
Author: ochi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-06 18:03:11

También puede formatear subcadenas.

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

introduzca la descripción de la imagen aquí

 13
Author: Krzysztof Boduch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-24 11:28:59

Desde el sitio web de Google: sitio

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
 7
Author: Jonathan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-06 18:11:17