浏览器：控制台组

Question

我有这个代码：

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');

它将 3 行添加到浏览器日志中。
问题是日志被分成 3 个不同的组。
如果之前的日志消息和当前的日志消息具有相同的组名 (main)，是否可以将日志附加到上一个组？

所以现在输出是：

before
> main
    test1
> main
    test2
> main
    test3
after

我想要这个输出：

before
> main
    test1
    test2
    test3
after

更新：代码是异步的。所以我应该在登录后关闭组，以防止从组外登录到组。

Answer 1

自定义记录器类怎么样

function Logger(){
    var logs = [];
    var gname = "default";
    function group(name){
        gname = name
    }
    function log(){
        !!logs[gname] || (logs[gname] = []);
        logs[gname].push(Array.prototype.slice.call(arguments, 0));
    }
    function flush(){
      console.log(logs) // loop for groups or just output array
      logs=[]; // clear values
    }
    return {group:group,flush:flush,log:log}
}

用法

var l = new Logger()
l.group('main1');
l.log('foo','bar','foobar')
l.log('foo-bar')

l.group('main2');
l.log('foo')
l.log('bar')

l.group('main1');
l.log('foo2bar')
l.log('bar2foo')

l.group('main3');
l.log('foo')
l.log('bar')

l.group('main1');
l.log('foo3')
l.log('bar3')

l.flush()

Answer 2

您只能通过不关闭群组来做到这一点。你可以使用这样的东西：

var curGroup;
console.logInGroup = function(group, log) {
    if (curGroup != group) {
        console.groupEnd();
        console.groupCollapsed(curGroup = group);
    }
    console.log.apply(console, [].slice.call(arguments, 1));
};

console.log('before');
console.logInGroup('main', 'test1');
console.logInGroup('main', 'test2');
console.logInGroup('main', 'test2');
console.groupEnd();
console.log('after');

Answer 3

除非您真的想创建一个新组，否则您不必重新打开一个新组。因此，一旦您打开一个组，您记录 的任何内容都将附加到该组，直到您关闭它为止。

所以你的例子是

console.log('before');

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

console.log('after');

它不应该打扰您，但浏览器需要一些时间才能将这些记录成组。只是一个补充说明。