console.groupcollapsed是最轻量可控的前端日志分组方案，适合组件初始化等信息密集场景；需严格配对groupend，推荐try/finally包裹，react中置于useeffect、vue中置于onmounted内执行。
console.groupCollapsed 是最轻量、最可控的前端日志分组方案，适合组件初始化这种“一次执行、信息密集”的场景；但它不会自动收起嵌套组，也不支持点击展开后保持状态，得手动配对调用。
为什么不用 console.group 而选 groupCollapsed
组件初始化日志通常包含 props、state、副作用触发、子组件挂载等多个环节，全铺开会瞬间淹没关键错误。而 console.group 默认展开，调试时反而增加干扰；console.groupCollapsed 则默认收起，只在需要时点开——尤其适合 CI 构建日志或生产环境 debug 模式下的轻量埋点。
- 默认折叠，不抢占视觉焦点
- 支持嵌套，可按生命周期阶段再分组（比如
console.groupCollapsed('setup')→console.groupCollapsed('effects')） - 比自定义封装的 log 工具更可靠：不依赖额外包，无打包体积，所有现代浏览器都支持
- 注意：Safari 15.4+ 才支持
console.groupCollapsed的 label 点击重命名（基本不影响使用）
必须严格配对 console.groupCollapsed 和 console.groupEnd
漏掉 console.groupEnd 会导致后续所有日志被意外包裹进该组，甚至影响 React DevTools 的组件高亮逻辑。这不是警告，是实际发生过的线上问题。
- 每个
console.groupCollapsed后必须紧跟一个console.groupEnd，哪怕中间有 return 或 throw - 推荐在组件顶层用 try/finally 包裹，确保
console.groupEnd必然执行 - 不要依赖 ESLint 的 no-console 规则来“检测未闭合”——它不识别分组语义
- 示例写法：
console.groupCollapsed(`[MyComponent] init with`, props.id);
try {
console.log('props:', props);
console.log('computed state:', computeState(props));
useEffect(() => { console.log('effect registered'); }, []);
} finally {
console.groupEnd();
}
和 React.useEffect / Vue onMounted 的配合要点
组件初始化日志不是越早打越好，而是要在状态真正就绪后输出。直接在函数体顶部打 console.groupCollapsed，可能拿到的是空 state 或未解析的 ref。
- React 中，建议放在
useEffect(() => { ... }, [])内部，确保 DOM 挂载 + state 初始化完成 - Vue 3 中，放在
onMounted里比setup函数体更稳妥 - 如果日志需包含异步结果（如 fetch 初始化数据），必须等 Promise resolve 后再展开组，否则会显示空值
- 避免在渲染函数中调用——会重复触发，导致控制台出现多个同名折叠组
折叠组 label 的实用技巧
label 不只是名字，它是你快速定位日志的唯一线索。静态字符串如 'MyComponent init' 效果很差。
- 加标识符：用组件名 + key/id，例如
[UserCard:${props.userId}] init - 加状态标记：初始化失败时动态改 label，比如
console.groupCollapsed(`[Form] init ❌ ${error.message}`) - 避免长对象 JSON.stringify：会撑宽折叠箭头，且无法交互查看结构；改用
console.table({ props, slots })在组内单独输出 - Chrome 120+ 支持 label 中的 emoji，但 Firefox 不渲染，慎用
最容易被忽略的是：折叠组不会继承当前作用域的断点状态。你在组内打的 debugger 依然有效，但组本身不提供“跳过整个初始化流程”的调试能力——真要跳过，还是得靠条件断点或禁用对应 hook。
