console.groupCollapsed 初始化日志分级折叠

面对复杂的应用初始化流程，控制台日志往往瞬间被刷屏，定位关键信息如同大海捞针。有没有一种方法，既能保留完整的调试细节，又能让控制台界面保持清爽？答案是肯定的，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')。此时，耗时信息会清晰地显示在该折叠组内部，并且只在组被展开时才可见。
• 这种方法既保持了控制台的整洁，又将性能线索与逻辑步骤紧密绑定，无需在散落的日志中费力寻找时间戳。

用颜色和前缀增强信息识别度

为了进一步提升分组标签的辨识度，可以利用控制台支持的 CSS 样式（Chrome/Firefox）为标签添加颜色或图标前缀，实现快速分类。

• 例如：console.groupCollapsed('%c 初始化开始', 'color: #28a745; font-weight: bold;')
• 例如：console.groupCollapsed('%c 配置解析', 'color: #007bff;')
• 例如：console.groupCollapsed('%c 兼容性检查', 'color: #ffc107;')
• 需要注意的是，样式仅作用于标签文本本身，组内的日志不受影响。另外，Safari 浏览器可能不支持此样式特性，但会安全地降级为纯文本显示，不会引发错误。

避免常见陷阱

折叠日志的技巧虽然强大，但一些常见的疏忽可能会让效果大打折扣，甚至引入新的混乱。

• 忘记闭合：这是最典型的错误。遗漏 console.groupEnd() 会导致后续所有日志都“卡”在未关闭的组里，造成缩进异常，并可能干扰其他分组的折叠状态。
• 嵌套过深：建议嵌套层级不要超过 4 层。过深的嵌套在展开后会导致视觉混乱，反而不易阅读。每个层级应表达一个明确的意图，例如“API 客户端初始化”这个层级，就无需再强行拆分为“请求拦截器”和“响应处理器”两层，合并说明往往更清晰。
• 异步回调中的误用：在异步操作（如 fetch）的回调中使用折叠组时需格外小心。如果多个请求并发执行，可能会出现组名重复或日志顺序错乱的情况。一个有效的解决方案是为组标签添加唯一标识，例如：console.groupCollapsed(`[API] ${url}`)。