DEV Community

Cover image for console.log() hack for debugging
Camilo Martinez
Camilo Martinez

Posted on • Edited on

11 1

console.log() hack for debugging

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


Sometimes we need to console.log multiple variables and I've seen myself creating a console.log with a previous title to identify the value and so on for each 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

Hack

An easy quick way to get the same, without writing those previous titles is to put all variables inside an object {}.

   console.log( {name, age, language, isDev} );
Enter fullscreen mode Exit fullscreen mode

console.log

But wait a moment. It can be better.

Super hack

Change .log with .table and voilá. You will have a better view of all variable names and values.

   console.table( {name, age, language, isDev} );
Enter fullscreen mode Exit fullscreen mode

console.table


Bonus

There is an extension called Debug Snippets dedicated to debugging that includes a lot of console.log combinations.

Debug Snippets

Two of those snippets are related to the hacks mentioned before.

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 🖖

beer

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

Top comments (3)

Collapse
 
baharajr profile image
Bennett(he/him)

Nice one boss 👏 👏

Collapse
 
dmcantero profile image
dmcantero

Good one!

Collapse
 
ptprashanttripathi profile image
Pt. Prashant tripathi

Nice trick, lemme take notes

Image of Datadog

Get the real story behind DevSecOps

Explore data from thousands of apps to uncover how container image size, deployment frequency, and runtime context affect real-world security. Discover seven key insights that can help you build and ship more secure software.

Read the Report

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, cherished by the supportive DEV Community. Coders of every background are encouraged to bring their perspectives and bolster our collective wisdom.

A sincere “thank you” often brightens someone’s day—share yours in the comments below!

On DEV, the act of sharing knowledge eases our journey and forges stronger community ties. Found value in this? A quick thank-you to the author can make a world of difference.

Okay