用 console.groupCollapsed 可按逻辑分层折叠初始化日志，外层包裹主流程，内嵌步骤组并配 groupEnd()，结合 console.time 和带样式的 label 提升可读性与性能追踪，需避免漏闭合、过深嵌套及异步误用。
用 console.groupCollapsed 把初始化日志按逻辑分层折叠，能一眼看清主流程，点开才看细节，避免控制台被淹没。
用 groupCollapsed 套出清晰层级
每次调用 console.groupCollapsed(label) 会创建一个可折叠组，后续所有 console.log、console.warn 等都会缩进显示在该组内，直到遇到对应 console.groupEnd()。适合把“加载配置 → 初始化服务 → 校验状态”这类线性步骤分开。
- 外层用
console.groupCollapsed('App 初始化')包住整个流程 - 内部再嵌套
console.groupCollapsed('1. 加载环境配置')、console.groupCollapsed('2. 启动核心服务') - 每组末尾必须配
console.groupEnd()，否则后续日志可能错位或无法收起
配合 console.time 提升关键步骤可读性
在每个折叠组里加 console.time()，就能看到各阶段耗时，不打断折叠结构。
- 进入“加载配置”组后立即写
console.time('loadConfig') - 配置加载完执行
console.timeEnd('loadConfig')，时间会显示在该组内，且只在展开时可见 - 这样既保持界面干净，又保留性能线索，不用翻找散落的时间戳
用颜色和前缀增强信息识别度
折叠组的 label 支持 CSS 样式（Chrome/Firefox），可以加颜色或符号快速区分类型：
console.groupCollapsed('%c✅ 初始化开始', 'color: #28a745; font-weight: bold;')console.groupCollapsed('%c⚙️ 配置解析', 'color: #007bff;')console.groupCollapsed('%c⚠️ 兼容性检查', 'color: #ffc107;')- 注意：样式只作用于 label 文本，不影响组内日志；Safari 不支持样式，但降级为纯文本也不报错
避免常见陷阱
折叠日志看似简单，几个疏忽会让效果打折：
- 忘记
console.groupEnd()—— 后续所有日志都卡在未关闭的组里，缩进异常，甚至影响其他调试语句 - 嵌套过深（超过 4 层）—— 展开后视觉混乱，建议单层只表达一个明确意图，比如“API 客户端初始化”就别再拆“请求拦截器”“响应处理器”两层，合并成一句说明更清晰
- 在异步回调中误用 —— 比如
fetch().then(() => { console.groupCollapsed(...); ... console.groupEnd(); })，若多个请求并发，组名重复或顺序错乱，应加唯一标识如console.groupCollapsed(`[API] ${url}`)
