用 console.groupcollapsed 将组件初始化日志组织为可折叠结构，按模块、子系统、动作三层嵌套，配合环境标识、console.time 耗时统计及 dev 环境开关，提升调试效率与可读性。
用 console.groupCollapsed 把组件初始化日志收进可点开的折叠块里，不是为了藏起来，而是让控制台结构匹配代码结构——点一下看到上下文，展开即得细节，省去滚动、比对和心理建模的时间。
给每个组件初始化套一层带标识的折叠组
在 React 的 useEffect、Vue 的 onMounted 或类组件挂载钩子中，直接包裹初始化逻辑。组名别写死“Init”，要带关键上下文：
- 用模板字符串注入组件名、环境、版本或关键状态，例如：
console.groupCollapsed(`[UserProfile] mount [env=${import.meta.env.MODE}]`) - 避免拼接
undefined或对象，否则标题变成[object Object]；可用String(val ?? '')或可选链兜底 - 首行调用后，立刻补上
console.groupEnd()，再往中间填日志，防止遗漏
嵌套反映真实依赖顺序，但别超过三层
初始化常有先后依赖，比如“加载配置 → 初始化 API 客户端 → 启动监听器”。用嵌套分组还原执行流：
- 外层：模块级入口，如
console.groupCollapsed("PaymentFlow init") - 中层：子系统，如
console.groupCollapsed("Loading payment config") - 内层：具体动作，如
console.groupCollapsed("Validating token") - 每层都配对
console.groupEnd()，漏掉会导致后续所有日志缩进错位 - Chrome 最多支持 10 层嵌套，但视觉上超过 3 层就难读，建议控制在合理深度
搭配 console.time 精准定位耗时瓶颈
初始化慢？在折叠组内加计时，展开后直接看到各阶段耗时，不用手动算差值：
- 在
console.groupCollapsed()后第一行调用console.time("load-config") - 对应位置（比如
fetch完成后）调用console.timeEnd("load-config") - 时间标记会随日志一同折叠，不干扰主视图，点开才见数字
- 异步操作务必把
console.timeEnd放在finally块或await链末端，确保必执行
开发启用、生产静默，且规避 Safari 小陷阱
避免日志泄露或性能损耗，必须按环境开关：
- 用
if (import.meta.env.DEV) { ... }包裹整个分组逻辑，未命中时不执行任何console调用 - Safari 16.4+ 支持该 API，但有个限制：若组内首条是
console.error或console.warn，有时会强制展开 - 规避方法：组内第一行统一用
console.log('–')占位；错误信息移到console.groupEnd()之后单独输出 - 不要依赖
console.group()替代 —— 它默认展开，不符合“初始化日志多数时候不想看”的使用预期
