✍️掌握 console.group：让你的控制台输出更有条理

console.group 是浏览器开发者工具中一个非常实用的方法，它可以帮助你将相关的控制台信息分组显示，让调试信息更加清晰有序。下面我将分点介绍它的基本用法。

1. 基本分组用法（最常用的一集，看完就可以毕业了）

console.group() 和 console.groupEnd() 配合使用可以创建一个可折叠的分组：

javascript 复制代码

console.group('用户信息');// 分组开始
console.log('姓名: 江建清');
console.log('年龄: 24');
console.log('职业: 上单');
console.groupEnd();// 分组结束

这样会在控制台创建一个标有"用户信息"的可折叠分组，点击可以展开/收起其中的内容。

输出效果是这样的，控制台赏心悦目：

多个分组的情况：

javascript 复制代码

console.group('用户信息');// 分组开始
console.log('姓名: 江建清');
console.log('年龄: 24');
console.log('职业: 上单');
console.groupEnd();// 分组

console.group('菜单');// 分组开始
console.log('菜名: 广东肠粉');
console.log('价格: 6元');
console.groupEnd();// 分组结束

看到这基本就覆盖 80% 的使用场景了，后面的不看也可以！！

2. 嵌套分组

分组可以多层嵌套，适合展示层级结构的数据：

javascript 复制代码

console.group('公司信息');
console.log('公司名: ABC科技');
console.group('部门信息');
console.log('技术部: 15人');
console.log('市场部: 8人');
console.group('项目组');
console.log('前端组: 5人');
console.log('后端组: 7人');
console.groupEnd();
console.groupEnd();
console.groupEnd();

效果如下：

3. 默认展开与折叠

使用 console.groupCollapsed() 可以创建默认折叠的分组：

javascript 复制代码

console.groupCollapsed('默认折叠的分组');
console.log('这些内容初始状态下是折叠的');
console.log('需要点击才能展开查看');
console.groupEnd();

效果如下：

展开后效果如下：

4. 实际应用示例

假设我们要调试一个用户数据获取函数：

javascript 复制代码

function fetchUserData(userId) {
  console.group(`获取用户 ${userId} 的数据`);
  
  console.log('发起API请求...');
  // 模拟API请求
  const user = {
    id: userId,
    name: '李四',
    posts: [
      {id: 1, title: '第一篇文章'},
      {id: 2, title: '第二篇文章'}
    ]
  };
  
  console.log('收到响应:', user);
  
  console.group('用户文章');
  user.posts.forEach(post => {
    console.log(`文章ID: ${post.id}, 标题: ${post.title}`);
  });
  console.groupEnd();
  
  console.groupEnd();
  return user;
}

fetchUserData(123);

5. 样式化分组标签

你还可以为分组标签添加样式，使用CSS格式：

javascript 复制代码

console.group('%c重要警告', 'color: red; font-weight: bold; font-size: 16px;');
console.log('这是一个重要的警告信息');
console.log('请仔细阅读');
console.groupEnd();

最后🩵

console.group 可以让你的控制台输出更有条理，建议用起来。

我去吃肠粉了，下次再见。

🫏🫏🫏