DonsoftST
¿Quieres reaccionar a este mensaje? Regístrate en el foro con unos pocos clics o inicia sesión para continuar.

[JAVASCRIPT] Aplicar color a los mensajes de la consola del navegador (CONSOLE.LOG)

Ir abajo

Aporte [JAVASCRIPT] Aplicar color a los mensajes de la consola del navegador (CONSOLE.LOG)

Mensaje por .:Xx4NG3LxX:. el Lun 14 Dic 2020, 10:40 am

Hola Invitado! En este post, te mostrare una manera sencilla de colorear tus mensajes en la consola de tu navegador. Para esta ocasión utilizare Google Chrome.


El proceso es muy fácil y sencillo de comprender. La sintaxis para lograrlo es esta:

Código:
console.log(%cmensaje, estilo)

Mensaje sencillo:

Código:
console.log("%cHola", "color: cyan");

Dá como resultado "Hola" en color cyan.

[JAVASCRIPT] Aplicar color a los mensajes de la consola del navegador (CONSOLE.LOG) N110


El %c se usa para darle formato a un texto, se puede usar cuantas veces queramos.

Mensaje con dos colores:

Código:
console.log("%cHola %cMundo", "color: cyan", "color: yellow");

¡Tachán!: "Hola" de color cyan y "Mundo" de color amarillo.

[JAVASCRIPT] Aplicar color a los mensajes de la consola del navegador (CONSOLE.LOG) N210


Pero, ¿porqué limitarnos sólo a colorear?

Podemos aplicarle CSS (no estoy seguro de si total o limitado, pero lo cierto es que podemos lograr resultados geniales).

Mensaje de bienvenida:

Código:
console.log("%cBienvenido/a a %cBatch%cPower", "color: yellow", "color: cyan; font-weight: bold", "color: gray; font-weight: bold");

Aquí es un poco más largo, pero no obstante sigue siendo sencillo. Al primer texto ("Bienvenido/a"), le aplicamos un color amarillo, luego al segundo texto ("Batch"), le doy un color cyan y lo coloco en negrita, al último texto ("Power"), le aplicamos lo mismo que el anterior sólo que con un color gris.

[JAVASCRIPT] Aplicar color a los mensajes de la consola del navegador (CONSOLE.LOG) N310


Pueden aplicar; background, font-family, font-size, padding, margin, sombras (de texto y de cajas), todas las propiedades de bordes (border, border-radius, etc), degradados, y mucho más.


Pulir el código:

- A veces resulta tedioso tener que escribir los mismos estilos una y otra vez, es por eso que lo siguiente agiliza el proceso:

Podemos crear un objeto que contenga todos los estilos que necesitemos, por ejemplo:

Código:
// Tu código...
var styles = {
    colors: {
        red: "color: red",
        blue: "color: blue"
        // Más colores...
    },
    bgcolors: {
        yellow: "color: yellow",
        green: "color: green"
        // Más colores de fondo...
    },
    fSizes: {
        s: "font-size: small",
        m: "font-size: medium",
        l: "font-size: large"
        // Más tamaños de fuente...
    }
};

Y accederíamos a ellos de la siguiente manera:

Código:
console.log("%cTexto grande %cTexto azul", styles.fSizes.l, styles.colors.blue);

[JAVASCRIPT] Aplicar color a los mensajes de la consola del navegador (CONSOLE.LOG) N410


Hasta aquí, hemos aprendido a hacer mensajes "profesionales" en la consola del navegador. Cualquier duda que tengas al respecto puedes pregúntame.

Saludos Invitado


Última edición por Don el Dom 20 Dic 2020, 6:49 pm, editado 3 veces (Razón : Adjunto imágenes de los resultados)

_________________
¡Hola Invitado! No olvides leer las [Tienes que estar registrado y conectado para ver este vínculo] para una mejor estancia en el foro
.:Xx4NG3LxX:.
.:Xx4NG3LxX:.
Moderadores
Moderadores

Masculino
Venezuela
Mensajes Mensajes : 14
Puntos Puntos : 36
Fecha de inscripción : 07/11/2020
Localización : Detrás de tí

https://batchpower.foroactivo.com/

A Don le gusta esta publicaciòn

Volver arriba Ir abajo

Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.