Asignar formato y estilo a los mensajes en Console

Jecelyn Yeen

Esta guía 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 aprender a registrar mensajes en la consola.

En esta guía, se da por sentado que comprendes los aspectos básicos del desarrollo web; por ejemplo, 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 "tipo de carácter" que indica el tipo de datos (número entero, número de punto flotante, etcétera).

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 un mensaje Chrome DevTools is awesome..

Esta es la lista de especificadores de formato que admiten las Herramientas para desarrolladores de Chrome actualmente.

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 un mensaje The total weight of 3 apples and 2 oranges is 432.4 grams..

Conceptos básicos sobre las conversiones de tipos

El mensaje resultante 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 un mensaje I have 2 apples and 3 oranges..

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

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

1. Ingresa el siguiente comando de la consola.

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

2. El comando anterior produce un mensaje Jane has NaN kiwis..

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

Cómo aplicar estilo a los mensajes de la consola

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

Estilo con 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.

Estilo con secuencias de escape ANSI

Puedes usar las secuencias de escape de ANSI para diseñar 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 diseñar el 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 SGR (Select Graphic Rendition).
• Se puede omitir cualquier parámetro de 𝘗1 a 𝘗n. En ese 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.

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

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

A continuación, se muestra otro ejemplo más complejo con varios estilos.

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.