Mostrar mensajes por la consola del navegador

Mostrar mensajes por la consola del navegador

La consola del navegador es una herramienta imprescindible para cualquier aprendiz de Javascript.

Nos permite ver en que línea del código nos hemos equivocado y así seguir avanzando.

Sobre todo cuando estamos solos y nadie nos puede guiar.

Podemos acceder a ellas al hacer «ctrl + i» o botón derecho y clic en inspeccionar.

El navegador incorpora además muchísimas herramientas para desarrolladores muy útiles pero que no son el objetivo de este escrito.

Veremos como podemos hacer la escritura de código un poco más entretenida más allá del típicoconsole.log();.

Como estilizar console.log()

Reproduce el siguiente código en tu script o directamente en la consola del navegador.

console.log("mensaje stándard por la consola");
console.log("%cMensaje con la tipografía modificada  y el color verde", "color: green; font-family:'Comic Sans MS'");
console.log("%cMensaje con la tipografía modificada Impact y el color naranja", "color: orange; font-family:Impact");

El resultado es el siguiente:

Mostrar mensajes por la consola del navegador 1
Mensajes con css por la consola del navegador

La sintaxis usada es la siguiente

console.log("%cTexto,"Instrucciones css;")

Mensajes console.error() por la consola del navegador

Reproduce el siguiente código en tu script o directamente en la consola del navegador.

console.error("mensaje de error por la consola");
console.error("Error: Página no encontrada",  404);
console.error("Error: Error de servidor",  500);

El resultado es el siguiente:

Mostrar mensajes por la consola del navegador 2
resultado instrucción console.error

Observar que en caso de indicar el error este debe ser numérico.

No se admiten strings.

En este enlace encontraréis el listado de todos los errores posibles.

Mensajes de aviso console.warn() por la consola del navegador

Reproduce el siguiente código en tu script o directamente en la consola del navegador.

console.warn("mensaje de aviso por la consola");

El resultado es el siguiente:

Mensaje de aviso por la consola del navegador console.warn()
Mensaje de aviso por la consola del navegador console.warn()

Mensajes de información console.info() por la consola del navegador

Para chrome y safari no hace nada.

Para mozilla y explorer hace que el mensaje se vea en azul.

Mostrar tablas por la consola del navegador con .table()

¿una tabla?

Correcto. Has leído bien.

La consola del navegador permite mostrar tablas personalizando o no los encabezados de las filas y columnas.

Por ejemplo el siguiente código:

console.table({modulo1:"html y css",modulo2:"js",modulo3:"publicación web"});

deriva en

ejemplo de uso de console.table()
tabla sin cabeceras generada en la consola

y el siguiente

function materia(asignatura,profe){
	this.temario = asignatura;
	this.profesor = profe;
}

var ifcd0110 = {}

ifcd0110.modulo1 = new materia("html y css","maria");
ifcd0110.modulo2 = new materia("javascript","francesc");
ifcd0110.modulo3 = new materia("publicación web","juan");

console.table(ifcd0110)

deriva en

ejemplo de tabla con console.table()
tabla por la consola del navegador con dos columnas y un índice

¡Hola!

Querido lector,

Si vas a hacer pruebas recuerda que

console.clear()

sirve para limpiar la consola.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.