✍️掌握 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% 的使用场景了,后面的不看也可以!!

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

看到这基本就覆盖 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 可以让你的控制台输出更有条理,建议用起来。

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

🫏🫏🫏

相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef064 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder6 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句6 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom6 小时前
JavaScript reduce()函数详解
javascript
小飞悟6 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子6 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手7 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅7 小时前
JavaScript 中你不知道的按位运算
前端·javascript