Uso de colores de consola con Node.js

Nota del editor: Este artículo fue actualizado por última vez por Pascal Akunne el 3 de julio de 2024 para reemplazar la herramienta obsoleta Colors.js, que ya no recibe mantenimiento, y reemplazarla con picocolors, así como para cubrir el enfoque de códigos de escape ANSI para colorear.

Desde el auge de Node.js, hemos visto el lanzamiento de más aplicaciones de consola que nunca. A veces, la salida de consola es suficiente si no se necesita la complejidad de escribir una interfaz de usuario. Sin embargo, por defecto, la salida de una aplicación Node.js se muestra como texto blanco simple sobre fondo negro.

Esto significa que es fácil saturar la vista de la aplicación o pasar por alta información importante. En este artículo, aprenderemos a implementar colores de consola ya usar herramientas como Chalk, picocolors y Color-CLI para ello.

Problemas con la falta de color de la consola en las aplicaciones Node.js

Imaginemos que la aplicación de ejemplo a continuación usa Node.js para conectarse a un punto final y recuperar datos. En realidad, no realizamos ningún trabajo pesado al conectarnos a estos puntos finales; Simplemente generamos la salida que normalmente esperamos de una aplicación como esta.

Sin embargo, en una aplicación como esta, nos veríamos tentados a escribir texto como salida en nuestra consolación. Quizás estemos muy ocupados y no tengamos tiempo para agregar colores a nuestra aplicación, o simplemente no se nos ocurra.

Cualquiera sea el motivo, la salida de nuestra sencilla aplicación de consola Node.js se ve así:

Si lee la salida como creador del programa, sabrá qué buscar y notará varios intentos de conexión antes de que la conexión sea exitosa, con solo un conjunto de resultados parciales, y sabrá cómo solucionarlo. Sin embargo, si trabaja en equipo y otras personas usan este script, cada persona puede interpretar los resultados de forma diferente.

Si este script se ejecutara como parte de una operación programada o como parte de una serie más grande de scripts, habría grandes posibilidades de que las personas saltaran a la última línea e interpretaran el mensaje como que todo funcionaba según lo previsto.All finished

Para dar a nuestros usuarios la impresión correcta, podemos usar aspectos visuales para indicar claramente si todo funcionó según lo previsto o si algo falló. Ahí es donde entrar en juego los colores de nuestra consola.

Implementación de colores de consola en aplicaciones Node.js

Para usar los colores de la consola en nuestra aplicación Node.js, primero debemos entender qué está sucediendo bajo el capó.

Los programas que generan salidas de texto existen desde hace décadas, por lo que los estándares que permiten realizar estos cambios de color pueden parecer algo primitivos. Debemos entender cómo usar un código de escape para indicar a la consola que queremos cambiar el color de la salida.

Códigos de escape ANSI

