如何用 console.groupCollapsed 折叠关联的初始化日志以保持控制台整洁

console.groupCollapsed 更适合初始化日志，因其默认收起逻辑块、减少视觉干扰，且标题可动态注入环境与版本信息提升可追溯性，但需配对 console.groupEnd 并规避 Safari 的展开异常。

console.groupCollapsed 为什么比 console.log 更适合初始化日志

因为初始化阶段常有一连串相关输出（如配置加载、依赖注入、路由注册），用 console.log 会把所有细节平铺在控制台顶部，干扰后续调试。而 console.groupCollapsed 默认收起整个逻辑块，只留一个可点击的折叠标题，既保留信息完整性，又避免视觉污染。

它和 console.group 的区别在于默认状态：后者展开，前者收起——对初始化日志这种“多数时候不想看细节”的场景更友好。

必须配对调用 console.groupEnd 才能正确收起

漏掉 console.groupEnd 是最常见错误，会导致后续所有日志被意外包裹进该组，甚至控制台报错 Uncaught Error: console.groupEnd was called without a corresponding console.group。

实操建议：

• 写完 console.groupCollapsed 后，立刻敲一行 console.groupEnd()，再往中间填内容，避免遗漏
• 如果初始化逻辑跨异步（比如 await loadConfig()），确保 console.groupEnd() 在同一作用域末尾或 finally 块中调用
• 不要嵌套过深（超过 3 层），否则折叠箭头会缩进太多，影响可读性

用字符串模板动态生成 group 标题更清晰

硬编码标题如 "Init Phase" 缺乏上下文；直接拼接变量又容易出错。推荐用模板字符串注入关键状态：

console.groupCollapsed(`App init [env=${import.meta.env.MODE}] [v${APP_VERSION}]`);console.log('Loading config...');console.log('Registering plugins...');console.groupEnd();

这样一眼能看出当前环境、版本，方便多环境对比。注意：模板中避免放可能为 undefined 或对象的值，否则标题会显示 [object Object] —— 可先用 String(val) 或可选链兜底。

Chrome 和 Firefox 支持良好，但 Safari 有隐藏限制

Safari 16.4+ 支持 console.groupCollapsed，但有个坑：如果组内第一条日志是 console.error 或 console.warn，Safari 有时会强制展开该组，破坏“默认收起”预期。

规避方法：

• 组内首条统一用 console.log 占位（哪怕只是 console.log('–')）
• 把 console.error 移到 console.groupEnd() 之后单独调用
• 若必须在组内报错，可在其前加个空格或不可见字符（如 u200b）绕过 Safari 的检测逻辑

初始化日志的真正难点不在折叠本身，而在如何让折叠后的标题足够自解释——毕竟你下次打开控制台时，可能已经忘了那段代码在干啥。标题里带环境、版本、时间戳，比写个 “Init” 强十倍。