✍️掌握 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 可以让你的控制台输出更有条理,建议用起来。

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

🫏🫏🫏

相关推荐
伍哥的传说3 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
前端程序媛-Tian4 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao4 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0014 小时前
实现视频实时马赛克
linux·前端·javascript
爱分享的程序员5 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉5 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
草履虫建模5 小时前
RuoYi-Vue 项目 Docker 容器化部署 + DockerHub 上传全流程
java·前端·javascript·vue.js·spring boot·docker·dockerhub
阿丽塔~7 小时前
【vue3+vue-pdf-embed】实现PDF+图片预览
javascript·vue.js·pdf
zhuà!8 小时前
taro+react重新给userInfo赋值后,获取的用户信息还是老用户信息
javascript·react.js·taro
超浪的晨8 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发