Los códigos de escape ANSI son secuencias de bytes que controlan el formato, el color y otros ajustes de salida en terminales de videotexto. En Node.js, podemos usar estos códigos para colorear la salida de nuestra consola. Normalmente, nuestra consola imprime el texto que le proporcionamos mediante [nombre de la consola]. Sin embargo, si enviamos un carácter de escape ( ) y una secuencia específica ( ) a la consola, esta captura la secuencia antes de imprimirla, lo que permite la configuración básica de la terminal.console.logx1b[33m

En este caso, lo usamos para indicar a la consola que queremos cambiar el color. Necesitamos dos cosas: primero, cambiar el color del texto al deseado y, segundo, restablecer el color de la consola al que tenía antes del cambio. De lo contrario, todas las salidas de consola posteriores conservarán ese color.

Entonces, si quisiéramos imprimir “¡Bienvenido a la aplicación!” en amarillo, esta sería nuestra declaración:console.log

consuelo. log ( 'x1b[33m ¡Bienvenido a la aplicación! x1b[0m' );

El resultado sería así:

Aunque tenemos nuestra cadena amarilla, ¿qué pasa con los corchetes y las barras invertidas? Analicémoslo.

Usando caracteres de control para colorear nuestra salida

x1bEs un carácter de control que indica a la consola que queremos hacer algo que no está relacionado con imprimir texto en ella. Todo lo que se escribe después de este carácter de control, en la misma línea, configure la terminal de alguna manera.

Después de nuestro carácter de control, especificamos lo que queremos hacer. En este caso, queremos cambiar al amarillo para el primer plano, cuyo ID es 33 en la tabla de colores ANSI. Al colocarlo después de nuestro carácter de control inicial, cambiamos el color de salida de la consola a amarillo.[33m

Hay una gran variedad de colores para elegir. Estos son algunos de los básicos:

Colores del texto:

• Negro:30
• Rojo:31
• Verde:32
• Amarillo:33
• Azul:34
• Magenta:35
• Cian:36
• Blanco:37

Colores de fondo:

• Negro:40
• Rojo:41
• Verde:42
• Amarillo:43
• Azul:44
• Magenta:45
• Cian:46
• Blanco:47

Consideremos otro ejemplo:

console.log ( "x1b[32m Salida con texto verde x1b[0m" ) console.log ( " x1b[35m Salida con texto magenta x1b[0m" ) console.log ( " x1b [34m Salida con texto azul x1b[0m" )console.log ( "x1b[41m Salida con fondo rojo x1b[0m" ) console.log ( " x1b[42m Salida con fondo verde x1b[0m" ) console.log (" x1b[43m Salida con fondo amarillo x1b[ 0m " )

Este sería el resultado:

El código de escape ANSI tiene sus pros y sus contras. La ventaja es que no introducimos nuevas dependencias en nuestro proyecto Node.js y nuestra aplicación reproducirá los colores correctos en millones de ordenadores de todo el mundo.

La desventaja es que nuestro código se vuelve un poco críptico. Los usuarios no sabrán intuitivamente que configuramos los caracteres de la consola mediante esta cadena, y mantener este código en el futuro puede ser un problema.

También es molesto hacer referencia a una tabla cuando solo queremos colorear la salida de la consola. Debe recordar siempre colocar después de usar colores para que la consola restablezca el esquema de colores predeterminado.x1b[0m

Afortunadamente, como suele ocurrir en el mundo de Node.js, no existe un único paquete que pueda ayudarnos. En las siguientes secciones, analizaremos tres opciones populares para implementar colores CLI.

Tiza

Chalk es una forma sencilla de aplicar estilos a los colores de la consola en tu proyecto Node.js. Una característica útil de Chalk es que no extiende objetos. Extender objetos nativos en JavaScript cambia esencialmente la implementación de una función integrada y suele considerarse una mala idea.String.prototype

Esto se debe a que, si se asigna una función a `like` y luego se asigna su propia función `of` a la implementación, la segunda biblioteca sobrescribiría la primera. Este es un problema bastante importante para depurar `.library 1String.colorifylibrary 2.colorifyString

La sintaxis de Chalk también es fácil de entender y usar. Para nuestro ejemplo de código, asignaremos un valor constante de para facilitar su acceso. Luego, podemos usar la función con las llamadas adecuadas para obtener los colores deseados.console.loglogchalk

Para demostrar esto, inicie rápidamente una aplicación Node creando un directorio de proyecto y, desde ese directorio, ejecute lo siguiente:

npm init - y

Luego, instala Chalk ejecutando esto:

npm instalar tiza

A continuación, cree un archivo llamado . Puede hacerlo con la CLI ejecutando lo siguiente:console.js

consola táctil .js

Luego, agregue el siguiente código al archivo:console.js

importa tiza de 'tiza' ; registro constante = consola.log; nivel.tiza = 1; // Usar colores en la ventana de depuración de VS Code log ( chalk.Yellow ( ' ¡ Bienvenido a la aplicación!' )); for (var i = 0; i = 10; i ++) { log (chalk.white ('Intentando conectarse al punto final, intento ' + i)); } log(chalk.green('¡Conexión establecida! Enviando estadísticas') ); log(chalk.red('No todas las estadísticas están disponibles...') ); log(chalk.redBright('Punto final desconectado antes de recibir todos los resultados')); log(tiza.magenta('Todo terminado'));

Actualice nuestro archivo para usarlo agregando propiedades a la lista. Puede agregarlas debajo de la propiedad.package.jsonES6 modules"type": "module"package.json"name": "chalk",

Por último, actualice la scriptssección reemplazando el código con:

"scripts" : { "inicio" : "node console.js" },        

Ahora, podemos probar nuestra aplicación y ver Chalk en acción ejecutando:

Inicio de npm

El resultado es el siguiente:

Claro que tus gustos pueden variar, y quizás no quieras usar tantos colores en tu aplicación de consola. Pero ahí están si alguna vez los necesitas.

Asignación de temas básicos con Chalk

Con Chalk, también podemos asignar temas básicos a nuestros colores. Por ejemplo, para establecer un color universal para nuestros errores o advertencias, es tan sencillo como asignar las funciones adecuadas a los nombres, como se muestra a continuación:

importa tiza de 'tiza' ; error constante = tiza. rojo; const advertencia = tiza . bgRojo; // Color naranja console.log ( error ( '¡Error!' )); console.log(advertencia('¡Advertencia!'));

Puedes reemplazar el código con el código anterior y ejecutar:console.js

Inicio de npm

La salida de este código es la esperada:

Puedes mezclar y combinar estos estilos tanto como quieras y según lo requiera tu aplicación.

picocolores

Picocolors es una biblioteca sencilla y sin dependencias para colorear texto de terminal. Destaca por su ligereza y buen rendimiento, lo que la convierte en la opción ideal para desarrolladores que buscan simplicidad y velocidad.

Para usar picocolors, cree un directorio y ejecute el siguiente comando para configurar un proyecto Node.js:

npm init - y

Instale Picocolors con el siguiente comando:

npm - los picocolores

Luego, crea un archivo y agrega lo siguiente:console.js

importar pc desde 'picocolors' ; console.log (pc.green ('Bienvenido a mi aplicación')); console.log(pc.red('Error al obtener los datos.')); console.log(pc.blue('¡La base de datos está en funcionamiento!')); console.log(pc.bold(pc.amarillo('Este es un texto amarillo en negrita'))); console.log (pc.bgBlue (pc.white ('Este texto tiene un fondo azul')));

A continuación, actualice los scripts en el archivo:package.json

"scripts" : { "inicio" : "node console.js" },     

Finalmente, ejecuta npm startpara iniciar la aplicación. El resultado será similar a esto:

picocolors es una herramienta excelente para agregar color a las salidas de la consola evitando dependencias pesadas.

cli-color

cli-color es otra excelente opción para colorear nuestra consola. Tiene mucho en común con Chalk porque no modifica la implementación.String.prototype

Para usar cli-color, primero cree un directorio de proyecto. Desde allí, inicialice un proyecto Node.js ejecutando lo siguiente:

npm init - y

Luego, instala:color-cli

npm install cli - color

Ahora, crea un console.jsarchivo dentro del directorio del proyecto con el siguiente código:

var clc = require("cli-color");console.log(clc.red.underline("¡Error!"));console.log(clc.red("¡Advertencia!"));console.log(clc.green('¡Esto está bien!'));

Actualice la scriptssección en el package.jsonarchivo reemplazando el código con esto:

"scripts": { "inicio": "node console.js" },

Finalmente, podemos probar nuestra aplicación ejecutando:

inicio de npm

Nuestra salida se verá así:

Automatizar el registro de color con middleware

En Node.js, puedes usar middleware para automatizar el registro de color según los tipos de solicitud o los códigos de estado de respuesta. Puedes lograrlo usando bibliotecas como Morgan para el registro de solicitudes HTTP y Winston para el registro general.

Morgan

Morgan es un middleware popular para registrar solicitudes HTTP y le permite cambiar el color de la salida de la consola según el tipo de solicitud o el código de estado de respuesta.

Primero, instale la biblioteca con el siguiente comando:

npm instalar morgan

Así es como se verá el código en nuestro console.jsarchivo:

import express de "express"; import morgan de "morgan"; import chalk de "chalk"; const app = express(); // Aplicar color al código de estado morgan.token("status", (req, res) = { const status = res.statusCode; const color = status = 500 ? "red" : status = 400 ? "yellow" : status = 300 ? "cian" : status = 200 ? "green" : "white"; return chalk[color](status);}); // Aplicar color al método morgan.token("method", (req, res) = { const method = req.method; const color = method === "GET" ? "green" : method === "POST" ? "yellow" : method === "PUT" ? "cian" : method === "DELETE" ? "rojo" : "blanco"; return chalk[color](method);});app.use(morgan(":method :url - :status"));app.get("/", (req, res) = { res.send("¡Bienvenido a mi aplicación!");});app.listen(3000, () = { console.log("El servidor se está ejecutando en el puerto 3000");});

Y esto es lo que mostrará la terminal:

Winston

Winston es una biblioteca de registro flexible que gestiona más que simples solicitudes HTTP. Se puede configurar para usar colores según los niveles de registro.

Este es el comando para instalar Winston:

npm instalar winston

Así es como se verá el código en el console.jsarchivo:

Importar express de "express"; Importar chalk de "chalk"; Importar winston de "winston"; Importar expressWinston de "express-winston"; Const app = express(); Const colorize = winston.format((info) = { Const level = info.level; Const color = level === "error" ? "red" : level === "warn" ? "yellow" : level === "info" ? "green" : "white"; Info.message = chalk[color](info.message); return info;}); Const logger = winston.createLogger({ Level: "info", Format: winston.format.combine(colorize(), winston.format.simple()), Transports: [new winston.transports.Console()],}); App.use( ExpressWinston.logger({ WinstonInstance: logger, Meta: false, // Controla si se registran los metadatos acerca de la solicitud (el valor predeterminado es verdadero) msg: "HTTP {{req.method}} {{req.url}} - {{res.statusCode}}", // personaliza el mensaje de registro predeterminado }));app.get("/", (req, res) = { res.send("¡Bienvenido a mi aplicación!");});app.listen(3000, () = { logger.info("El servidor se está ejecutando en el puerto 3000");});

Y esto es lo que mostrará el terminal:

Para obtener sobre estas herramientas de registro de Node.js y otras como Bunyan, Pino y npmlog, consulte nuestra guía de comparación.

Conclusión

Colorear la consola en Node.js es una forma sencilla de mejorar la legibilidad de la salida de tu aplicación. Hay muchas opciones para lograrlo, pero si quieres implementarlo con un paquete, Chalk parece ser la opción más completa y actualizada.

¡Feliz coloración!

Solo el monitor 200s falló y las solicitudes de red fueron lentas en producción

Implementar una aplicación web o un sitio web basado en Node es la parte fácil. Asegurarse de que la instancia de Node siga proporcionando recursos a la aplicación es la parte más difícil. Si le interesa garantizar que las solicitudes al backend o a servicios de terceros se ejecuten correctamente, pruebe LogRocket.

Si quieres conocer otros artículos parecidos a Uso de colores de consola con Node.js puedes visitar la categoría Guias.