如何利用 console.groupCollapsed 将关联的初始化日志折叠收纳以提升调试效率

使用 console.groupCollapsed 可折叠初始化日志，提升控制台可读性；支持嵌套分组反映依赖顺序，配合 console.time 精准测时；开发环境启用、生产环境静默，结构化日志匹配代码逻辑。

用 console.groupCollapsed 把初始化相关的日志归组折叠，能大幅减少控制台干扰，一眼聚焦关键信息。

用 groupCollapsed 包裹初始化流程

把模块、组件或服务的初始化步骤（如配置加载、依赖注入、状态预设）统一放进一个折叠组，避免日志平铺刷屏。组名建议体现上下文，比如 "[UserModule] init" 或 "Router setup"。

• 调用 console.groupCollapsed("描述性标题") 开启折叠组
• 在组内执行所有初始化日志（console.log、console.table 等）
• 用 console.groupEnd() 显式收尾，确保嵌套清晰

嵌套分层，反映初始化依赖关系

当初始化存在先后依赖（例如“先加载配置 → 再初始化 API 客户端 → 最后启动监听器”），可多层嵌套 groupCollapsed，视觉上还原执行结构。

• 外层组：整体模块入口，如 console.groupCollapsed("AuthSystem init")
• 内层组：子步骤，如 console.groupCollapsed("Loading auth config...")
• 每层独立 groupEnd()，避免漏闭导致后续日志错位

配合 console.time 提升时序洞察力

初始化耗时敏感？在折叠组内搭配 console.time 和 console.timeEnd，展开后直接看到各阶段耗时，无需手动计算时间差。

• 在 groupCollapsed 内第一行调用 console.time("step-name")
• 对应位置调用 console.timeEnd("step-name")
• 时间标记会和日志一同折叠，展开即见结果，干净不冗余

开发环境自动启用，生产环境静默

避免日志泄露或影响性能，用环境变量控制是否执行分组逻辑：

• 包裹整个初始化块：if (process.env.NODE_ENV === 'development') { console.groupCollapsed(...); ... console.groupEnd(); }
• 或封装成工具函数，如 logInit("API", () => { /* 初始化逻辑 */ })，内部判断环境再决定是否分组
• 确保未开启时不执行任何 console 调用，防止空组残留

不复杂但容易忽略——合理折叠不是隐藏日志，而是让日志结构匹配代码结构，调试时点开即得上下文，省去滚动查找和心理建模成本。