How to use the JavaScript Console correctly!

How to use the JavaScript Console correctly!

The JavaScript Console is well known to all web developers. But as only few know, it hides many unknown functions. This article brings light into the darkness!

By default the console.log() function is used. This function allows us to output strings and integers, but also arrays and objects. The Console object has so much more to offer.

Not all functions are available in every browser. Here you can find a list of browser compatibility.

Stop times – console.time()

This function is perfect for comparing two or more algorithms. It can measure the time of execution. And this is how it looks like with a practical example:

console.time('example');
for (let i = 0; i < 1000000; i++) {
    document.getElementById('app').innerHTML = i;
}
console.timeEnd('example');

Here the console.time(‘example’) function gets an identifier to stop the timer. In this example a loop runs through 1.000.000x and writes the number into the HTML at every run. After the loop we stop the time via console.timeEnd(‘example’). Our output in the console will look like this:

Console time

Output warnings – console.warn()

Especially when we write our own libraries for JavaScript, it is very important to inform the user when errors or warnings occur.

However, when I wrote this article I found out that this function is not standard and not suitable for public websites! For this reason I don’t go into the exact function here, but refer to the documentation of Mozilla, which contains an explanation.

Clear Console – console.clear()

A small, but nevertheless very useful function is to empty the console. And that’s exactly what console.clear() does. The function doesn’t expect any parameters:

console.clear();

All previous entries will be removed from the console and this message will be displayed:

Console cleared

Grouping outputs – console.group()

This function is useful if you want to structure different values. You can compare it with file folders, for example. In reality, this function is well suited for the output of files and file paths. In the following example the function groupEnd() is used to get back up one level. The function groupCollapsed(), like group(), creates another layer, with the difference that groupCollapsed() collapses the contents.

Optionally group() and groupCollapsed() can be given a parameter with the heading of the group.

console.log('Level 0');

console.group('Group for Level 1');
console.log('Level 1');
console.log('Also Level 1');

console.group('Group for Level 2');
console.log('Level 2');
console.log('Yeah');
console.log('Oh, still you? :o');
console.groupEnd();

console.log('Back to Level 1');

console.groupCollapsed('Collapsed Level 2');
console.log('collapsed content');
console.groupEnd();

console.log('See you soon!');

And this is what the issue looks like. The group “Collapsed Level 2” can be opened by one click:

Console group

Mark error messages – console.error()

The error() function works similar to the log(), warn() or info() function. It can output any attribute, be it string, integer, object or array. The special thing about the error() function is that it is highlighted by a colored background and an x icon. Especially for error messages with your own libraries, but also with your own functions, this function should be used.

console.error('This is an fatal error!');

Results in the following output:

Console error

The various output options of the function (parameter notation) are described in more detail in the next item.

Output attributes – console.log() & console.info()

Last, but not least the most popular console functions. These functions display attributes in the console. The following examples also refer to the warn() and error() functions:

There are two different syntaxes for calling these functions:

console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);

On the one hand, you can pass different objects, which are simply output one after the other:

const obj1 = {
    name: 'Peter Parker',
    username: 'i_am_a_spider'
};
const obj2 = {
    name: 'Tony Stark',
    username: 'jarvis'
};
const obj3 = Math.PI;
console.log(obj1, obj2, obj3);

This code produces this output:

Console log - multiple parameters

In the second variant, you can use substitution strings (substitute values). %o and %O become an object, %d and %i an integer, %s a string and %f a float. In practice it looks like this:

const obj1 = {
    name: 'Peter Parker',
    username: 'i_am_a_spider'
};
console.log('This is object is between to sentences. Here: %O. And I think that is really cool!', obj1);

console.log('This is a very, very big integer: %d', 42);

console.log('This is %s. And I am %s!', 'Me', 'a web developer');

console.log('This is a nice float: %f', Math.PI);

The expenses will look like this. In the first example, the object can be expanded and all attributes can be viewed.

Console Spells

Did you know these functions or do you know other helpful ones? Then write them in the comments! 🙂

Source: MDN web docs – Console

Here you can find more about JavaScript:

NEW 🚀
NEW 🚀
 

Join the Conversation

2 Comments

Leave a comment

Your email address will not be published. Required fields are marked *