Some console command you might not know

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…


This content originally appeared on DEV Community and was authored by Chris Bongers

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


This content originally appeared on DEV Community and was authored by Chris Bongers


Print Share Comment Cite Upload Translate Updates
APA

Chris Bongers | Sciencx (2021-04-15T06:56:52+00:00) Some console command you might not know. Retrieved from https://www.scien.cx/2021/04/15/some-console-command-you-might-not-know/

MLA
" » Some console command you might not know." Chris Bongers | Sciencx - Thursday April 15, 2021, https://www.scien.cx/2021/04/15/some-console-command-you-might-not-know/
HARVARD
Chris Bongers | Sciencx Thursday April 15, 2021 » Some console command you might not know., viewed ,<https://www.scien.cx/2021/04/15/some-console-command-you-might-not-know/>
VANCOUVER
Chris Bongers | Sciencx - » Some console command you might not know. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/15/some-console-command-you-might-not-know/
CHICAGO
" » Some console command you might not know." Chris Bongers | Sciencx - Accessed . https://www.scien.cx/2021/04/15/some-console-command-you-might-not-know/
IEEE
" » Some console command you might not know." Chris Bongers | Sciencx [Online]. Available: https://www.scien.cx/2021/04/15/some-console-command-you-might-not-know/. [Accessed: ]
rf:citation
» Some console command you might not know | Chris Bongers | Sciencx | https://www.scien.cx/2021/04/15/some-console-command-you-might-not-know/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.