Mastering the Console in Frontend Development

What is the Console?

The console is the tool where you can test or check whether your code is working properly or not.

It can be used to access the browser to troubleshoot the errors related to your code.

Remember a console is an object that can access the methods like log() using the dot (.) operator.

Syntax :

Object.Method(parameters);

Different types of methods are as follows.

1. console.log() :

As we know this method can display messages or mathematical expressions in the console.

Syntax :

console.log(parameter);

Example :

// Console.log() Method

console.log('name');          
console.log(1);
console.log(true);
console.log(['a','b','c','d']);
console.log({ one: 1, two: 2, three: 3 });        

Output :

2. console.info() :

The console.info() is a method in JavaScript that is used to display the important messages to the console.

Syntax :

console.info(parameter);

In this method, the parameter can be of string, objects, and arrays.

Example :

// Console.info() Method

console.info('This is information');
console.info({firstName : 'abc', lastName : 'xyz'});
console.info([1,2,3,4,5]);        

Output :

3. console.clear() :

As simple as the name given, it is used to clear the mess in the console.

Syntax :

console.clear();

This method doesn’t require any parameters.

Example :

// Console.clear() Method

console.clear();        

Output :

By default, the console logs the message ‘Console was cleared’.

4. console.error() :

This method is used to find out errors in the code. Console.error() method is developed for debugging.

Syntax :

console.error(parameter);

Parameters of string type are required.

Example :

// Console.error() Method

console.error('Error on line 1');        

Output :

The output of the console is in red color.

5. console.warn() :

If something goes wrong then this method is used to display warning messages to the console.

Syntax :

console.warn(parameter);

This method also requires a string type parameter.

Example :

// Console.warn() Method

console.warn("This is a Warning");        

Output :

By default, the color of the message is in yellow color.

5. console.assert() :

The assert method only displays the message only if the given expression is false.

Syntax :

console.assert(parameters(Expression, Message);

We can only pass two parameters in the method :

Expression: This is the boolean expression that is true or false can be passed.

Message: This is a string message that displays if the expression is false. You can also pass objects and arrays.

Example :

// Console.assert() Method

console.assert(document.getElementById("MyId"), "There is not a valid ID found");        

Output :

In this example the ID is not found then the console logs the following message ‘There is not a valid ID found’.

6. console.count() :

As we used the count variable to count the number of repetitions in the loop.

The console.count() method also counts the number of times it is called in the program.

Syntax :

console.count(label);

Parameters which is passed in the method are a type of label which is a string.

If the parameters are not present in the method then the default parameters will be added.

Example :

// Console.count() Method

let i = 0;
while (i < 3) {
  console.count();
  i++;
}        

Output :

As the loop goes through every iteration the console adds the ‘default’ name with a number.

7. console.trace() :

The console.trace() method tracks the execution of the code from starting point to the endpoint and how the code ended at a certain point.

Syntax :

console.trace(label);

This method accepts any data as a single parameter.

Example :

// Console.trace() Method

function firstFunction() {
  function secondFunction() {
    console.trace();
  }
  secondFunction();
}

firstFunction();        

Output :

8. console.table() :

This method displays data in the form of tables.

The first compulsory parameters passed are in the form of Arrays or Objects, and it requires another parameter as a column(optional parameter).

Syntax :

console.table(any data);

or

console.table(any data, data columns);

Example :

// Console.table() Method

// Example 1

console.table(['Zero', 'One', 'Two']);                      // only one parameter is passed

// Example 2

function studentDetails(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}                                                           

let steve = new studentDetails('Steve', 'Smith');
var peter = new studentDetails('Peter', 'parker');
var harry = new studentDetails('Harry', 'potter');

console.table([steve, peter, harry]);              

Output :

9. console.time() & console.timeEnd() Methods :

The time method is used to track how long any type of operation is required to complete the task.

It starts from the console.time() method and ends to console.timeEnd() method. This is the period where this method calculates the total time.

Syntax :

console.time(label);

Example :

// console.time() and console.timeEnd() Methods

function timeCalculator() 
{
  i = 0;
  console.time('While loop for 10 iterations');           // time starts method
  while (i < 10) 
  {
    i++;
  }
  console.timeEnd('While loop for 10 iterations');        // time end method
}
timeCalculator();        

Output :

The console logs the time with the message passed to it.

10 Grouping Methods :

1. console.group() :

This method allows grouping the content logs of the code. It is used to start the group.

Syntax :

console.group(label);

The parameter label which is the type of string is optional in the method.

2. console.groupEnd() :

This method is used to end the group.

Syntax:

console.groupEnd();

No parameters used in this method.

3. console.groupCollapsed() :

This method is used to structure the separate group in a collapsed manner. It's like nesting in the loop.

Syntax :

console.groupCollapsed(label);

This method uses only one label parameter as a string type.

Example :

// group, groupEnd and gropuCollapsed() Methods

console.group('Different types of programming languages');          // Group Method with parameter             

console.log('JavaScript');
console.log('Java');
console.log('Python');
console.log('C');
console.log('C++');
console.groupEnd();                                                  // GroupEnd Method                                                        

console.groupCollapsed();                                            // GroupCollapsed Method without parameter    

console.group('Web development skills');                             // Group Method with parameter 
console.log('HTML');
console.log('CSS');
console.log('JavaScript');
console.groupEnd();              

Output :

Conclusion :

This article introduced you to the different types of console methods. You can use these methods in your debugging journey.

Thank You for Reading!

If you found this post informative and valuable, I’d love for you to connect with me for more front-end development insights. Follow me here on Medium, Codepen and connect with me on LinkedIn to stay updated on the latest in web development, design, and more.

Let’s connect!

?? ???????????????? — https://www.dhirubhai.net/in/dimple-kumari/

?? ???????????? — https://medium.com/@dimplekumari0228

?? ?????????????? — https://codepen.io/DIMPLE2802