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

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

🫏🫏🫏

相关推荐
gnip3 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
~无忧花开~5 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
L李什么李7 小时前
HTML——使用表格制作简历
前端·javascript·html
我有一棵树8 小时前
html 滚动条相关开发经验总结
前端·javascript·html
正义的大古8 小时前
OpenLayers的OGC服务 -- 章节一:WMS服务详解
前端·javascript·vue.js·openlayers
Z_Wonderful8 小时前
ReactUse 与ahook对比
前端·javascript·react.js
_Legend_King8 小时前
高德地图实现经纬度及获取编码、所属行政区、GIS
javascript·vue.js·elementui
一枚前端小能手9 小时前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs
江城开朗的豌豆9 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序
前端达人10 小时前
「React实战面试题」:React.memo为什么失效了?
前端·javascript·react.js·前端框架·ecmascript