JavaScript Advanced Console Tips & Tricks

Use console.log() as an expert!

Logging to the console is an important part of debugging in JavaScript. In this article, I want to show you some tricks and tips to make your JavaScript console logging more productive and efficient.

One of the most commonly used and easiest things for logging in JavaScript is console.log(). However, there are many options to use the console more effectively. In this article, I want to show you how we can use console.log more effectively. Let’s begin!

Styling with console.log()

Most devs may see this as unnecessary, but why not make your works look more attractive. Here is a great method for this, I think. Grab your CSS skills and start using it on console!

To do this, you use the string replacement method described below, where you add a %c variable, and then add the styles as the variable parameter as shown below.

> console.log(
  "%cDebug with style with these console.log tricks",
  "font-size:50px; background:#F9F9F9; color:#581845; padding:10px; border-radius:10px;"
)

Use tables

We can take this a step further by putting objects in a table to make it more readable. Use console.table() when you have objects with common properties or an array of objects. Here we can use console.table({x, y}) and the console will show:

Group grouped logs

This can be useful for those moments when you are logging a lot of different things and want to group or nest relevant details together. Maybe you are logging information in a few different functions and you want a way to clearly label which function the information is coming from.

For example, if you’re logging a user’s details:

> console.group('User Details')
> console.log('name: Sunil Sandhu')
> console.log('position: Software Developer')
> console.groupEnd();console.group('Account')
> console.log('Member Type: Premium Member')
> console.log('Member Since: 2018')
> console.log('Expiry Date: 20/12/2022')
> console.groupEnd()

You can even nest groups inside of others if you want:

> console.group('User Details')
> console.log('name: Sunil Sandhu')
> console.log('position: Software Developer');console.group('Account')
> console.log('Member Type: Premium Member')
> console.log('Member Since: 2018')
> console.log('Expiry Date: 20/12/2022')
> console.groupEnd()
> console.groupEnd()
// notice that we have two groupEnd() calls at the end as we want to nest 'Account' inside of 'User Details'

Count with console.log()

The console.count() is the coolest method if you’d like to know how many times a component was rendered or maybe how many times a function was called. If you want the counter to start over the countReset can be used.

> console.count("name")
> console.count("name")
> console.count("name")
> console.count("surname")
> console.count("surname")

Warnings and errors

Probably you’ve seen warning and errors in the console but didn’t know how to add them. Want to increase the visibility of certain bits of information being logged?

console.warn() will display information with a yellow background. Maybe you want to take things one step further and use the same type of logging you get whenever you receive those scary red console logs with console.error(). You can achieve those like so:

> console.warn("This is a warning with yellow color!")
> console.error("This is an error with red color!")

String Substitution & Template Literals

Is String Substitution still used? For styling the console.log yes, but for other use case give we can use template literals I don’t think so. But here is how it do to it:

> const sayhi = "Hi 👻"
> console.log("%s My name is Emre", sayhi)

Using string substitution might have been done to avoid having to use the + to add strings together.

> const sayhi = "Hi 👻"
> console.log(sayhi+ " My name is Emre")

With template literals on can easily output this as below:

> const sayhi = "Hi 👻"
> console.log(`${sayhi} My name is Emre`)

Happy Learning! 😎