Question

I have this code:

console.log('before');

console.groupCollapsed('main');
console.log('test1')
console.groupEnd();

console.groupCollapsed('main');
console.log('test2')
console.groupEnd();

console.groupCollapsed('main');
console.log('test2')
console.groupEnd();

console.log('after');

It adds 3 lines to browser logs.
The problem is logs are splitted into 3 different groups.
Is it possible to append logs to previous group if previous log message and the current one have same group names (main)?

So now output is:

before
> main
    test1
> main
    test2
> main
    test3
after

and I want this output:

before
> main
    test1
    test2
    test3
after

Update: Code is async. So I should close the groups after logging to prevent logging from outside the groups to groups.

Answer 1

You don’t have to reopen a new group unless you really want to create a new group. So once you open a group, whatever you log will be attached to that group until you close it.

So with your example it would be

console.log('before');

console.groupCollapsed('main');
console.log('test1');
console.log('test2');
console.log('test2');
console.groupEnd();

console.log('after');

It shouldn’t bother you but it takes a bit of a time for the browser to log these in groups. Just an additional note.