Back to: JavaScript Tutorial For Beginners and Professionals
JavaScript Console Group() Method
In this article, I am going to discuss the JavaScript Console Group() Method with Examples. Please read our previous article where we discussed JavaScript Console Error Method with Examples.
JavaScript console.group() Method
The console.group() method is used to create a new group of logs in the web console. This method allows us to group the content in a separate block, that will be indented.
The console.group() method starts the group message. All new messages/logs are written inside this group. Group message end with console.groupEnd() method. The console.group() and groupEnd() creates and end a group of logs in the web console. We can pass a label as the first argument of the console.group() method to describe what it is concerned about. But the label is optional in this method.
In other words, using the console.group() method we can create a new group of console.log/ other logs statements. Use the console.groupEnd() method to exit from the current group.
Syntax: console.group(label);
Parameters:
- label – This is an optional parameter. A label is given to a group.
Example to Understand JavaScript Console Group() Method
<html>
<head>
<title>JavaScript console group() method example</title>
</head>
<body>
<script>
//sample code1 with label
console.log("Hello with label...!")
console.group('Blog 1'); // label optional
console.log('Blog Created');
console.log('Blog Edited');
console.error('Blog Deleted');
console.groupEnd();
//sample code2 without label
console.log("Hello without label...!")
console.group();
console.log("This is group message");
</script>
</body>
</html>
Output: Press F12 and go to the Console section
JavaScript console.groupCollapsed() Method
The console.groupCollapsed() method is used to create a collapsed/closed group of logs with a small icon in the web console. The console.groupCollapsed() method starts the collapsed group message with a small icon. In the web console, click on the small icon/expand button to open the new group message. All new messages/logs are written inside this group. Group message end with console.groupEnd() method. The console.groupCollapsed () and groupEnd() creates and end a collapsed group of logs in the web console. We can pass a label as the first argument of console.groupCollapsed () method to describe what it is concerned about. But the label is optional in this method.
Syntax: console.groupCollapsed(label);
Parameters:
- label – This is an optional parameter. A label is given to a group.
Example to Understand JavaScript Console GroupCollapsed() Method
<html>
<head>
<title>JavaScript console groupCollapsed() method example</title>
</head>
<body>
<script>
//sample code1 with label
console.log("Hello with label...!")
console.groupCollapsed('Blog 1'); // label optional
console.log('Blog Created');
console.log('Blog Edited');
console.error('Blog Deleted');
console.groupEnd();
//sample code2 without label
console.log("Hello without label...!")
console.groupCollapsed();
console.log("This is group message");
</script>
</body>
</html>
Output: Press F12 and go to the Console section
JavaScript console.groupEnd() Method
The console.groupEnd() method is used to exit/end the current group of logs in the web console that was previously started by calling the console.group or console.groupCollapsed() method. The console. groupEnd() method ends the group message.
Syntax: console.groupEnd();
Example to Understand JavaScript Console GroupEnd() Method
<html>
<head>
<title>JavaScript console groupEnd() method example</title>
</head>
<body>
<script>
//sample code1
console.log("Sample code1!")
console.group('Grandparents Group'); // label optional
console.log('Grandpa');
console.log('Grandma');
console.groupEnd();
console.group('Parents Group');
console.log('Father');
console.log('Mother');
console.groupEnd();
console.group('Children Group');
console.log('Son');
console.log('Daughter');
console.groupEnd();
//sample code2
console.log("Sample code2!")
console.group('start group');
console.log('start test 1');
console.log('start test 2');
console.error('start test 3');
console.groupEnd('start group');
//sample code3
console.log("Sample code3!");
const testObj = {
key: 'test'
};
console.group('(JSON) object');
console.dir(testObj);
console.dirxml(testObj);
console.log(testObj);
console.groupEnd();
</script>
</body>
</html>
Output: Press F12 and go to the Console section
In the next article, I am going to discuss JavaScript Console Info() Method with Examples. Here, in this article, I try to explain the JavaScript Console Group() Method with Examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.