Improve console.group in Debug Console

[roblourens]

vs

Can we introduce a concept like this into the debug protocol, and improve the display to support collapsible sections of logs? Do other runtimes have a concept like this?

It's now more visible when debugging vscode.

[auchenberg]

Our console for sure would gain much with simple object formatting / tree structure. Is the debug console rendering virtualized today?

[weinand]

The debug console is based on a tree, so this should be simple to implement.

[weinand]

@roblourens is the <Start group>/<End group> markup your adhoc invention and the DA is adding this to the stack trace or does this come from CDP?

I was able to achieve the following with the existing DAP:

So, the only issue is the array index that appears in front of the stack frames (but we could call this a feature).

The missing link detection is an orthogonal issue that we will fix anyway.

[roblourens]

The markup is just something I added so the group/groupEnd calls aren't totally invisible.

My original example isn't the best example, it's logging a single item as a one-off group. In your screenshot it looks like you're logging an array of strings, which is possible, but I don't think it's the right model for logging a group.

• The group should be updated live as log messages are produced, where an array could only be logged once the group is closed. At least I don't think I can log an object, then change the object.
• Groups should be expanded by default
• They need a log location for each line
• Nested groups should look good
• Multiline group titles and grouped messages should look good

[weinand]

What are "good" examples for a dynamic group?
What do you mean by "They need a log location for each line"?

[roblourens]

Code like

console.log('foo 1');
console.group('group 1');
console.log('foo 2');
console.log('foo 3');
console.group('group 2\nmultiline group\ntitle');

let i = 0;
const interval = setInterval(() => {
    console.log('bar ' + i++);
}, 1000);

setTimeout(() => {
    console.groupEnd();
    console.log('ended group 1');
    console.groupEnd();
    console.log('ended other group');
}, 4000)

Looks like this in chrome devtools

By "log location" I mean the location that we added for each log last month.