Asignar formato y estilo a los mensajes en Console

Jecelyn Yeen

En esta guía, se muestra cómo dar formato y estilo a los mensajes en la consola de Herramientas para desarrolladores de Chrome. Consulta Comienza a usar los mensajes de registro para obtener información sobre cómo registrar mensajes en la consola.

En esta guía, se da por sentado que comprendes los conceptos básicos del desarrollo web, como cómo usar JavaScript para agregar interactividad a una página.

Da formato a los mensajes de la consola

Puedes usar los especificadores de formato para dar formato a los mensajes de la consola.

Los especificadores de formato comienzan con un carácter de porcentaje (%) y terminan con un "carácter de tipo" que indica el tipo de datos (número entero, número de punto flotante, etc.).

Por ejemplo:

  1. Abrir Console

  2. Ingresa el siguiente comando de la consola.

    const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

  3. El comando anterior produce el mensaje Chrome DevTools is awesome.. valor de la cadena de formato

Esta es la lista de especificadores de formato que Chrome DevTools admite actualmente.

Especificador Salida
%s Aplica formato al valor como una cadena
%i o %d Establece el formato del valor como un número entero.
%f Establece el formato del valor como un valor de punto flotante.
%o Da formato al valor como un elemento de DOM expandible.
%O Da formato al valor como un objeto JavaScript expandible.
%c Aplica reglas de diseño CSS a la cadena de salida según lo especificado por el segundo parámetro.

Aplicar varios especificadores de formato

Puedes usar más de un especificador de formato en un mensaje.

  1. Ingresa el siguiente comando de la consola.

    console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);

  2. El comando anterior produce el mensaje The total weight of 3 apples and 2 oranges is 432.4 grams.. varios especificadores de formato

Comprende las conversiones de tipo

El mensaje de salida se convertirá según el especificador de formato.

  1. Ingresa el siguiente comando de la consola.

    console.log('I have %i apples and %d oranges.', 2, 3.5);

  2. El comando anterior produce el mensaje I have 2 apples and 3 oranges.. dar formato a valores de números enteros

  3. En lugar de registrar 3.5 oranges, el resultado es 3 oranges. El %d indica que el valor se debe convertir o se convertirá en un número entero.

Este es un ejemplo de lo que sucede si la conversión de tipo no es válida.

  1. Ingresa el siguiente comando de la consola.

    console.log('Jane has %i kiwis.', 'two');

  2. El comando anterior produce el mensaje Jane has NaN kiwis.. NaN en el mensaje de la consola

  3. El %i indica que el valor se debe convertir o se convertirá en un número entero, pero el argumento es una cadena. Por lo tanto, muestra NaN (no un número).

Diseña los mensajes de la consola

Hay dos formas de dar estilo a los mensajes de la consola en Herramientas para desarrolladores.

Aplica diseño con un especificador de formato

Puedes usar el especificador de formato %c para definir el estilo de los mensajes de la consola con CSS.

  1. Ingresa el siguiente comando de la consola.

    const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);

  2. El comando anterior produce Hooray con los estilos CSS aplicados. aplicar estilos al resultado con CSS

Estilo con secuencias de escape ANSI

Puedes usar las secuencias de escape ANSI para aplicar diseño a los mensajes de la consola.

Es común que los desarrolladores de Node.js coloreen los mensajes de registro con secuencias de escape ANSI, a menudo con la ayuda de algunas bibliotecas de estilo, como tiza, colors, ansi-colors y kleur.

Sin embargo, puedes aplicar diseño al mensaje con secuencias de escape ANSI sin usar ninguna biblioteca. Esta es la sintaxis:

\x1B[𝘗1;…;𝘗nm

En donde,

  • 𝘗1 a 𝘗n son subsecuencias válidas de los parámetros de SGR (Renderización gráfica selectiva).
  • Se puede omitir cualquiera de los parámetros de 𝘗1 a 𝘗n, en cuyo caso se supone que su valor es cero.
  • \x1B[m es la abreviatura de \x1B[0m, en la que se restablecerá el atributo de visualización.

Por ejemplo:

  1. Ingresa el siguiente comando de la consola.

    console.log('\x1B[41;93;4mHello\x1B[m');

  2. El comando anterior produce un mensaje Hello con fondo rojo, texto amarillo y subrayado. Hola

Esta es una lista de los códigos de colores admitidos en DevTools.

Primer plano Segundo plano Tema claro Tema oscuro
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
N.o 55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

A continuación, se muestra una lista de códigos de estilo compatibles con Herramientas para desarrolladores.

Parámetros Significado
0 Restablece todos los atributos de visualización
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Agrega underline a la propiedad text-decoration
9 Agrega line-through a la propiedad text-decoration
22 Restablece la propiedad font-weight
23 Restablece la propiedad font-style
24 Se quitó underline de la propiedad text-decoration
29 Se quitó line-through de la propiedad text-decoration
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 Restablecer color property
48;2;𝑅;𝐺;𝐵 background: rgb(𝑅,𝐺,𝐵)
49 Restablecer background property
53 Agrega overline a la propiedad text-decoration
55 Se quitó overline de la propiedad text-decoration

Este es otro ejemplo más complejo con varios diseños.

  1. Ingresa el siguiente comando de la consola.

    const hello = '\x1B[41;93;4mHello';
const space = '\x1B[m ';
const world = '\x1B[34;102;9mWorld';

console.log(hello + space + world);

  2. El comando anterior produce un mensaje Hello World con 3 estilos diferentes. Hello World