Mostrar mensajes por la consola del navegador

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

Mostrar mensajes por la consola del navegador 1

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 2
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 3
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:
Mostrar mensajes por la consola del navegador 4

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
Mostrar mensajes por la consola del navegador 5
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
Mostrar mensajes por la consola del navegador 6
¡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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *