Console Tricks to Become Master In Debugging using DevTool

Console Tricks Become Master In Debugging using DevTool

The console is one of the most usable browser Dev tools. It helps to debug and print the output in the browser console panel.

Most of the front-end and web developers used consoles in their application or website development.

The console helps to write or print a message from JavaScript.

Let see the most useful console API :

1) Group API

There are three functions in console group API

console.group(message)
console.groupEnd(message)
console.groupCollapsed(message)

The console.group(message) API function helps to group your console message together.

The console.groupEnd(message) helps to end the group by calling this function.

The console.groupCollapsed(message) same as console.group(message) , but this API function helps to collapse the group when it's initially print into the console. after that, you can toggle the collapsed group.

Example:

Console Group

const message = "Welcome to Attractive Aurora";

console.group(message )

console.info("In this website, you will get knowledge about programming, health tips and more..")

console.info("We give lot's knowledge about programming, developer tools, tips, and tricks")

console.info("Thanks for visiting www.attractiveaurora.com")

console.groupEnd(message){codeBox}

Output :

Example :

Console Group Collapsed

const message = "Welcome to Attractive Aurora";

console.groupCollapsed(message)

console.info("In this website, you will get knowledge about programming, health tips and more..")

console.info("We give lot's knowledge about programming, developer tools, tips, and tricks")

console.info("Thanks for visiting www.attractiveaurora.com")

console.groupEnd(message){codeBox}

Output :

Console Tricks to Become Master In Debugging using DevTool

2) Count API

There are two types of count API

console.count(message)
console.countReset(message)

The console.count(message) helps to count the number of times that count invoked with the same message.

The console.countReset(message) helps to reset the count by message.

The console.count() print message as default you can reset this count by calling console.countReset().

Example :

Count with a message

console.count("Attractive Aurora")

console.count("Attractive Aurora")

console.count("Attractive Aurora")

console.countReset("Attractive Aurora"){codeBox}

Output :

Example :

Count without message

console.count()

console.count()

console.count()

console.countReset(){codeBox}

Output :

3) Clear API

The console.clear() API function helps to clear the console logs from your JavaScript.

This clear API function helps lot while debugging.

We can clear the console logs 3 methods from the console panel

clear the console from the console panel button
type clear() in console press enter
focus the cursor in the console and press Ctrl+L

Above methods are helping to clear the console log messages.

Example :

console.info("Attractive Aurora")

console.info("www.attractiveaurora.com")

console.info("Personal Blogger")

console.clear(){codeBox}