Subscribe

Some console command you might not know

โœ๏ธ

Do you know and use all these console commands?

15 Apr, 2021 ยท 3 min read

When it comes to debugging code, there are many options, but I find myself relying on console.logs quite often.

It's a quick and complete way to log a data set at a certain point or see where the code returns.

By all means, it may not be the best way, but it's widely used.

Did you know you can do more than a plain console.log?

Grouping console logs

A super handy console command is to group-specific logs. You can easily start a new group with console.group('name') and end it with console.groupEnd('name').

The name of the group can be any string you would like it to be.

An example can look like this:

console.group('test group');
console.log('log line 1');
console.error('Something went wrong in the group');
console.groupEnd('test group');

This will show up as:

Console group commands

Console log a table

Ever needed to display a giant JSON array? It can be tedious the show a larger array in the console.

But there is an option to display this as a table.

const myArray = [
  {
    title: 'Article 1',
    views: 400,
    url: 'https://daily-dev-tips.com/article-1'
  },
  {
    title: 'Article 2',
    views: 6500,
    url: 'https://daily-dev-tips.com/article-2'
  }
];
console.table(myArray);

Console table command

Console count

Another super useful command is the console.count command. It can be used to count how often a loop is run, for instance.

for (let i = 0; i < 5; i++) {
  // Do something
  console.count('loop one');
}

You can provide a label as we did above.

Console loops

Console log/info/debug/warn/error

Besides your default console.log, you might want to show data a little differently. Hence you can use one of the following to make it appear so:

  • console.info
  • console.debug
  • console.warn
  • console.error

They will show up like this:

Different log levels

Note: The info used to have its own icon but seems to be mixed with a regular log now.

With these, you can easily filter on the different levels.

Console log levels

Other console commands

There are some other console commands that can be useful.

And some we might cover in a later stage:

  • console.assert
  • console.dir
  • console.trace
  • console.clear

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Enhancing images with srcset and picture

2 Jul, 2022 ยท 5 min read

Enhancing images with srcset and picture

Make the web fast again

1 Jul, 2022 ยท 4 min read

Make the web fast again

Join 1509 devs and subscribe to my newsletter