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

除非您真的想要创建新组，否则不必重新打开新组。因此，一旦您打开一个组，无论您将 log 附加到该组，直到您关闭它。

所以你的例子就是

console.log('before');

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

console.log('after');

它不应该打扰你，但浏览器需要一些时间来记录这些组。只是另外一点。

Answer 3

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

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

浏览器：控制台组

3 个答案: