Esta guía muestra cómo dar formato a los mensajes y darles estilo en la consola para desarrolladores de Chrome. Consulta Comienza a registrar mensajes para descubrir cómo registrar mensajes en la consola.
En esta guía, se asume 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 "carácter de tipo", que indica el tipo de datos (número entero, número de punto flotante, etc.).
Por ejemplo,
- Abrir Console
- Ingresa el siguiente comando de la consola.
js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
- El comando anterior produce el mensaje
Chrome DevTools is awesome.
.
Esta es una lista de especificadores de formato que actualmente admiten las Herramientas para desarrolladores de Chrome.
Especificador | Salida |
---|---|
%s |
Da formato al valor como una string. |
%i o %d |
Da formato al valor como un número entero. |
%f |
Da al valor el formato de un valor de punto flotante. |
%o |
Da formato al valor como un elemento expandible del DOM. |
%O |
Da formato al valor como un objeto JavaScript expandible. |
%c |
Aplica reglas de estilo CSS a la string de salida según lo especificado en el segundo parámetro. |
Aplica varios especificadores de formato
Puedes usar más de un especificador de formato en un mensaje.
- Ingresa el siguiente comando de la consola.
js console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
- El comando anterior produce el mensaje
The total weight of 3 apples and 2 oranges is 432.4 grams.
.
Conceptos básicos sobre las conversiones de tipos
El mensaje de salida se convertirá según el especificador de formato.
- Ingresa el siguiente comando de la consola.
js console.log('I have %i apples and %d oranges.', 2, 3.5);
- El comando anterior produce el mensaje
I have 2 apples and 3 oranges.
. - En lugar de registrar
3.5 oranges
, el resultado es3 oranges
. El%d
indica que el valor se debe convertir en un número entero.
Este es un ejemplo de lo que sucede si la conversión del tipo no es válida.
- Ingresa el siguiente comando de la consola.
js console.log('Jane has %i kiwis.', 'two');
- El comando anterior produce el mensaje
Jane has NaN kiwis.
. - El
%i
indica que el valor se debe convertir en un número entero, pero el argumento es una string. Por lo tanto, muestra NaN (Not-A-Number).
Cambia el estilo de los mensajes de la consola
Existen dos maneras de diseñar mensajes de la consola en Herramientas para desarrolladores.
Estilo con especificador de formato
Puedes usar el especificador de formato %c
para diseñar los mensajes de la consola con CSS.
- Ingresa el siguiente comando de la consola.
js const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
- El comando anterior produce
Hooray
con estilos de CSS aplicados.
Estilo con secuencias de escape ANSI
Puedes usar las secuencias de escape ANSI para diseñar los mensajes de la consola.
Es común que los desarrolladores de Node.js coloreen los mensajes de registro mediante secuencias de escape ANSI, a menudo con la ayuda de algunas bibliotecas de estilo, como tiza, colores, ansi-colors y kleur.
No obstante, puedes definir el estilo del mensaje con secuencias de escape ANSI sin usar ninguna biblioteca. Esta es la sintaxis:
\x1B[𝘗1;…;𝘗nm
En donde,
- De
𝘗1
a𝘗n
son subsecuencias válidas de los parámetros SGR (Seleccionar representación gráfica). - Se puede omitir cualquiera de los parámetros
𝘗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,
- Ingresa el siguiente comando de la consola.
js console.log('\x1B[41;93;4mHello\x1B[m');
- El comando anterior produce un mensaje
Hello
con fondo rojo, texto amarillo y subrayado.
Esta es una lista de códigos de color admitidos en Herramientas para desarrolladores.
Primer plano | Información general | 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 | #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ódigo de estilo que admite Herramientas para desarrolladores.
Parámetros | Significado |
---|---|
0 | Restablecer todos los atributos de la pantalla |
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 | Restablecer la propiedad font-weight |
23 | Restablecer la propiedad font-style |
24 | Quitar underline de la propiedad text-decoration |
29 | Quitar line-through de la propiedad text-decoration |
38;2;R;G;B | color: rgb(𝑅,𝐺,𝐵) |
39 | Restablecer color property |
48;2;R;G;B | background: rgb(𝑅,𝐺,𝐵) |
49 | Restablecer background property |
53 | Agrega overline a la propiedad text-decoration |
55 | Quitar overline de la propiedad text-decoration |
Este es otro ejemplo más complejo con varios estilos.
Ingresa el siguiente comando de la consola. ```js const hello = '\x1B[41;93;4mHello'; const Space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';
console.log(hola + espacio + mundo); ```
El comando anterior produce un mensaje
Hello World
con 3 estilos diferentes.