console.groupCollapsed 更适合组件初始化日志，因其可折叠分组避免日志混杂；需手动配对 console.groupEnd()，推荐在 onMounted 或 useEffect 中使用，并添加状态图标与动态信息提升可读性。
console.groupCollapsed 为什么比 console.log 更适合组件初始化日志
它能天然形成可展开/折叠的逻辑分组，避免初始化阶段大量 console.log 混杂在控制台里干扰调试。尤其当多个组件（比如 Header、Sidebar、DashboardChart）同时初始化时，每个用 console.groupCollapsed 包裹后，控制台默认只显示组标题，点开才看细节。
注意：它不会自动识别“组件”，必须手动包裹初始化逻辑；且不支持嵌套过深（Chrome 最多支持 10 层嵌套，超出会静默失败）。
如何正确包裹 Vue/React 组件的初始化日志
关键不是“在哪调用”，而是“在哪结束”——console.groupCollapsed 必须配对 console.groupEnd()，否则后续所有日志都会被意外归入该组。
- Vue 3
setup()中建议在onMounted里开始，避免响应式代理未就绪时打印空值 - React 函数组件推荐在
useEffect(() => { ... }, [])内使用，确保只执行一次 - 不要在构造函数或
created钩子中提前调用console.groupCollapsed，否则可能因异步加载导致console.groupEnd()丢失
示例（React）：
useEffect(() => {
console.groupCollapsed('✅ DashboardChart 初始化');
console.log('props:', props);
console.log('data loaded:', dataRef.current?.length);
console.time('render duration');
// ... 实际渲染逻辑
console.timeEnd('render duration');
console.groupEnd(); // 必须有！
}, []);
折叠组标题里加状态图标和动态信息更实用
纯文字标题（如 'DashboardChart'）很难一眼判断是否成功。加个 ✅ / ⚠️ / ❌ 前缀，再拼上关键状态，能大幅减少点开次数。
- 用模板字符串动态插入状态：
console.groupCollapsed(`⚠️ ${name}（加载超时）`) - 避免在标题里放长对象（如
JSON.stringify(props)），会撑宽控制台且不可读 - Chrome 和 Firefox 支持 emoji，但 Safari 旧版可能显示为方块，生产环境慎用复杂符号
- 标题长度建议 ≤ 50 字符，过长会被截断（Chrome 控制台实际显示约 42 字符）
常见错误：折叠组没关闭或跨组件泄漏
最常踩的坑是忘记 console.groupEnd()，导致后续所有日志（包括第三方库、网络请求、甚至其他组件的 console.log）全被收进前一个组里，看起来像“日志消失了”，其实是被折叠进错误的组。
- 可在开发环境加一层防护：用
try...finally确保groupEnd执行 - 避免在
catch块里新开groupCollapsed而不配对groupEnd，异常中断时容易漏掉 - 如果组件卸载快于初始化完成（比如路由快速跳转），
useEffect清理函数里应检查是否已调用groupEnd，否则可能报错 “Cannot end group: no active group”
真正难处理的是异步初始化中的组生命周期管理——比如 fetch 回来才 console.log 数据，但组已在同步代码里 groupEnd 了。这时候得把整个异步链包进组内，而不是只包同步部分。
