Javascript 中的 console.group

在前端开发中，使用 console.log 是常见的调试方式，但是当需要输出比较复杂的信息或者有大量的输出时，使用 console.log 可能会让输出日志难以阅读。这时就需要使用 console.group 搭配 console.groupEnd 来优化输出日志。

简介

console.group 可以将一组相关的信息通过一个折叠菜单的形式进行展示，方便程序员进行查看和调试。同时，通过 console.groupEnd 可以结束一个 console.group 的输出。

语法

console.group([label]);

其中，label 是一个可选参数，表示组的名称。

console.groupEnd();

示例

console.group('User Information');
console.log('Name: John Doe');
console.log('Age: 30');
console.log('Email: johndoe@example.com');
console.groupEnd();

输出结果为：

其中，黄色区域表示了一个 console.group，该组下有三个 console.log 输出的信息。

嵌套使用

console.group 支持嵌套使用，可以通过控制台折叠菜单来查看输出信息的层次关系。

console.group('User Information');
console.log('Name: John Doe');
console.log('Age: 30');
console.group('Contact Information');
console.log('Email: johndoe@example.com');
console.log('Phone: 123456789');
console.groupEnd();
console.groupEnd();

输出结果为：

图中可以看到，Contact Information 组是嵌套在 User Information 组里面的。

小结

console.group 可以方便地将一组相关的信息进行分组输出，减少 console.log 输出导致的混乱。同时，console.group 的嵌套使用可以让输出信息更加清晰明了。