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
Top comments (4)
It was the
console.table()
one which blew my mind! How did I not know this before! Thanks for sharing.Thank you 👍
If you want more fun, install globally "chalk" package
Didn't know these useful tools functions, thx!