DEV Community 👩‍💻👨‍💻

Cover image for Algunos métodos más allá del console.log en Javascript
Khriztian Moreno
Khriztian Moreno

Posted on

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);
Enter fullscreen mode Exit fullscreen mode

console.table()

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();
Enter fullscreen mode Exit fullscreen mode

console.trace()

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");
Enter fullscreen mode Exit fullscreen mode

console.error()

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();
Enter fullscreen mode Exit fullscreen mode

console.assert()

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);
Enter fullscreen mode Exit fullscreen mode

console.time()

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!

Profile

@khriztianmoreno

Hasta la próxima.

Top comments (3)

Collapse
 
equiman profile image
Camilo Martinez • Edited on

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

Solo por complementar, les comparto este truco:

Y una extensión con snippets para hacer debug

Collapse
 
khriztianmoreno profile image
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.

Collapse
 
equiman profile image
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.

The Complete Guide to Full Stack Web3 Development

The most important tools, protocols, and frameworks for building full stack web3 apps, and most importantly - how to put everything together to lay the groundwork for building out any of your own ideas in the future.