Truco con console.log para hacer Debug

Idiomas: [🇺🇸] English - [🇪🇸] Español

---

Algunas veces necesitamos mostrar en la consola múltiples valores de las variables con console.log y para poderlos identificar adicionamos algún texto inicial el cual indica la salida a la que corresponde cada variable.

console.log("name: ", name);
console.log("age: ", age);
console.log("language: ", language);
console.log("isDev: ", isDev);

Truco

Una forma de hacer lo mismo sin tener que escribir esos textos de identificación es meter todas esas variables dentro de un {}.

   console.log( {name, age, language, isDev} );

Pero espera un momento, si cambiamos una sola palabra puede ser aún mejor.

Super truco

Cambia .log por .table y ya está. Vamos a poder ver el resultado tanto de nombres como de valores de forma más legible.

   console.table( {name, age, language, isDev} );

---

VS Code

Existe una extension llamada Debug Snippets que se dedica al tema de depuración e incluye varias opciones para usar console.log.

Dos de los snippets están relacionados con los trucos mencionados anteriormente.

Trigger	Description	Result JS/TS
cld→	log with destructuring	console.log({$name})█
ctd→	table with destructuring	console.table({$name})█

---

That’s All Folks!
Happy Coding 🖖

Comments

[Nico Alani -✨🛸☄️]

Muy buen post!.
No tenia idea lo de

console.table();

😯