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.

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.

Sigue leyendo