How to work with Browser Console API (quick & short 2020 guide)

Hi folks, this time I decided to write a bit on the topic of browser console. With my experience, very few developers actually use it – and it does not matter if they are just starting out or have been coding for several years, they still seem to ignore it.

And I am not talking about advanced stuff, like printaing tables, styling or grouping records together, I am just talking about casual logging information into the console, so you can better understand the flow of your code.

And that’s the topic of this article.

debugging code
Photo by Alvaro Reyes on Unsplash

Table of contents:

  1. What is Console API
  2. How to use Console API
    1. console.log()
    2. console.info()
    3. console.warn()
    4. console.error()
    5. console.clear()
  3. Where to go next

1. What is Console API

Console API is one of the very useful features of JavaScript, that allows developers or people taking care of the source code oversee flow of the code and inspect debug information, warning or errors that happens while code runs.

2. How to use Console API

Console API – as mysteriously as it sounds is nothing else than a global javascript interface within the window scope in the browser or a console module inside NodeJS and it comes with a pack of built-in functions.

The usage of Console API is pretty straightforward. Have a look at the example below:

Example #1:

You can write your code just once and provided that the http request fails, you don’t need to debug your interface, you will just see the information in the console – and it can save you bunch of wasted minutes debugging what might have gone wrong.

const serverResponse = await httpGet("/endpoint", {param1, param2});

if(!serverResponse) {
    console.warn("The backend call was unsuccessfull!")
} else {
    console.info("Server call items", serverResponse.data);
}

Example #2:

Let’s say, you’re programming an ecommerce store, have the current available stock in a variable, a user clicks “add to cart button” and you need to remove the item from the array.

So user just clicks the button and nothing happens.

Now you’re screwed, since you don’t know what’s happening. You need to go now dig into your code and spend dozens of wasted minutes checking what has happened.

But, what if you instead, while initially programming that functionality put a contextual information in places, where if somethings goes wrong it will just print into the developer console the information what might have gone wrong?

Look at the example below, let’s say, a user clicks a button of adding a “grape” into the cart , but in the fruitInStock is no such item available – and just by adding a warning that will pop up only if such happens, you will know immediately where the issue lies and you can go investigate, not why is your button not working, but why the variable fruitInStock does not contain the item in the first place.

const fruitInStock = ["apple", "orange", "pear", "lemon"];

document.querySelector(".checkStock").addEventListener("click", e => {
    const queriedFruit = e.target.getAttribute("data-fruit");

    if(fruitInStock.includes(queriedFruit)) {
        const fruitIndex = fruitInStock.findIndex(fruit => fruit === queriedFruit);

        if(fruitIndex !== -1) {
            //removes the fruit from the stock
            fruitInStock.splice(fruitIndex, 1);
        } else {
            console.warn("Could not find an index of the queried fruit");
        }
    } else {
        console.info("The clicked fruit does not seem to be included in the stock");
    }
});

2.1 console.log()

console.log() is the basic command that print whatever you pass to it.

console.log("hello");
an example of console.log call
an example of console.log call

2.2 console.info()

console.info() similarly to the console.log() call prints whatever you pass to it into the console.

console.info("gday mate");
an example of console.info call
an example of console.info call

2.3 console.warn()

console.warn() similarly to the log or info call, prints whatever you pass to it, but also, provides you with this nice styling, so as you will notice immediately, if a warning comes up

an example of console.warn call
an example of console.warn call

2.4 console.error()

console.error() just like the calls above, prints into the console whatever you pass to it, but will provide you with this nice red styling indicated that something went wrong in your code and you should check that out.

an example of console.error call
an example of console.error call

Not only that, but console log, when you click the dark arrow on the left, will provide you with the trace where the error originated and through which elements it bubbled – so it will be really easy for you to find and fix that error.

2.5 console.clear()

Everything gets cluttered and if you manage to put dozes of records into the browser console, you can either clear it through a browser (each browser provides a button to do so) or you can just call console.clear() that will remove all of the logged records from the console from that moment.

an example of cluttered console
an example of cluttered console

3. Where to go next

Hopefully you’ve got an idea, how powerful the browser console can be.

If you did, props to you! 🤝

I bet you would like to know more about this awesome tool, so for now I will just put links for comprehensive articles, that talks about advanced stuff you can accomplish with Console API, like for example printing tables, styling, using placeholders, grouping, counting, timestamping and much more!

Wrapping up

There you have it guys. 🙌 Quick & short guide how to approach JavaScript Console API.

Hope you’ve learnt something new today or if you had already known about the Console API before coming across this article, put your thoughts below about if you liked the article or if you would something I might have missed.

I have already written an interesting article about the same topic and it is how you can make your console logs stand out and make them styled with css.

Or maybe if you’d be interested in more information solely about the browser console, check out the whole topic on the subject of Console API.

And also if you liked this article, don’t forget to share it with people you like (or maybe also people you don’t like, maybe you’ll became friends! 😆 ).

It is only matter of time ’till we see some exciting news again so if you want to be amongst the very first ones to hear about them, subscribe to my newsletter right here.

Anyways, thanks for reading and I’ll see you in the next article! 🤓

Yours in coding,

Ivan