There’s More to “console” Than Just .log()

Most people involved with web development are familiar with console.log(). It’s a tried and true mechanism for testing and validating code, troubleshooting, and generally sending feedback to the browser as code executes. What you may not know, however, is that there’s so much more to “console” than just .log().

Here are a few of my favorites:

console.clear()
As the name may suggest, this clears the console. Use with caution. This method clears everything out of the console, so you could miss some important information if you’re not careful.

console.info()
Similar to console.log(), console.info() writes an informational message to the console. Some browsers allow you to filter the console based on the type of message sent, including: Info, Warnings, Errors. Some browsers may also offer a visual indicator of the type of message. Firefox, for example, adds a small “info” icon to the left of the message.

console.warn()
When something is more important than a simple informational message, console.warn() can be used to write a message to the console. Most browsers will highlight these messages in yellow, with a warning symbol to the left of the message. Some browsers will even provide trace details to help pinpoint the source of the message.

console.error()
When things are truly broken, console.error() is what you’ll want. The output looks the same as a “real” JS error, but if used properly (within a try/catch block), gets the point across without actually breaking the entire page or application. These messages are highlighted in red, with a warning symbol to the left of the message, and access totrace details to help pinpoint the source of the message.

console.table()
This is where console logging starts to get fun. Using console.table(), it’s possible to display an array or an object (or an array of objects) as a table in the console. And, as a bonus, some browsers (eg// Chrome) allow sorting by column by clicking on a column header.

console.count() / console.countReset()
Consider this a simple counter. Each time console.count() fires, it increments by 1. By default, the counter is labeled as “default”, but the method supports specifying any custom counter label by passing in a string as the lone parameter. Each time the label is called, that label — and only that label — increments by 1. The example below shows four (4) separate labels: default, first, second, and third.

To reset the counter for a specific label, calling console.countReset() sets the counter back to zero (0). For example, to reset the counter for the “first” label, call console.countReset(“first”) .

console.group() / console.groupCollapsed() / console.groupEnd()
Using console.group() creates a hierarchical grouping structure in your console. There are many use cases, and the ability to nest groups multiple levels deep make this a powerful tool. The simple example below illustrates a single-level group showing students enrolled in a series of courses. Row 20 initiates the group, specifying the label/name, and row 22 ends/exits the group.

Using console.groupCollapsed(group_name) in the above example (row 20) generates the same output, but collapsed as shown below. Clicking the arrow to the left expands the group.

These are just a few of the lesser known, but still useful (powerful?) features of the “console” object. What are your favorites? Did you already know how to use the ones highlighted above?