In this article I will explain basic difference between console.log(), console.group() and console.groupCollapsed().

Introduction

We generally use console.log() to log things on console bar while testing in front end language i.e javascript/jquery. But there are few other options which can be used to categorize logging into groups to make it more readable. You can use console.group() and console.collapse() for this purpose. They are different from each other in functionality. Let's try these one by one.

console.log()

This is simple logging console method popularly known. You can log a data in console using console.log() method.

<script type="text/javascript">
    console.log('This is simple example of console.log()');
    console.log('This is second line');
</script>

console.group()

You can group a set of values using console.group() method.

<script type="text/javascript">
    console.group('console.group() example');
    console.log('Line 1');
    console.log('Line 2');
    console.groupEnd();
</script>

Nested group

You can create nested group adding console.group() inside a parent console.group() method.

<script type="text/javascript">
    console.group('console.group() example');
    console.log('Line 1');
    console.log('Line 2');
    console.group('Nested console.group() example');
    console.log('Line 3');
    console.log('Line 4');
    console.groupEnd();
    console.groupEnd();
</script>

console.groupCollapsed()

This is similar as console.group() but with a collapse feature. You can collapse the set of logs using console.groupCollapsed() method.

     console.groupCollapsed('console.groupCollapsed() example');
     console.log('Line 1);
     console.log('Line 2);
     console.groupEnd();

Hope this helps you. You can use these as you require in your project.