Leveraging the Power of the Javascript Console in Development
Tags: javascript, console, debugging
Published: 2018-02-06 06:36:52

---
title: Leveraging the Power of the Javascript Console in Development
published: true
description: A simple guide to consoling effectively through javascript debugging
tags: javascript, console, debugging
---
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**

![](https://cdn.scotch.io/57596/AX9TO2AQUOQq7t4mlGdq_console.png)

## 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.
```javascript
    console.log( "The current time is:", Date.now());
```
**This would print out the corresponding message to the console as shown below:**

![](https://cdn.scotch.io/57596/LsLFpdZTG2tampKsSEFe_consoledotlog.png) 
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,
```javascript
    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** ![](https://cdn.scotch.io/57596/SJwmdadwRJevQzXizryd_consoledotgroup.png)

### 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](https://developer.mozilla.org/en-US/docs/Web/API/console#Stack_traces)

### Console.table

Basically, this helps you display tabular data (usually an array) as a table.
```javascript
    let food = [
      { name: "Rice", class: "carbohydrate" },
      { class: "protein", name: "Beans" }
    ];

    console.table(food);
```
**The output:** ![](https://cdn.scotch.io/57596/CZBgP7uaRMiKDRstst9Q_consoledottable.png)

### 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.
```javascript
    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.
```javascript
    function insert(city) {
      console.count(city + 'registered');
    }
```
**The output:**

![](https://cdn.scotch.io/57596/UyPB0ArLRKagyZeY7CGn_consoledotcount.png)

### 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.
```javascript
    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
```javascript
    clear();
```

### Console.assert

This method logs a message and stack trace to console if the evealuated expression is false.
```javascript
    function lesserThan(a,b) {
      console.assert(a< b, {"message":"a is not lesser than b","a":a,"b":b});
    }
    lesserThan(5,6);
```

**The output:** ![](https://cdn.scotch.io/57596/yxhQeMeTQ8yp7cTJgQL7_consoledotassert.png)

## 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](https://developers.google.com/web/tools/chrome-devtools/console/)
*   [Mozilla Developer Network Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Console)
*   [Digital Ocean Community Tutorials](https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console#working-with-the-console-in-a-browser)