Introduction
Our main focus in this blog post is to explore and unlock the power of the JavaScript console object provided by the Console API.
Almost all modern browsers propose a set of handful built-in developer tools for their users (mainly web developers). These tools include what we call the Web Console. It’s a tool that is similar to a shell interface. In fact, it’s used mainly to log information related to a web page.
As a JavaScript developer, you might use the Web Console to debug your code. This tool allows you to interact with the web page using JavaScript. Thus, within the page’s context, you could run JavaScript expressions on the fly. So, in this tutorial, we’re going mainly to see how to use one specific object which is the console object to interact with the Web Console.
How to Access the Console in a Browser
In this section, we’ll see how to access the Web Console on the most used web browsers out there: Chrome and Firefox.
On Google Chrome
To open up the Web Console on google chrome, you could click on the three dots at the top-right of your browser window. Then hover to More tools > Developers tool
If you click on “Developer tools”, a panel will open at the bottom of the page. You’ll notice that it contains a set of tabs for the different available tools. Here, we’re concerned with the “console” tab.
You could also go shorter to open the same panel by right-clicking on a web page and choosing “Inspect” from the menu.
You can also use a shortcut key from the keyboard to access the Console. Hold “Ctrl + Shift + I” to open the Dev tools. Then choose the Console tab.
On Firefox
In the same way, to open the Console on Firefox, click on the triple lines (≡). Then hover to More tools > Web Developers Tool and click on it to open the panel. The panel will show up at the bottom of the page. It will also contain a “console” tab.
You can also right-click on the web page and click on “Inspect” to immediately access the dev tools and choose the console tab.
Similarly, hold the “Ctrl + Shift + I” shortcut key for achieving the same result.
How to Use the JavaScript Console Object?
The console object allows you to interact with the Web Console. it has many useful methods that allow you to perform several actions. In this section, we’ll be looking at how can you use the console object to interact with your code.
Logging Text : console.log() and variants
One of the main features of the console is to output text and data to the Web Console. You could use the console object to generate and log all different sorts of outputs. This could be achieved through several methods like : console.log(), console.info(), console.warn(), console.error(), or console.debug() The main difference among these methods is in the way the output is styled. Moreover, for each method, the output is going to be flagged so that you can filter them using the filtering option provided by your web browser on the “console” tab.
The most common method used by developers to log something to the console is the console.log method. Let’s see the following example:
const country1 ={ name:"Algeria", continent:"Africa", code:"dz", population:45 };
console.log("Let's output the object:");
console.log(country1);Here, we’re logging some text and data to the console. The output will look something like the following
Now, let’s use the same object to output a complete sentence using string substitutions. The new code example is going to be as follows
const country1 ={ name:"Algeria", continent:"Africa", code:"dz", population:45 };
console.log("%s is a country located in %s; its population is at around %dmil.", country1.name, country1.continent, country1.population);If your run this piece of code, the console will log the following
Algeria is a country located in Africa; its population is at around 45mil.
As you’ve might already noticed, in line 2 of the above code, we’ve used some substitution strings. “%s” to output a string. “d%” or “%i” to output an integer.
There’re other substitution strings that you might consider. “%o” for objects and “%f” to output floating-point values.
Now, what if we would like to style the output? is it possible? Yes. it’s possible by using the “%c” directive which allows you to use CSS style for your output. Let’s see this example
console.log("Styles: %cred %cblue %cwhite color and black background ", "color: red", "color:blue", "color:white; background:black");The result would look something like the following
Notice that when you use the “%c” directive, the style will affect only the text after it until it reaches the end of the text or a new styling directive.
Logging Tables: console.table()
Sometimes you need to log data in a form of a table. You can use the console.table() for that. This method takes a first mandatory argument which represents the data to display. The data must be tabular data (i.e array or object). Let’s have a look at the following example
const continents = ["Asia", "Africa", "North America", "South America", "Antarctica", "Europe", "Austrilia"]; console.table(continents);
In this example, we have an array of continents and we are logging it in a form of a table. The result looks like this
Notice that the first column is labelled “index“. It refers to the index of the element in the table, and each element represents a row in the table.
What if you would like to display an object in a form of a table? Let’s tweak the very first example of this tutorial
const country1 ={ name:"Algeria", continent:"Africa", code:"dz", population:45 };
console.log("Let's output the object in a form of a table:");
console.table(country1);The output looks like the following
Each element in the object is a row in the table. The first column is labelled “(index)”, and its values are the object keys. The second column labelled “Value” holds the property values.
Now, the good news is that you can display a collection of compound types as a table. What do we mean by that? Let’s assume that we have an array of objects like in the following example
const country1 ={ name:"Algeria", continent:"Africa", code:"dz", population:45 };
const country2 ={ name:"China", continent:"Asia", code:"cn", population:1400 };
const country3 ={ name:"Russia", continent:"Europe", code:"ru", population:144 };
console.table([country1, country2, country3]);The output looks like this
Note that the columns are labelled with the property name.
Try to ouput an object of objects or an object of array in a form of a table.
A task for you 😉
You know what? You can tell the console.table() method what columns to display by using its second parameter.
const country1 ={ name:"Algeria", continent:"Africa", code:"dz", population:45 };
const country2 ={ name:"China", continent:"Asia", code:"cn", population:1400 };
const country3 ={ name:"Russia", continent:"Europe", code:"ru", population:144 };
console.table([country1, country2, country3], ["name", "population"]);In this example, we are using a second argument which accepts an array of the columns to display. Here’s the result
We are logging into the console a table of “name” and “population” columns only beside the (index) column.
Logging Time: console.time(), console.timeLog(), console.timeEnd()
Sometimes you need to calculate the time an operation takes in your code. For that you could use console.time() to start a timer, console.timeLog() to log the time and console.timeEnd() to end the timer.
Assuming that we want to calculate the time it takes to loop and increment a variable 1000000 times as in the following example
console.time("loop and increment");
let i=1;
for (let index = 0; index < 1000000; index++) {
i++;
}
console.timeEnd("loop and increment");In line 1, the console.time() method takes one argument which is the label of the time. In line 6, we end the time with the console.timeEnd() method which takes as an argument the name of the timer. It will automatically log the time it took to finish the operation(s) after starting the timer. The result will look something like that
loop and increment: 20.023193359375 ms
Yeah, I got a slow machine 🙁
Conclusion
This tutorial unlocked some secrets about the use of the console object in JavaScript. It’s common that most JavaScript developers are used to working with console.log(). However, the console object can be used in many different ways. You can take a look at the MDN documentation for more insights.
If you want to learn JavaScript from the ground up, you can enrol on our premium course here.
For your questions, use the comments section below.
Enjoy 🙂