UI Development

Console A-to-Z

The JavaScript Console is one of the most powerful and invaluable tools available when it comes to developing and debugging front-end web applications. It is mainly used to log information associated with a web page like javascript expressions, network requests, security errors, warnings, etc and it also allows us to interact with a web page by executing the expressions in the contents of the page.

What is the Console?

A console is an object which provides access to the browser debugging console.

We can open a console in a web browser by pressing: F12 key or by right-clicking, click inspect and goto console tab.

The console object provides us with several different methods for logging, clearing, asserting, grouping, etc. the information. Let’s explore all these methods made available by Console API.

In any browser console, when we type ‘console’, we can see the list of all the methods present in it.

Let’s explore some of these methods made available by Console API.

  • Logging/Outputting some information

There are four different ways to output a message to the console:

           1. log –

A log is a usual method used to log out values to a console.

console.log('JavaScript Console API'); 
console.log(1234);
console.log(true);
console.log(null);
console.log(undefined); 
console.log("Array", [1, 2, 3, 4]);
console.log("Object", {a:100, b:200, c:300, d:400});

Output:

         2. error –

Used to log error messages to the console. By default, it is highlighted with a red color icon.

         3. warn –

Used to log warning messages to the console. By default, it is highlighted with a yellow-colored icon.

         4. info –

Used to log some of the informational text to the console. By default, it is highlighted with a blue-colored icon.

As we can see from the above output, error and warn methods gives us the stack trace.

  • Tracing function calls

Used to print a stacked tree from the point at which the method was called. Since JavaScript is not a structured language it can sometimes be hard to get an idea of what happened and when. Especially when we have to work on someone else’s code. Then we can use this method.

var func1 = function(){
    func3();       
}
var func2 = function(){
    func4();
} 
var func3 = function(){
    func2();
}
var func4 = function(){
    console.trace('trace:')
}   
func1();

Output:

  • Clearing the console

Used to clear the consoles if any and a message will be printed like: Console was cleared’.

  • Measuring the time

The time method comes in two parts, a method to start the timer, and a method to end it.

From the above example, we can see that the same label is passed to both methods and it returns the amount of time taken in milliseconds.

  • Counting

Used to count the number of times the function/block/label has been invoked/called.

For example, here we have two counters, even and odd.

  • Grouping Information

The group method is used to group together a series of logs. Once this method is called, all other logs will be added to the group until groupEnd is executed to close it.

We can use groupCollapsed method to display the group as collapsed.

console.group('First group');
console.log('First group first message');
console.log('First group second message');
console.groupEnd();
console.group('Second group');
console.log('Second group first message');
console.log('Second group second message');
console.log('Second group third message');
console.groupEnd();
console.groupCollapsed('Third group');
console.log('Third group first message');
console.log('Third group second message');
console.groupEnd();

Output:

  • Asserting

Used to run simple assertion tests. It takes two parameters, a boolean expression, and an object. The assertion fails if the first argument becomes false and the next argument gets printed to the console.

  • Displaying objects/arrays as tables

Sometimes it can be messy to view huge data with console.log method. Using this method, we can view complex sets of data more easily. Also, we can sort the column data either in Asc/Desc order.

console.log("Displaying Arrays");
var langArr = ['JavaScript', 'C', 'C++', 'Java'];
console.table(langArr);
 
console.log("Displaying Objects");
var languages = {
    csharp: { name: "C#", paradigm: "object-oriented" },
    fsharp: { name: "F#", paradigm: "functional" }
};
console.table(languages);
 
console.log("Displaying Arrays of Objects");
var studentObj = [
    {'id': 1234, 'name' : 'poojitha'},
    {'id': 1235, 'name' : 'rekha'},
    {'id': 1236, 'name' : 'monika'},
    {'id': 1237, 'name' : 'renu'}
];
console.table(studentObj);

Output:

  • Representing Data

           1. dir –

Used to print the javascript representation of the specified object. It is mainly useful for examining HTML elements, as it displays the DOM representation of the element rather than the XML representation.

           2. dirxml –

Used to print the XML representation of an object.

  • Format specifiers

The following format specifiers are supported in the developer tools console.

FORMAT SPECIFIER
DESCRIPTION
%s String
%d or %i Integer
%f Floating point value
%o Expandable DOM element (as displayed in the ‘Elements’ tab of the dev tools)
%O Expandable JavaScript object
%c Formats the output using the CSS style you provide

Example –

In this blog, we’ve learned about the various console methods that we can use to debug our web applications. With these tricks, we can make coding easier and more fun.

About The Author