Pasar al contenido principal

🔥 Hoy comenzamos la especialidad en programación backend con PHP con Yesi Days ¡La primera clase es en vivo y gratis! 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Ve más allá del console.log() y mejora tu código JavaScript

Existen más métodos en la API Console aparte de console.log() que te ayudarán a inspeccionar tu código JavaScript y ser un mejor programador.

Ve más allá del console.log() y mejora tu código JavaScript

console.log()

Este método muestra un mensaje en la consola, recibe como argumento uno o más objetos. Cada objeto se evalúa y se concatena en una string separada por espacios.

console.log("Hola EDteam, hoy es: ", Date(Date.now()));

console.log

console.error()

Este método muestra un icono de error y el texto del mensaje en color rojo, también incluye un seguimiento de pila desde donde se llamó el método, en nuestro ejemplo la línea de código donde incluimos el método console.error es la línea 14, que se encuentra dentro de la función NotFound, la cual es ejecutada en la línea 17.

13  function NotFound() {
14  	console.error("Error: Página no encontrada",  404);
15  }
16
17  NotFound();

console.error

console.warn()

Este método muestra un icono de advertencia en color amarillo y el texto del mensaje, también incluye un seguimiento de pila desde donde se llamó el método.

console.warn("Solo falta 1 día para finalizar el EDweekend");

console.warn

console.dir()

Este método muestra una lista de árbol de las propiedades de un objeto JavaScript.

console.dir(document.head);

console.dir

console.group() - console.groupEnd()

Para agrupar resultados de la consola debemos incluirlos dentro de una mismo bloque de código, el cual se inicia con el método console.group() y finaliza con el método console.groupEnd() .

En nuestro ejemplo creamos una clase user con un método print, el cual imprime en consola de forma agrupada las propiedades del objeto.

class User {
	constructor(firstName, lastName, email)  {
		this.firstName  =  firstName;
		this.lastName   =  lastName;
		this.email      =  email;
	}

	print() {
		console.group("User");
			console.log("firstName: ",  this.firstName);
			console.log("lastName:  ",  this.lastName);
			console.log("email:     ",  this.email);
		console.groupEnd();
	}
}

const user1 = new User("Alejandro", "Rodriguez", "aj@ed.team");
user1.print();

console.group

También es posible anidar grupos:

En nuestro ejemplo creamos un array de usuarios y los agrupamos con console.group("EDteam Users") , luego recorremos el array de usuarios para ejecutar el método print de User.

const users = [
	new User("Alejandro", "Rodriguez", "aj@ed.team"),
	new User("Alexys", "Lozada", "alexys@ed.team")
];

users.printAll = function() {
	console.group("EDteam Users");
		for(let i = 0; i < this.length; i++) {
			this[i].print();
		}
	console.groupEnd();
};

users.printAll();

anidacion

console.groupCollapsed()

Crea un nuevo grupo de resultados de consola que está inicialmente colapsado, a diferencia de console.group()que lo muestra abierto.

console.groupCollapsed("click aquí para expandir");
console.log("ahora me puedes ver");
console.groupEnd();

console.table()

Este método crea una tabla con la información de un objeto o array cuando estos contienen datos similares.

Continuando con el ejemplo de usuario, podríamos imprimir en consola una tabla con la información del array de usuarios.

const users  = [
	new User("Alejandro", "Rodriguez", "aj@ed.team"),
	new User("Alexys", "Lozada", "alexys@ed.team")
];

console.table(users);

console.table

console.assert()

Este método es bastante útil cuando estamos realizando pruebas sencillas de nuestra aplicación, este método consta de dos parámetros, el primero indica la condición y el segundo el mensaje de error que se imprimirá en consola si la condición se evalúa como false.

console.assert(10 < 5, "10 no es menor que 5");

console.assert

console.count(label)

Esta método registra la cantidad de veces que se ha llamado count() con la etiqueta especificada.

function  hello(name)  {
	console.count("Hola "  +  name);
}

hello("Alejandro");
hello("Alejandro");
hello("Alejandro");
hello("Comunidad EDteam");
hello("Alejandro");
hello("Comunidad EDteam");

console.count

Si quieres saber más de JavaScript tenemos una Especialidad que te lleva desde cero hasta crear tu primera aplicación web.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal