Console debugging

A lot of people use console.log to debug in the console.

The log() method of console logs things to the web console. What some people may not know is that you can log things in nice ways! Here are three:

The following objects could be logged one at a time:

const cat = { name: 'Fluffy', colour: 'orange', specialSkill: 'staring' }
const dog = { name: 'Thor', colour: 'brown', specialSkill: 'running' }
const fish = { name: 'Glub', colour: 'blue', specialSkill: 'blowing bubbles' }

And the results would be as follows:

console.log(cat) // {name: "Fluffy", colour: "orange", specialSkill: "staring"}
console.log(dog) // {name: "Thor", colour: "brown", specialSkill: "running"}
console.log(fish) // {name: "Glub", colour: "blue", specialSkill: "blowing bubbles"}

Or, they could be logged with a name label using 'computed property names'. To do this, create an object with the variables as keys:

console.log({ cat, dog, fish }) // {cat: {…}, dog: {…}, fish: {…}}

Inside this object, there will be the details of each variable with its corresponding key:

cat: {name: "Fluffy", colour: "orange", specialSkill: "staring"}
dog: {name: "Thor", colour: "brown", specialSkill: "running"}
fish: {name: "Glub", colour: "blue", specialSkill: "blowing bubbles"}

Define styles like this in the console:

var styles = [
  'background: linear-gradient(#21618C, #5DADE2)',
  'padding: 5px',
  'border-radius: 8px',
  'text-align: center',
  'color: white',
  'display: block',
].join(';')

Then prefix console log with the %c flag, adding the styles variable to the end:

console.log(
  `%c My cat is ${cat.name}, ${cat.colour}, ${cat.specialSkill}`,
  styles
)

Try it in your console or look at this example on CodeSandbox!

To display objects in a table in order to more easily compare them, try using console.table. You can do so with the animal objects above by running:

console.table([cat, dog, fish])

Not only will there be a nicely-formatted table to see in the console, but the (unlabeled) objects will also be displayed as well.

All of these things make console logging a little better. Not sure how many I will start using myself, but I'll give them a go to see whether I like them :)