用 console.groupcollapsed 按组件名+状态精准分组初始化日志，统一在生命周期入口包裹，配合 console.table、条件日志和 %c 彩色标记，提升可读性与排查效率。
用 console.groupCollapsed 把组件初始化日志收起来，是让控制台不被刷屏的实用技巧。关键不是“要不要折叠”，而是“怎么折得清楚、查得方便”。
按组件名分组，命名要具体
别只写 console.groupCollapsed('init')，这样所有组件都挤在同一个名字下，点开也分不清是谁。应该带上组件标识，比如组件名、ID 或关键状态：
console.groupCollapsed('[Header] 初始化')console.groupCollapsed('[ProductCard #123] 加载数据')console.groupCollapsed('[Modal] 首次挂载（props: {visible: false})')
这样一眼看出哪个组件、什么状态下触发了初始化，折叠后也能靠标题快速定位。
在初始化入口统一包裹，避免分散调用
把 console.groupCollapsed 和 console.groupEnd 放在组件生命周期的明确起点和终点，比如 Vue 的 setup 开头、React 的 useEffect(() => {...}, []) 内部，或类组件的 componentDidMount。不要在各个子函数里零散加日志再手动分组——容易漏掉 groupEnd，导致后续所有日志都被意外缩进。
示例（React）：
useEffect(() => {
console.groupCollapsed('[UserProfile] 初始化');
console.log('✅ 获取用户基础信息');
console.log('✅ 加载权限配置');
console.log('✅ 订阅通知频道');
console.groupEnd();
}, []);
配合 console.table 和条件日志提升可读性
初始化过程常涉及对象或数组，直接 console.log 易读性差。在折叠组内优先用 console.table 展示结构化数据，再用 console.log 补充关键结论：
-
console.table(props)查看传入参数 -
console.table(Object.entries(state))快速浏览响应式状态 - 对非必要信息加条件：
if (import.meta.env.DEV) console.log('调试：当前缓存键', cacheKey)
这样展开组后看到的是干净、有层次的信息，而不是一串难以扫读的纯文本。
用颜色标记状态，一眼识别成功或异常
折叠组本身不支持样式，但组内的日志可以用 %c 添加颜色，强化语义：
console.log('%c✅ 初始化完成', 'color: #28a745; font-weight: bold');console.log('%c⚠️ 缺失 fallback 图片', 'color: #ffc107; font-weight: bold');console.error('%c❌ API 请求失败', 'color: #dc3545; font-weight: bold');
即使整组被折叠，带颜色的状态提示在控制台列表中依然醒目，便于快速扫描问题。
