Console Tips

Let’s say you have 3 objects:

const foo = { name: 'ethan', age: 22, human: true };
const bar = { name: 'm', age: 18, human: true };
const baz = { name: 'milo', age: 1, human: false };

The obvious approach to console.log() is to write each out as so:

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

However, this can be confusing in the console because the name of the variable is unknown. In bigger projects, this is a living hell.

Instead add the variables to an object! This is something called computed property names.

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

This not only is less code, but it also tells us which variable defines what data.

What if you need it to stand out in the console? Not a problem, add CSS:

console.log('%c Hello!', 'color: green; font-weight: bold;')

If the objects share common properties, you might want to output them as a table:

This is super nice for arrays as well

console.table([foo, bar, baz]);

Want to keep track of the time it takes to do something? Use time and timeEnd:

console.time('looper');
let i = 0;
while (i < 1000000) { i++ }
console.timeEnd('looper');

Let’s say you need to keep track of where the console.log originated from:

// Stack Trace Logs
const deleteMe = () => console.trace('bye bye database');

deleteMe();
deleteMe();