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