JavaScript Console Group() Method

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:
  1. 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

Example to Understand JavaScript Console Group() Method

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:
  1. 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

Example to Understand JavaScript Console GroupCollapsed() Method

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

Example to Understand JavaScript Console GroupEnd() Method

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.

Leave a Reply

Your email address will not be published. Required fields are marked *