Deep Dive into the JavaScript’s Console

Hello reader,

Today we will look into JavaScript’s console class. We, the developers, have been using the console for debugging our JavaScript code. But most of us only use the log method i.e., console.log(‘some message’). Is it all that the console class gives us? No, definitely not. In fact, it has a vast pool of functions that we as developers should know how to harness.  And today I will tell you a few more bell and whistles that javascript gives us.

Console.log:

So we all have been using the simple console log to put text to our browser console. If you don’t know how to use this then below is a sample example.

const LOG_MESSAGE = 'message log';
// Plain console message;
console.log(LOG_MESSAGE);

Now we all know the basic use of this log method. Simple, it will log your desired text into the browser console. Is that all it can do ? Let us look little more into the log function and see what else it is capable of doing for us.

Let us add some colors to our console statement. More specifically we will add some CSS classes to our console. Below our code you can see a screen shot of how the output of this in a browser console

const LOG_MESSAGE = 'message log';
//Console message with CSS properties
console.log("%c" + LOG_MESSAGE, "color:green;font-size:40px");

Console.Warn

Console’s warn method is a very simple method that can be used to add a warning message to the console. A warning message usually is a piece of code that will not give any compilation errors but is a warning sign that something has gone wrong in the code and it may potentially throw an error in future o may not be able to give you or the user the desired output. Below is an example snippet of a warning log.

const WARN_MESSAGE = 'message warn';
//Console Warn
console.warn(WARN_MESSAGE);

Console.Error

Console’s error message is used to indicate that some error or exception has happened in the code. It might be a run time error that the parser has thrown or an exception has happened in the code. These are error that developers need to take care of. Below is a code snippet of an error log

const ERROR_MESSAGE = 'message error';
//Console Error
console.error(ERROR_MESSAGE);

Console.Assert

This method is probably the least know method in the console class. But it’s usage is really unlimited. Assert takes a Boolean expression and evaluates its truth value. If the expression is turned out to be false, then it will print false to the console. However, and this is important to note, if the expression is true then it will not display anything to the console. That is an important point to note. Below is a snippet of a false assert log.

const AGE = 25;
//Console Assert
console.assert(AGE === 26);
console.assert(AGE === 25);

Console.Table

Probable the most useful console function that can make developers live much simpler. As the name suggests, it displays/logs a JavaScript object in a tabular format. It will have two columns, one for the object keys and the other for the object value. Below is a snipped of table log.

const TABLE_OBJECT = 
    {
        name: 'Mike',
        age: 25,
        designation: 'VP Marketing'
    }
//Console Table
console.table(TABLE_OBJECT);

Console.Time

This console log is used to track the time elapsed between code blocks. In other words it can be used to measure how much time a code block takes to complete execution. It uses a label, which is nothing but a plain string text which is used at the beginning and end to the timer logs. Consider the below example. We started the timer. Then we went to fetch some post information using an asynchronous operations. Then when we come back we try to end the timer log. Now we can see how much time does this asynchronous call takes.

const TIME_URL = 'https://jsonplaceholder.typicode.com/posts';
//Console Timer Started
console.time('fetch_name');
fetch(TIME_URL)
  .then(response => response.json())
  .then(console.timeEnd('fetch_name')); //Console timer ended

Well this is not the end to the list of the functions that is provided by the console class. There are lot more to learn and discover. Feel free to dive further deep into the console class and explore more functions that suits your need.

Thanks for being here till the end. If you enjoyed the article make sure to subscribe to my blog, so that when I publish a new article, you will get a notification.

One thought on “Deep Dive into the JavaScript’s Console

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: