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.

Diseño web
Lectura de 3 minutos
hace 3 años
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.

1console.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.

113 function NotFound() {
214 console.error("Error: Página no encontrada", 404);
315 }
416
517 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.

1console.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.

1console.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.

1class User {
2 constructor(firstName, lastName, email) {
3 this.firstName = firstName;
4 this.lastName = lastName;
5 this.email = email;
6 }
7
8 print() {
9 console.group("User");
10 console.log("firstName: ", this.firstName);
11 console.log("lastName: ", this.lastName);
12 console.log("email: ", this.email);
13 console.groupEnd();
14 }
15}
16
17const user1 = new User("Alejandro", "Rodriguez", "aj@ed.team");
18user1.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.

1const users = [
2 new User("Alejandro", "Rodriguez", "aj@ed.team"),
3 new User("Alexys", "Lozada", "alexys@ed.team")
4];
5
6users.printAll = function() {
7 console.group("EDteam Users");
8 for(let i = 0; i < this.length; i++) {
9 this[i].print();
10 }
11 console.groupEnd();
12};
13
14users.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.

1console.groupCollapsed("click aquí para expandir");
2console.log("ahora me puedes ver");
3console.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.

1const users = [
2 new User("Alejandro", "Rodriguez", "aj@ed.team"),
3 new User("Alexys", "Lozada", "alexys@ed.team")
4];
5
6console.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.

1console.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.

1function hello(name) {
2 console.count("Hola " + name);
3}
4
5hello("Alejandro");
6hello("Alejandro");
7hello("Alejandro");
8hello("Comunidad EDteam");
9hello("Alejandro");
10hello("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.

Autor del artículo

Avatar

Alejandro Rodriguez

@ajrdrgzVer perfil

Developer 🚀 - Gopher

Recuerda iniciar sesión para comentar este articulo