Fun with Console object

#javascript #console #devtool

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