loading...

Fun with Console object

duchienvuong profile image Hiền Vương ・1 min read

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;')

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)

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();
});

Happy Coding!

Originally posted on my blog here

Posted on by:

Discussion

markdown guide
 

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

 
 

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

 

Didn't know these useful tools functions, thx!