DEV Community

Cover image for Debugging JavaScript: Beyond console.log()
Suze Shardlow
Suze Shardlow

Posted on • Originally published at suze.dev

3 1

Debugging JavaScript: Beyond console.log()

This post was originally published at suze.dev.

If you're a JavaScript developer, you'll know about console.log(), but have you heard of console.table(), console.group() or console.assert()?

console.table(), console.group() and console.assert() aren't as well-known as console.log(), but they are very useful for debugging.

Let’s take a look, using some example data.

Imagine you are running an e-commerce website. You sell a number of different kitchen items.

const products = [
{
id: 1,
name: 'Instant Pot',
price: 79.99,
inStock: true
},
{
id: 2,
name: 'Aeropress Coffee Maker',
price: 29.99,
inStock: false
},
{
id: 3,
name: 'George Foreman Grill',
price: 25.99,
inStock: true
}
];

You store details about these items in objects, within an array named products.

You can see the product ID, product name, the price and whether or not each one is in stock.

You can see that the coffee maker is the only one out of stock.

What happens if we simply console.log(products)?

Alt Text

The array is logged inline. We can see there are three items in the array, but to see any of the details we need to expand the log.

When we do this, we see the following:

Alt Text

We can still expand further but this is time-consuming. The information is too close together to allow us to easily pick out any details. For example, it is difficult to see quickly which items are in stock. If we are using JavaScript to make API calls, results like this aren't very user-friendly.

console.table()

What happens when we console.table(products) instead?

Alt Text

The array is logged neatly in a table.

The column headings are the index of the array, then the object keys.

It is much quicker and easier to see the object information at a glance.

We can sort by any column by clicking the column name.

We can even click and drag to resize the column widths.

The array is still logged inline under the table in case we want to expand the levels and inspect all the functions we could call on the array, in the same way as when we console.log() it.

console.table(products, [ 'name', 'price' ])

We can make this table even neater.

We don't need the ID numbers, for example, as we can see the names and these are more descriptive.

We can select whichever keys we want to view by including them in the console.table() function.

Here we've chosen to view only the name and price of each product using console.table(products, [ 'name', 'price' ]).

Alt Text

console.assert()

Let's take a look at console.assert() now.

Say for example we want to make sure there are exactly four products.

Therefore, we want to output an error message if there are not four products.

There are different ways we can do this.

We can use an if statement or a ternary operator, but these require logic and the lengthy code that goes with it:

const assertion = (products.length === 4);
if (! assertion) {
console.error('products.length must equal 4.');
}

console.assert() requires less code:

const assertion = (products.length === 4);
console.assert(assertion, 'Assertion fail: products.length must equal 4.');

console.assert(); is neater and gives us a more readable error message than an if statement or ternary operator.

Alt Text

console.group()

We can organise console output by indenting it and making it collapsible.

For example, we want to check for products in stock every 10 seconds and print them out.

We also want to be able to easily see from the console output the time and date that the stock check was conducted.

The code here loops over the array every 10 seconds to check if each item is in stock.

setInterval(() => {
console.group(`Products In Stock at ${new Date()}`);
for (const product of products) {
if (product.inStock) {
console.log(product);
}
}
console.groupEnd();
}, 10000);

So what does this look like in the console?

Alt Text

The output of the loops are grouped together and time stamped.

They are expanded by default. We can collapse them manually.

We can also output them collapsed by modifying the code:

setInterval(() => {
console.groupCollapsed(`Products In Stock at ${new Date()}`);
for (const product of products) {
if (product.inStock) {
console.log(product);
}
}
console.groupEnd();
}, 10000);

Alt Text

The output of the loops are grouped together and time stamped. They are collapsed by default. We can manually expand the ones we want to examine.

Further reading

These are just three of the console functions you can use to debug your JavaScript in the browser. There are lots more! Find out about them.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
beard_corsini profile image
Andrew Corsini

console.group() is my absolute favorite! Ever since I discovered it I use it almost daily. Great write-up!

Collapse
 
suzeshardlow profile image
Suze Shardlow

Thank you!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay