console.groupCollapsed() 是浏览器控制台中默认折叠日志的分组工具，适用于 React/Vue 组件挂载等需隐藏初始化日志的场景，需配对 console.groupEnd() 使用，不支持 Node.js。
console.groupCollapsed() 是浏览器控制台里最被低估的调试工具之一——它不改变任何逻辑，却能让几十行初始化日志瞬间收进一个可点开的折叠块里，尤其适合 React/Vue 组件挂载、微前端子应用加载、或配置驱动型模块初始化这类“一堆 console.log() 挨着打印”的场景。
什么时候该用 console.groupCollapsed() 而不是 console.group()
核心区别就一条：是否默认收起。如果你希望日志一出来就是折叠态（避免干扰主流程阅读），必须用 console.groupCollapsed()；console.group() 默认展开，适合临时分组但不想隐藏内容时。
- 组件初始化日志通常只在排查问题时才需要展开细看，所以默认折叠更合理
- 连续调用多个
console.groupCollapsed()会形成嵌套结构，但注意 Chrome 最多支持 10 层嵌套，超出后新组会自动扁平化 - Node.js 不支持这两个 API（仅限浏览器环境），服务端调试别白费劲
如何给 React 组件初始化加折叠日志（带上下文）
直接在 useEffect() 或类组件 componentDidMount() 里包裹，但关键是要传入有意义的组名，而不是写死字符串。
- 推荐用组件名 + 关键标识，比如
console.groupCollapsed(`[App] init (env=${process.env.NODE_ENV})`) - 在组内继续调用
console.log()、console.table()甚至另一个console.groupCollapsed()都合法 - 务必配对调用
console.groupEnd()，漏掉会导致后续所有日志都缩进错位（Chrome 控制台会显示 “Group collapsed” 灰字提示，但不报错） - 示例片段：
useEffect(() => {
console.groupCollapsed(`[UserPanel] mounted, userId=${userId}`);
console.log('props:', props);
console.table({ loading: isLoading, error: !!error });
console.groupEnd();
}, [userId, props, isLoading, error]);
折叠日志里还能不能高亮关键信息？
可以，但得靠 CSS 字符串拼接——console.groupCollapsed() 本身不支持样式，但组名和组内 console.log() 都支持 %c 占位符。
- 组名里用
%c会失效（浏览器忽略），所以高亮只能放在组内第一行 - 例如：
console.log('%c✅ Init success', 'color: #4CAF50; font-weight: bold'); - 注意：每个
%c必须对应一个样式字符串参数，多一个少一个都会导致样式错乱或文本不显示 - 别在折叠组里滥用
console.error()——它自带红色图标和堆栈，和折叠逻辑无关，反而破坏视觉一致性
为什么有时点了展开却看不到预期日志？
常见三个原因，按概率从高到低：
- 忘记调用
console.groupEnd()，导致后续所有日志被错误归入该组（刷新页面重试即可验证） - 日志被
console.clear()清掉了（尤其某些脚手架 dev server 自动调用） - 组件重复挂载（比如路由快速切换、Strict Mode 双渲染），造成多个同名折叠组叠加，看起来像“没日志”，其实是被盖住了——加个时间戳或随机 ID 辨识：
console.groupCollapsed(`[Form] init ${Date.now()}`)
折叠本身不消耗性能，但组名字符串拼接、频繁创建/销毁组对象会有微小开销。日常开发完全不用顾虑，但如果在每帧都执行的动画逻辑里用，就得三思。
