Understanding the Console API in JavaScript – 7 Tips for Smoother Debugging


Many JavaScript developers only use the console.log statement for the purpose of finding out more about how their application works. In this article, you will learn that the console API contains many powerful methods that will significantly improve your logging and debugging experience.

In this article, we will focus on browser features. Although you can use some of them in node, many console methods only work in the browser.

console.time

Let’s create an array of 100.000 random numbers.

We can measure time taken to sort the array by placing the sort operation between console.time and console.timeEnd. You can also add a label to these console operations to know what you are measuring exactly:

Notice that for more reliable results, the measurement has to be repeated multiple times. The conditions under which measurements are executed also matter, as you will get slower results in an environment with memory leaks.

Timers also work in web workers.

console.table

My personal favorite for displaying arrays of objects or objects of objects. This console method is great for debugging, as you can observe all values your array or object as a two dimensional table.

console.table in action

console.table in action

Don’t expect console.table to work in the node environment.

Log, info, warn, error

Most developers already know how console.log works. In practice though, I can see console.log often overused, not taking other severity levels into consideration.

Console log, info, warn, and error

Console log, info, warn, and error

Notice the count of warnings and error messages on the top right of the image. Warnings are less severe than errors. Developers may choose to ignore warnings, while errors have to be dealt with. Always respect the severity level of the log messages, and adjust your messages accordingly.

Different messages are used for different purposes.

Make sure you don’t forget about the anomalies of logging reference types. Recall the following code segment:

If you execute this code in the console, and open different console logged objects, you will realize that the wallet amount always reflects the amount at the time of first opening the logged object.

console.trace

You don’t have to use console.error to print the stack trace at any given point in the execution of your code.

The trace method prints the stack trace to the console without highlighting it as an error.

In the below example, recursive error returns undefined. The function recursively calls itself until reaching 0. As soon as 0 is reached, the console.trace command is executed, printing the stack trace to the console.

console.count

The console.count method displays the number of times it was called. An optional label can be added to display what we are counting.

console.assert

Assertions are expressions evaluated as truthy or falsy. When an assertion is truthy, nothing appears on the console. Assertions succeed silently.

When an assertion is falsy, an error appears on the console. Note that in node, an error is also thrown after the first failed assertion, terminating execution of your code. In the browser console, execution of your code is continued:

Console assertions

Console assertions

Notice that failed assertions result in an error, but execution of the code continued with the info message in the line after the error. When an assertion is true, the line of the assertion is ignored, nothing is printed to the console.

Assertions are normally used during development for making sure that your code is executed in a specific way. During writing automated tests, assertion libraries such as ChaiJs are used.

console.group

The last method is just a stylistic addition, grouping any of the above console statements in indentation levels. Obviously, grouping only affects the web console.

Outputs of console statements are indented inside a group determined by the console.group and console.groupEnd statements.

Console Group

Console Group

Summary

The JavaScript console API is a lot more complex than just a logger. The more you use these methods, the easier you will understand the logged messages, resulting in a lower overall time spent on finding the root cause of a bug.

The code examples of this course were written in ES6. If you like these examples, sign up for my ES6 course below.

Learn ES6 in Practice

Sign up below to access an ES6 course with many exercises and reference solutions.