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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more