微前端拓扑日志需结构化、可追溯：用 console.group 嵌套映射 Shell→App→Phase→Detail 四层结构，%c 实现角色语义化着色，结合生命周期钩子精准打点，自动化脱敏并按环境开关控制。
在微前端系统中输出拓扑日志，核心目标不是“炫酷”，而是让多子应用、多通信链路、多生命周期阶段的日志具备可读性、可归属性和可追溯性。直接堆砌 console.log 会导致控制台迅速被淹没，而 console.group（含 groupCollapsed）配合 CSS 样式，能结构化呈现系统拓扑关系，同时视觉上区分层级与角色。
用嵌套 group 构建微前端拓扑结构
微前端典型拓扑包含：主应用（Shell）、多个子应用（如 dashboard、user-center、payment）、通信桥（如 qiankun 生命周期钩子或自定义 EventBus）、共享依赖（如 utils、i18n）。可用嵌套分组映射该结构：
- 最外层用
console.group('? Micro-frontend Topology')标识全局上下文 - 每个子应用启动时开启
console.groupCollapsed(`? [${app.name}] Booting (mode=${app.mode})`) - 在子应用内部，再嵌套
console.group('? Communication')或console.group('⚙️ Lifecycle')细分行为 - 注意 Chrome 最多支持 10 层嵌套，微前端拓扑建议控制在 4 层以内（Shell → App → Phase → Detail）
用 %c 实现语义化样式标记
console.group 本身不支持样式，但其标签参数和组内日志都支持 %c 占位符。可为不同角色分配颜色与标识，提升一瞥识别效率：
- 主应用（Shell）：用深蓝背景 + 白字，例如
`%c[Shell]%c Booted`+'background:#1e3a8a;color:white;','color:inherit;' - 子应用：按业务域配色（如
dashboard→#3b82f6、user-center→#8b5cf6、payment→#ef4444） - 通信事件：统一用橙色边框 + 箭头图标
➡️，如`%c➡️ ${event.type}%c from ${from} to ${to}` - 错误/警告节点：在
console.warn或console.error前加红底白字标签，强化风险提示
结合生命周期钩子精准打点
拓扑日志的价值取决于时机。不能在子应用加载脚本时就打点（此时状态未就绪），而应在关键生命周期完成后再输出真实状态：
- Qiankun 场景：在
mount回调末尾、update后、unmount前打组日志 - 模块联邦场景：在
init完成、remote.get()返回后包裹分组 - 避免在
loadMicroApp调用瞬间打点——那只是注册，不是运行；应监听status === 'MOUNTED'再展开日志组 - 每个分组内优先输出
console.table({ status, version, activeRule })，比纯文本更易横向对比
自动化脱敏与环境控制
微前端常涉及跨团队协作，日志可能含敏感字段（如 token、用户 ID 片段、内部 URL）。需在输出前过滤：
- 开发环境启用完整日志；测试/预发环境自动隐藏 token、sessionKey 等字段；生产环境默认关闭所有拓扑日志（或仅上报不打印）
- 封装一个
safeLogGroup(label, data)工具函数，在传入console.groupCollapsed前对data执行JSON.stringify并正则替换敏感值 - 利用
process.env.MF_DEBUG开关控制是否激活整套拓扑日志逻辑，避免侵入业务代码 - 可在控制台顶部加一行
console.info('%c? MF Debug Mode ON — Topology logs enabled', 'color:#10b981;font-weight:bold;')提示当前状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
