console.groupCollapsed折叠关联初始化日志提升调试效率

### 去芜存菁：用 `console.groupCollapsed` 让调试日志不再“刷屏”

调试时是否曾遇到过控制台被密密麻麻的初始化日志淹没，想要查找关键错误信息，却不得不在大量无关输出中翻找？本文介绍一个几乎零成本但效果立竿见影的调试小技巧——使用 console.groupCollapsed 将初始化日志折叠起来。

核心思路非常简单：把关联性强的初始化步骤（如模块加载、依赖注入、状态预设）归到一个折叠组中。代码中只需三步：用 console.groupCollapsed("描述性标题") 开启分组，在分组内正常输出日志（可使用 console.log、console.table 等），最后用 console.groupEnd() 结束。一个典型用法如下：

• 开启分组：console.groupCollapsed("[UserModule] init")
• 内部正常输出日志
• 结束分组：console.groupEnd()

这样做效果立竿见影——所有相关日志被折叠成一个可展开的条目，不展开时完全不会干扰视线；展开后，可以立即看到模块的完整初始化流程。分组名称务必带有上下文，例如 "Router setup" 或 "[Auth] config loading"，便于一眼了解该组日志的用途。

嵌套分组，还原真实的依赖顺序

如果初始化过程具有清晰的先后依赖关系（如“先配置 → 再启动 API 客户端 → 最后监听器启动”），完全可以使用多层嵌套。视觉上可还原代码的执行结构。

• 外层组：整体的模块入口，例如 console.groupCollapsed("AuthSystem init")
• 内层组：子步骤，例如 console.groupCollapsed("Loading auth config...")

每层各自用 groupEnd() 闭合。最容易犯的错误是遗漏 groupEnd()，导致后续日志全部错位。强烈建议养成“开启分组后立即写配对关闭”的习惯。

搭配 console.time，让耗时数据一目了然

如果初始化对性能敏感，需要精确掌握每个子步骤的耗时，可以配合 console.time 和 console.timeEnd。在折叠组内的第一行调用 console.time("step-name")，在对应子步骤结束后调用 console.timeEnd("step-name")。展开折叠组后，时间标记与日志一同呈现，无需手动计算时间差。

• 在 groupCollapsed 内：console.time("load-config")
• 对应位置：console.timeEnd("load-config")

这个组合的优势在于：时间数据自然归属于对应的折叠组，不会污染全局控制台。

环境变量控制：开发模式启用，生产环境静默

日志不应带到生产环境。最稳妥的方式是使用环境变量包裹整个分组逻辑。例如：

• 包裹整个块：if (process.env.NODE_ENV === 'development') { console.groupCollapsed(...); ... console.groupEnd(); }
• 或封装为工具函数，如 logInit("API", () => { /* 初始化逻辑 */ })，内部判断环境后再决定是否调用 console。

关键原则：在生产环境下，连 console.groupCollapsed 自身的调用都不要保留。否则即使分组内无内容，空组本身也会成为控制台垃圾。

说到底，这事并不复杂，但容易被忽略。合理折叠并非隐藏日志，而是让日志的结构匹配代码的结构。调试时点开即可获得上下文，省去来回滚动查找的痛点。