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!

Originally published by WebDEasy at webdeasy.de

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.

Table of contents

  • Stop times – console.time()
  • Output warnings – console.warn()
  • Clear Console – console.clear()
  • Grouping outputs – console.group()
  • Mark error messages – console.error()
  • Output attributes – console.log() & console.info()

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:

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:

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:

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:

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:

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.

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:

Originally published by WebDEasy at webdeasy.de

===========================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Svelte.js - The Complete Guide

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ JavaScript: Understanding the Weird Parts

☞ JavaScript: Coding Challenges Bootcamp - 2019

☞ The Complete Node.js Developer Course (3rd Edition)

☞ Angular & NodeJS - The MEAN Stack Guide

☞ NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

☞ Node.js Absolute Beginners Guide - Learn Node From Scratch


javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.