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:

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:

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:

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

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

¡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!