When learning a new programming language, many individuals begin by learning how to create a “Hello World” program.
In JavaScript, you can print messages and other forms of information through the browser’s console using console.log statements.
When JavaScript isn’t working as it should, one of the most common solutions is to add log statements at various points throughout your programme so you can figure out what’s going on.
But trust me, you can do lot of other things with console object other than just logging
The console object includes more than simply log methods, and it can help you improve your JavaScript debugging skills. This blog post is going to cover some of the hidden features from the console object.
Read this blog post or watch the video below to learn about the advanced selectors.
Styling console.log() output
The Console object has some useful capabilities, such as CSS styling. This feature is activated by entering a unique token into the first console. See the example below
console.log("%cHello World","color:blue; font-style:italic;");Here I am using the %c to include the CSS styling in the Hello World statement. Resulting output is shown below.
console.table()
When you have strings, integers, or other primitives, console.log comes in handy.
When you’re trying to log an item, an array, or even an array of objects, it becomes less useful.
Rather than merely logging the data, console.table() will organize it into a table, which is usually simpler to read. Let’s see the example below
const countries = [
{
name: "India",
capital: "New Delhi"
},
{
name: "Canada",
capital: "Ottawa"
},
{
name: "Switzerland",
capital: "Bern"
},
{
name: "United States of America",
capital: "Washington, D.C."
},
];
console.log(countries);If I use console.log to print the content of the array “countries”, it will be printed like this which is definitely not very easy to understand.
Let’s use console.table() instead of console.log and you will see that contents will be displayed in table format which is very easy to visualize and also you will get the advantages of doing sorting on each column inside the table.
const countries = [
{
name: "India",
capital: "New Delhi"
},
{
name: "Canada",
capital: "Ottawa"
},
{
name: "Switzerland",
capital: "Bern"
},
{
name: "United States of America",
capital: "Washington, D.C."
},
];
console.table(countries);
console.groupCollapsed()
The console.groupCollapsed() function is an inbuilt method for collapsing grouped content until the console.groupEnd() method is called. The collapsed group is started, and the group can be ended with the groupEnd() method. You can give different names to different groups. One thing you need to keep in mind, that whatever name you will give in the console.groupCollapsed() method, you need to the use the same name in console.groupEnd() method as well. Below is the example code snippet.
console.log("Before the group");
console.groupCollapsed("Group for generating randorm numbers");
for(let i=0;i<500;i++){
console.log(Math.round(Math.random() * 25));
}
console.groupEnd("Group for generating randorm numbers");
console.log("Before the group");
console.time()
When your code performance becomes sluggish and junky, one of the first things you should do is figure out where the performance bottlenecks are.
console.time() and console.timeEnd() can be helful to understand that.
- console.time() – Starts a timer
- console.timeEnd() – Stops the timer and logs the execution time.
In the below code, I have used these two methods to calculate the execution time of the for loop.
console.log("Before the group");
console.time("Execution time to generate random numbers");
console.groupCollapsed("Group for generating randorm numbers");
for(let i=0;i<500;i++){
console.log(Math.round(Math.random() * 25));
}
console.groupEnd("Group for generating randorm numbers");
console.timeEnd("Execution time to generate random numbers");
console.log("Before the group");
Conclusion
This is only a small sample of the console object’s capabilities, but these are the ones I use the most on a daily basis.
You can always go to MDN to learn more.
Thank you for taking the time to read this! Stay safe!
0 Comments