Algunos métodos más allá del console.log en Javascript

A menudo, durante la depuración, los desarrolladores javascript solemos usar el método console.log() para imprimir valores. Pero hay algunos otros métodos de consola que te hacen la vida mucho más fácil. ¿Quieres saber cuáles son estos métodos? ¡Vamos a conocerlos!

1. console.table()

Mostrar arreglos u objetos largos es un dolor de cabeza usando el método console.log(), pero con console.table() tenemos una forma mucho más elegante de hacerlo.

// Matrix
const matrix = [
  ["apple", "banana", "cherry"],
  ["Rs 80/kg", "Rs 100/kg", "Rs 120/kg"],
  ["5 ⭐", "4 ⭐", "4.5 ⭐"],
]
console.table(matrix);

// Maps
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

const family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");
console.table(family);

2. console.trace()

¿Tiene problemas para depurar una función? ¿Te quedas preguntándote cómo fluye la ejecución? ¡console.trace() es tu amigo!

function outerFunction() {
  function innerFunction() {
    console.trace();
  }
  innerFunction();
}
outerFunction();

3. console.error() y console.warn()

¿Cansado de logs/registros aburridos? Dale sabor a las cosas con console.error() y console.warn()

console.error("This is an error message");
console.warn("This is a warning message");
console.log("This is a log message");

4. console.assert()

¡Esta es otra herramienta brillante para la depuración! Si la aserción falla, la consola imprimirá el seguimiento/trace.

function func() {
  const a = -1;
  console.assert(a === -1, "a is not equal to -1");
  console.assert(a >= 0, "a is negative");
}

func();

5. console.time(), console.timeEnd(), y console.timeLog()

¿Necesita comprobar cuánto tarda algo? ¡Los métodos del temporizador están ahí para rescatarte!

console.time("timeout-timer");

setTimeout(() => {
  console.timeEnd("timeout-timer");
}, 1000);

setTimeout(() => {
  console.timeLog("timeout-timer");
}, 500);

NOTA: Los setTimeouts no se ejecutan de inmediato, lo que genera una pequeña desviación del tiempo esperado.

¡Eso es todo amigxs! ¡Espero que esto te ayude a convertirte en un o una mejor dev!

@khriztianmoreno

Hasta la próxima.

Comments

[Camilo Martinez]

El console.assert es una maravilla cuando lo descubres. Uno de mis favoritos.

Solo por complementar, les comparto este truco:

Truco con console.log para hacer Debug

Camilo Martinez for equimancho ・ Jun 28 '21 ・ 2 min read

#spanish #javascript #webdev

Y una extensión con snippets para hacer debug

• Debug Snippets

[Khriztian Moreno]

Para ser sincero, casi no lo usaba, pero ultimamente lo he estado utilizando para hacer ejercicios para mis estudiantes y se hace, a mi modo de ver, mas entendible los resultados.

[Camilo Martinez]

Yo lo uso mucho sobre todo cuando hago ciclos y solo quiero ver lo que pasa con algunos casos y no llenar la consola con cada iteración.