Leveraging the Power of the Javascript Console in Development

As a software developer, you are most likely overwhelmed by the endless list of development tools out there. Even I struggled for a while trying to choose which ones best suited my development workflow. In most cases i ended up cluttering my developmment environment with tools i either never got to use or tools that remained mostly under-utilized as all they did was sit there.

After years of inefficient development and constantly re-inventing the wheel, i discovered a very powerful tool that i had ignored. One that every software developer and internet user alike had by default "The Javascript Console". "Thats console.log right? I'm quite familiar with the console." But are you?

In this article, we will carefully explore the extensive array of applications in which the console could be of help to a software developer.

What is the Console?

The javascript console is an in-built feature in modern browers that comes with out-of-the-box development tools in a shell-like interface that allows a developer to:

• View a log of errors and warnings that occur on a web page.
• Interact with the web page using javascript commands.
• Debug applications and traverse the DOM directly in the browser.
• Inspect and analyze network activity

Basically, it empowers you to write, manage and monitor Javascript right within your browser.

Launching the Console in your Browser

The javascript console comes in-built and can be accessed with ease via the following keyboard shortcuts in the following browsers:

• For Mozilla Firefox

For MAC users: COMMAND + OPTION + K

For Windows and Linux users: CTRL + SHIFT + K

• For Google Chrome

For MAC users: COMMAND + OPTION + J

For Windows and Linux users: CTRL + SHIFT + J

• For Google Chrome

For Windows users: F12

• For Safari

For MAC users: COMMAND + OPTION + C

• For Opera mini

For MAC users: COMMAND + OPTION + I

For Windows and Linux users: CTRL + SHIFT + I

You should have an interface like this one, most likely docked to the bottom

Exploring the Console API

During development, it is very important for developers to master the art of consoling themselves through the debugging process. Let's explore some of the perks of working with the Console API. There’s a lot of untapped potential in there☺

Console.log

This is probably the most used method of them all. It displays a message in the console. When you pass one or more objects to this method. Each object is evaluated and concatenated into a space-delimited string.

    console.log( "The current time is:", Date.now());

This would print out the corresponding message to the console as shown below:

This similar to console.debug().

Console.group

This method helps you group the logs made to the console. All console output that occurs after console.group() and before console.groupEnd() is visually grouped together. For example,

    function name(obj) {
      console.group('Country Profile');
      console.log('name: ', obj.name);
      console.log('continent: ', obj.continent);
      console.log('type: ', obj.type);
      console.groupEnd();
    }

    name({"name":"Nigeria","continent":"Africa","type":"Democratic"});

In a situation where you have many log groups, make a call to console.groupCollapsed instead of console.group. This will display the groups in a collapsed default mode.

The output should look like this

Console.trace

This method simply prints a stack trace from the point where it was called. This helps you track the execution of your code. As this is beyond the scope of this article, you can learn more about stack traces and how they work via this link

Console.table

Basically, this helps you display tabular data (usually an array) as a table.

    let food = [
      { name: "Rice", class: "carbohydrate" },
      { class: "protein", name: "Beans" }
    ];

    console.table(food);

The output:

Console.error

This method outputs an error message. Unlike the message from console.log(),it styles the message like an error, and includes a stack trace from where the method was called.

    console.error("error: can't identify file type");

This is similar to console.exception() and console.warn().

Console.count

This counts and outputs the number of times that count() has been invoked on the same line and with the same label. It is able to recognize the label anywhere within the application.

    function insert(city) {
      console.count(city + 'registered');
    }

The output:

Console.time and Console.timeEnd

Console.time starts a timer with a name specified as an input parameter and can run up to 10,000 simultaneous timers on a given page. Once initiated, we use a call to console.timeEnd() to stop the timer and print the elapsed time to the Console.

    console.time('total');
    console.time('init arr');
    var arr = new Array(10000);
    console.timeEnd('init arr');
    for (var i = 0; i < arr.length; i++) {
      arr[i] = new Object();
    }
    console.timeEnd('total');
    // init arr: 0.0546875ms
    // total: 2.5419921875ms

Console.clear

This clears the console

    clear();

Console.assert

This method logs a message and stack trace to console if the evealuated expression is false.

    function lesserThan(a,b) {
      console.assert(a< b, {"message":"a is not lesser than b","a":a,"b":b});
    }
    lesserThan(5,6);

The output:

Common operations carried out with the Console

The console comes in handy for a large range of functions in development. These include:

• Diagnosing and logging to console
• Time and monitor executions
• Handle exceptions and errors
• Monitor events
• Evaluate expressions
• Comparison of data objects

Conclusion

The countless number of operations that can be carried out effectively via the javascript console makes it a good tool to integrate into your development workflow. Its better to master a few tools than have so many under-utilized tools clogging your workspace.

Helpful Resources

Continue learning about leveraging this awesome technology via the links below:

• Google Developer Docs on Chrome Dev Tools
• Mozilla Developer Network Web Docs
• Digital Ocean Community Tutorials