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

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

🫏🫏🫏

相关推荐
一朵梨花压海棠go1 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
一只小风华~2 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱2 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.3 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
每天吃饭的羊4 小时前
state和ref
前端·javascript·react.js
GEO_YScsn4 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing4 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
摇滚侠4 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
GISer_Jing4 小时前
滴滴二面准备(一)
前端·javascript·面试·ecmascript
lecepin4 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试