La consola de herramientas de desarrollador es una parte fundamental del proceso de depuración en el desarrollo web. A menudo, queremos que nuestros mensajes sean más informativos y visuales. En este post, aprenderás a mostrar mensajes en la consola de JavaScript con estilos personalizados, como lo hacen las grandes aplicaciones web

Mensajes Simples

La forma más básica de mostrar un mensaje es utilizando console.log():

console.log("Este es un mensaje simple.");

Mensajes con Estilos CSS

Puedes aplicar estilos a los mensajes utilizando %c. Aquí tienes un ejemplo de cómo hacerlo:

console.log("%cEste es un mensaje estilizado", "color: blue; font-size: 20px; font-weight: bold;");

Mensajes Llamativos

Si quieres hacer un mensaje más destacado, puedes combinar varios estilos:

console.log("%c¡Atención!%c Esto es importante.", "color: red; font-size: 24px; font-weight: bold;", "color: black; font-size: 16px;");

Agrupando Mensajes

Para organizar mejor tus mensajes, puedes usar console.group() y console.groupEnd():

console.group("Grupo de Mensajes");
console.log("%cMensaje 1", "color: green;");
console.log("%cMensaje 2", "color: orange;");
console.groupEnd();

Agregar Iconos

Otra manera de hacer que tus mensajes sean más visuales es agregar iconos:

console.log("%c✅ Éxito:", "color: green; font-size: 20px;", " La operación se completó correctamente.");

Ejemplo Completo

Aquí tienes un ejemplo que combina varias de estas técnicas:

console.group("Resumen de la operación");
console.log("%c🔔 Alerta:", "color: orange; font-size: 20px;", " Este es un mensaje de alerta.");
console.log("%c✅ Éxito:", "color: green; font-size: 20px;", " La tarea se completó con éxito.");
console.log("%c❌ Error:", "color: red; font-size: 20px;", " Ocurrió un error inesperado.");
console.groupEnd();

Conclusión

Personalizar los mensajes en la consola no solo hace que la depuración sea más eficiente, sino que también mejora la experiencia del desarrollador. ¡Ahora es tu turno de experimentar con estos estilos y hacer que tus mensajes sean más atractivos!

How to Display Styled Messages in the JavaScript Console

Share

Social networks