DEV Community

Hiền Vương
Hiền Vương

Posted on

Fun with Console object

The Console object provides access to the browser's debugging console (e.g., the Web Console in Firefox). The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.
Console - Web API at MDN

Below is a list of some features that you might not know about the Console object:

1.Clear the console

Use console.clear() to simply clear your output.

2.Styling output

You can use "%c" directive to apply css style for the ouput

   console.log('%c Make console greate again!', 'font-size:50px; background:red;')
Enter fullscreen mode Exit fullscreen mode

3.Display tabular data

Use console.table(object) to display the provided object as a table.

Let's try:

persons = [ { name: 'Hien Vuong', city: 'Ho Chi Minh' }, { name: 'Donald Trump', city: 'New York' }]

console.table(persons)
Enter fullscreen mode Exit fullscreen mode

4.Grouping together

Use console.group(message) and console.groupEnd() to group all logs to a dropdown list.

Let's try with the above persons object

persons.forEach(p => {
    console.group(); 
    console.log(`This is ${p.name}`);
    console.log(`He comes from ${p.city}`);
    console.groupEnd();
});
Enter fullscreen mode Exit fullscreen mode

Happy Coding!

Originally posted on my blog here

Top comments (4)

Collapse
 
jmcguire23 profile image
James McGuire

It was the console.table() one which blew my mind! How did I not know this before! Thanks for sharing.

Collapse
 
lukbukkit profile image
Lukas • Edited

Thank you 👍

Collapse
 
mrm8488 profile image
Manuel Romero

If you want more fun, install globally "chalk" package

Collapse
 
c0il profile image
Vernet Loïc

Didn't know these useful tools functions, thx!