console.groupcollapsed 搭配日志级别过滤可提升大型分布式系统浏览器端调试清晰度：按模块与阶段分层折叠日志，结合 info/warn/error 语义分级、环境感知开关、console.time/table 等增强可观测性。
用 console.groupCollapsed 搭配日志级别过滤，能显著提升大型分布式系统在浏览器端的调试清晰度——它把杂乱的初始化、请求链路、状态同步等日志按逻辑折叠，再通过控制台的级别筛选聚焦关键信息，避免被海量 log 淹没。
按模块与阶段分层折叠，还原系统调用结构
大型分布式系统常含微前端子应用、多服务 SDK、动态加载模块等，初始化顺序复杂。直接平铺日志会导致因果难辨。
- 外层用系统级标识，如
console.groupCollapsed("[AuthService] boot")包裹整个认证模块启动流程 - 内层嵌套依赖步骤：配置加载、Token 刷新、权限树拉取，每步单独
groupCollapsed，标题带上下文（如"[Auth] fetch permissions (tenant=prod)"） - 严格配对
console.groupEnd()，避免后续日志缩进错位；Chrome 最多支持 10 层嵌套，建议控制在 3 层以内，靠命名补足语义
结合 console.info / warn / error 实现语义化分级
折叠只是组织形式，真正提升效率的是让不同重要性的信息“各就各位”。
- 用
console.info()标记正常流程节点（如 “✅ Config loaded from CDN”），蓝色图标易识别，适合默认开启 - 用
console.warn()输出潜在风险（如 “⚠️ Fallback API used: /v1/users → /v2/users”），黄色警示提醒关注但不中断 - 用
console.error()记录必须处理的问题（如 “❌ Auth token expired, redirecting…”），红色高亮+堆栈，便于快速定位 - 开发时在 Chrome 控制台顶部勾选 “Info”、“Warn”、“Error”，关闭 “Log” 可瞬间收起大量普通日志，只留关键信号
环境感知 + 动态开关，兼顾开发效率与生产安全
分布式系统调试常跨多个环境（local/staging/prod），日志策略需自动适配。
- 包裹整块分组逻辑：仅在
process.env.NODE_ENV === 'development'或location.hostname.includes('staging')时执行console.groupCollapsed和内部日志 - 封装工具函数，例如：
function logInit(module, fn) {
if (IS_DEBUG) { console.groupCollapsed(`[${module}] init`); }
fn();
if (IS_DEBUG) { console.groupEnd(); }
} - 避免空分组残留：不满足条件时不调用任何
console方法，防止控制台出现无内容的灰色折叠项
联动 console.time 与 console.table，强化可观测性
折叠组内不是只能打文字，配合其他 API 能形成轻量级可观测单元。
- 在
groupCollapsed内第一行调用console.time("init-total")，最后一行console.timeEnd("init-total")，展开后直接看到该模块总耗时 - 对关键数据结构使用
console.table()，比如拉取的微服务注册列表、路由映射表，比console.log更易横向比对 - 用
%c样式前缀给组名加颜色或背景，例如：
console.groupCollapsed(`%c[API Gateway] setup`, "color:#2563eb;background:#eff6ff;padding:2px 6px;border-radius:4px");
