DEV Community 👩‍💻👨‍💻

Cover image for Truco con console.log para hacer Debug
Camilo Martinez for equimancho

Posted on • Updated on

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

console.log

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

console.log

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

console.table


VS Code

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

Debug Snippets

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 🖖

ko-fi

Top comments (1)

Collapse
 
nicoalani profile image
Nico Alani -✨🛸☄️ • Edited on

Muy buen post!.
No tenia idea lo de

console.table();
Enter fullscreen mode Exit fullscreen mode


😯

🌚 Life is too short to browse without dark mode