DEV Community

buginit
buginit

Posted on • Edited 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

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 • Edited

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

You are welcome :)