The Power of Console API

When working with a JavaScript project, the most common debugging method we use is putting the console.log("Something happened here", {some_variable}) in between the lines of code and passing some irrelevant and relevant information respectively as parameters to identify where and when the problem occurred.

Have you ever wondered what the other methods supported by console except for console.log() are? Let's walk through some of those fantastic methods in this blog.

What is Console API used for?

Console API provides the functionality to allow the users to perform the debugging level tasks, like logging values of any variable, tracking execution time at different set points in the code.

The most common way to access it using the console object, which can be accessed from anywhere with global scope access. Also, it is supported by Web Workers that’s why it can be easily used in browsing scope without working about concurrency.

Now, let’s have a look over some of the methods provided by it

(Note: I will be using Chrome console, and the output format may differ for different browsers):

Outputting the values on the console:

Primarily there are four standard methods you can access to print a text on the console:

1. console.log() - This most popular method outputs a message to the console.

1. console.info() - This method outputs the value in the same way as the console.log(). Some browsers may add the info icon or may format the output differently. For, e.g., in the below image, you can see the console.log() is identified by my React Devtools extension and override it, but the console.info() is not recognized by it, so it is run by the native browser environment:

1. console.warn() - This method outputs a warning message to the Web console.

1. console.error() - This method outputs an error message to the Web console.

Apart from these four, there are other methods to output on the console like:

• console.dir() - Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.

Key difference between console.log() and console.dir()-

Here, console.log() prints it HTML-like tree but console.dir() print it in a JSON-like tree.

Another similar method is the console.dirxml(), which displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.

Printing the data in the tabular format:

We often have the tabular data that we got in the response from any SQL query or API response. Consider using the console.table(${data}, ${column}) method for the same. E.g.

Secret sauce: Try clicking on the column headings, and don’t get surprised if you see sorted values.

Applying CSS to the output values:

It’s pretty cool that we can format the text we want to print just by using the %c directive with the text we want to print. Let’s dive into the below example to have a close look:

Awesome! Isn’t it?

Let’s have a look at another example with different stylings in the same output:

Printing in the nested group level:

We can use console.group(), console.groupCollapsed(), and console.groupEnd() methods to log the values in a nested format.

In the above example, console.warn(), and console.error() has been used. That's why the final outputs are formatted. Also, the Second Inner level is in the collapsed form.

Tracking the time of any process:

Say we want to track how much time a function takes for the execution, so rather than using any external function we can use console.time(), console.timeLog(), and console.timeEnd().
For example:

Here, console.time("Task 1") started the timer, console.timeLog("Task 1") logs the time in between Task 1 and console.timeEnd("Task 1") ends the timer and prints the final value at the end. Once the timer is stopped, we cannot reaccess it.

Stack trace and conditional tracing of function execution:

console.trace() and console.assert() are practical methods that help trace back the stack of the execution. The difference between these methods is that the console.assert() will only print the stack trace if the first parameter is false and will also print in the same way console.error() method does.

E.g.

Count the number of times a line is being executed:

Suppose you want to track how many times a function has been called, say any recursive function, then console.count() and console.countReset() are a great help. For e.g.

In the above example, you can see it prints the value of how many times the label a has been called, and after calling reset, it goes back to 1 on the next call.

String Substitution using the directives:

You can format the string and substitute it using %s, %o or %O, and %d or %i, %f directives. (For showing a few examples, I am using Firefox console as Chrome console doesn’t support precision formatting)

These were the methods provided by the Console API to make life easier, but before wrapping up, it’s worth noting how Console API works in browsers vs. how it works in NodeJS stream.

It’s synchronous for browsers, but for NodeJS streams, it’s neither consistently synchronous nor consistently asynchronous like all other Node.js streams. In NodeJS, they internally use process.stdout and process.stderr, and these two streams write synchronous or asynchronous depending on what the stream is connected to and whether the system is Windows or POSIX. The following is the write operation behavior of these two NodeJS process streams:

• Files: synchronous on Windows and POSIX
• TTYs (Terminals): asynchronous on Windows, synchronous on POSIX
• Pipes (and sockets): synchronous on Windows, asynchronous on POSIX

And that’s a wrap!

References:

MDN

NodeJS API Ref