Hello friends, In this tutorial, we are going to learn about the Javascript Console. We will try to learn all the Javascript console concepts, which will help us debug our code more efficiently.
what is the javascript console?
In the web console, we use our console command to get the information exactly what is happening on our web page. We can also check what API call is going, security error, warnings, CSS issues, etc. Web console enables us to execute javascript on the web page. In javascript, the console provides us to debug the web page and find the error. It is an essential tool for web developers to debug the issues. There are many different types of console methods we will try to understand all the concepts one by one.
The following are the different types of console that we will be going to discuss in the tutorial.
- log()
- error()
- warn()
- clear()
- time() and timeEnd()
- table()
- count()
- group() and groupEnd()
- custom console logs
- trace()
1. Javascript console.log()
Javascript console.log is mainly used for printing the log or output to the web console. In Javascript console.log() we can pass any data type like string, array, object, boolean, etc.
Let me see show some examples.
console.log('Hi from console log'); // String
console.log(23232)// Number
console.log(true) // Boolean
console.log([1,2,4,5,7,9]) // Array
console.log({name:'John', age:32 }) // Object
console.log(), we can use mainly for the debugging process in our code. In one of our projects, we have created a module in which we have added the project’s logging process based on functionality. For example, in our application, there are twenty modules like authentication, authorization, cart, product page, etc. If there is some bug on the production, we need to start the specific log. By starting that log, we will see logs only for that module. It helps us to debug the bug fast. In the future, we are going to do this tutorial also.
In the console log, we can add style also to identify the warning, error, etc. Let see an example
console.log('%c Color ful logs! ', 'background: #222; color: #bada55');
The output will be like this. It has green text with a background color.
2. Javascript console.error()
Console.error() this method for writing error messages to the console. It is a very helpful tool for testing purpose.
console.error("You made a mistake in the code");
3.Javascript console.count()
The console.count() writes to the console the number of times the value is called. For example, take an example if we are iterating the users who have a salary more than a certain amount. By using the console.count() we can get how many times that condition has met.
for(var i = 0; i < 7; i++){
console.count();
}
VM580:2 default: 1
VM580:2 default: 2
VM580:2 default: 3
VM580:2 default: 4
VM580:2 default: 5
VM580:2 default: 6
We can see that the default added label is “default” in the output. If we want to change, we have the option to change it. We have replaced the default with “Counter countdown.”
for(var i = 0; i < 7; i++){
console.count('Counter countdown');
}
VM628:2 Counter countdown: 1
VM628:2 Counter countdown: 2
VM628:2 Counter countdown: 3
VM628:2 Counter countdown: 4
VM628:2 Counter countdown: 5
VM628:2 Counter countdown: 6
VM628:2 Counter countdown: 7
4. Javascript group() and groupEnd()
The console.group() methods allow us to group the console.log() in a separate block. It will help us to get the idea of a log belongs to a specific group. Console .groupEnd() is used to end that specific groups of logs. Let see the examples
console.group()
console.log('State 1 phase 1');
console.log('State 2 phase 2');
console.log('State 3 phase 3');
console.log('State 4 phase 4');
console.log('State End phase End');
console.groupEnd();
console.log('outside the group');
The output for the console.group() and console.groupEnd() will look like the above image. We can see that console.log() has been grouped and ended just above the console.groupEnd(). It has been advantageous while debugging the issue in our application.
5. Javascript console.info()
The console.info() methods use to output info messages to the console. This method accepts only a single parameter message, which is mandatory and used to output the web console information.
console.info('In side the information')
VM997:1 In side the information6. Javascript console.table()
The console.table() method is used to output the data in table format in the console view. The first parameter is required and must an array or an object holding the data. The console.table() gives us the ability to generate a table inside a web console.
console.table([
{
first: 'John',
last: 'Loe',
},
{
first: 'Abhishek',
last: 'Tripathi',
birthday: '18930113',
},
{
first: 'Henri',
last: 'Paul',
}
]);
It will all the provided data into the tabular format in the web console as given in the image.
7. Javascript console.time() and console.timeEnd()
We have seen many times that sometimes we need how much time is elapsed to complete the process. For that reason, console.time()
and console.timeEnd() is very useful.
In a nutshell, we can say that console.time() will start the timer.
console .timeEnd() will stop the timer and give the time in which the process has completed. This method allows you to time certain operations in your code for testing purposes. The result will be in the milliseconds and might be different each time, depending on the page’s execution.
console.time("test for start and end time");
for (i = 0; i < 1000000; i++) {
// some code
}
console.timeEnd("test for start and end time");
output:
VM1096:5 test for start and end time: 4.4619140625 ms
8. Javascript console.trace()
The console.trace is very useful in debugging regarding the execution path. Primarily the console.trace() give us the information on hows the code ended at a specific time(point).
const firstSection = () => { secondSection(); };
const secondSection = () => { thirdSection(); };
const thirdSection = () => { fourthSection(); };
const fourthSection = () => { console.trace(); };
firstSection();In the given, we have seen that there are four functions are defined. They are calling each other the first function call the second likewise. In the fourth function, we have added the console.trace() method. It will output the flow of the execution.
9. Javascript console.warn()
The console.warn() method writes a warning to the web console. It accepts a single parameter message, which is mandatory.
console.warn('Its warning');
10. What is the difference between the Javascript console.log and console.dir() ?
The console.log() method used to display the string representation of any object passed to it. The console.dir() displays an interactive list of the properties. The output is presented as a hierarchical listing.
var a = {
name: 'John',
lastName: 'Doe',
age: '32'
}
console.dir(a);
console.log(a);
Conclusion
As we have seen, the Javascript console provides us a very efficient tool to debug our code. We can get the code execution time of the function by using console.time(). We can style the log to differentiate the log. I hope you have all find this tutorial useful.