DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
buginit
buginit

Posted on • Updated on

How To Debug JavaScript Like A Pro.

First of all, I want to tell you, yes there are good and bad ways to console.log in JavaScript that can make your life easier as a JavaScript developer. So let’s get started on how to debug javascript?

Let’s imagine we have 3 objects to log like below.

const foo = { name: 'tom',   age: 30, nervous: false };
const bar = { name: 'dick',  age: 40, nervous: false };
const baz = { name: 'harry', age: 50, nervous: true };

Bad Code πŸ’©

console.log(foo);
console.log(bar);
console.log(baz);

In the above approach, the problem is we don’t have the variables name to see which one is which? You have to concatenate a string to see which is which.

Good Code βœ…

But there is a trick called Computed Property Names/property shorthands

console.log({ foo, bar, baz });

It reduces the code but also shows exactly which variable defines the data.

one line of code.
one console log.
and all the specified information.

There is more in this tutorial here To see all examples with results click here

Follow for latest updates Facebook Twitter

Top comments (4)

Collapse
 
thomasjunkos profile image
Thomas Junkツ • Edited on

Thank you! Nice tip.

But there is a trick called Computed Property Names

I assume you meant property shorthands

And if you really want to rock the party, do it in a table ;)

const foo = { name: 'tom',   age: 30, nervous: false };
const bar = { name: 'dick',  age: 40, nervous: false };
const baz = { name: 'harry', age: 50, nervous: true };

console.table({foo,bar, baz})

Here the fiddle

Collapse
 
buginit profile image
buginit Author • Edited on

You can say that too;

the table example I covered here in all examples with results and more

and thank you for your comment really appreciated!!! :)

Collapse
 
namstel profile image
Namstel

Thanks for the tip!

Collapse
 
buginit profile image
buginit Author

You are welcome :)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post