STOP using simple console.log in JavaScript. Try this instead

Debugging. Something that programmers try hard to avoid, only to make more bugs in code.

Coding without bugs is something even the best programmers would find hard. Which is why, you should always debug code.

And one of the best ways to debug JavaScript code is the amazing console.log(). Except, there are better ways.

And that is the point of this article. To tell about better ways to interact with the console.

Typing console in a sophisticated IDE gives a variety of auto completions.

Autocompletion options in Visual Studio Code when typing console.

Instead of using the normal console.log(), here are some better options.

Using these makes the process of debugging a lot easier and faster.

console.warn() and console.error()

When there is a bug that can stop the working of your application, using another console.log to debug it wouldn’t work.

Your console messages would get mixed up. You can’t find the message that your looking for.

But, using console.warn() and console.error() are good ways to overcome this.

console.warn("This is a warning");

The warning message on Microsoft Edge

console.error("This is an error")

The error message on Mircosoft Edge

Timing operations

Want to see how much time that piece of code took to run?

Use console.time().

First, create a timer and give it a unique name.

console.time("Loop timer")

Then, run the piece of code.

for(i = 0; i < 10000; i++){
    // Some code here
}

Then, call timeEnd().

console.timeEnd("Loop timer")

Here is all the code.

console.time("Loop timer")
for(i = 0; i < 10000; i++){
    // Some code here
}
console.timeEnd("Loop timer")

The code took about 0.4 milliseconds to run.

This is very useful in CPU intensive applications that would take some time, like Neural Networks, or HTML Canvas reading.

Tracing how the code got there

Want to see how a function was called?

function trace(){
    console.trace()
}
function randomFunction(){
    trace();
}

Over here, there is a method called randomFunction that calls trace, which calls console.trace().

So, when you call randomFunction, you will get an output like

Output on Edge

It shows that anonymous (which is the main JavaScript code) called randomFunction, which called trace().

Group console messages

If you group console messages, you can make your console easier to read.

console.log("Test1!");

console.group("My message group");

console.log("Test2!");
console.log("Test2!");
console.log("Test2!");

console.groupEnd()

All the Test2 messages come under ‘My message group’.

The grouped messages

Erase the console

If you are following this tutorial, then your console will be pretty full. Let’s erase it.

console.clear();

Well, let me show you the console.

The cleared console

Not much to show. Now that we’re clear again, let’s continue.

Tables

Let’s add tables to visualize data better.

Imagine we have two objects.

var person1 = {name: "Weirdo", age : "-23", hobby: "singing"}
var person2 = {name: "SomeName", age : "Infinity", hobby: "programming"}

Simply console.log would make the data look messy.

A table would be better.

console.table({person1, person2})

A console table in JavaScript

Never knew JavaScript consoles can look so clean, right?

CSS in the console?

Yes, you read that right.

You can add CSS to the console.

console.log("%c I love JavaScript!", 
  "color: red; background-color: lightblue; border: solid");

Notice the %c sign. That is where the magic lies.

CSS styling in JS console

Thanks for reading the article so far. This is the 5th article of a series about various JavaScript APIs and Features.

You can find the other articles here: List: JavaScript APIs and Features | Curated by Anirudh Munipalli | Medium

Follow to get notified when I post more articles. You’re an amazing reader.

Sources

Window Console Object (w3schools.com)