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

Comments

[Thomas Junkツ]

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

[buginit]

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!!! :)

[Namstel]

Thanks for the tip!

[buginit]

You are welcome :)