console.group 不控制日志样式，仅提供折叠结构；需用 %c 显式设置每条日志样式，且每个 %c 仅作用于紧随其后的文本段，不可跨行复用。
console.group 为什么不能直接套用默认样式
因为 console.group 本身不控制内部日志的颜色或字体，它只提供折叠/展开结构。如果你在 group 内直接写 console.log('error')，它还是黑底白字，和外面没区别。真正起作用的是你手动给每条日志加 %c 样式，或者封装成带颜色的函数。
常见错误是以为调用 console.group('API') 后，后续所有 console.log 就自动染色了——其实不会。必须显式传入样式参数，否则 group 只是视觉分组，不是语义分组。
如何用 %c 实现 group 内统一配色又保留层级语义
推荐把 group 标题和内部日志分开处理：标题用粗体+背景色强调上下文，内部日志按级别各自着色。这样既保持结构，又不牺牲可读性。
console.group('%cAPI Request', 'background:#2196F3; color:white; font-weight:bold; padding:2px 6px; border-radius:3px')console.log('%cGET /users', 'color:#03A9F4; font-weight:bold', 'params:', { page: 1 })console.log('%cResponse 200', 'color:#4CAF50; font-weight:bold', 'data length:', 12)console.warn('%cTimeout fallback', 'color:#FF9800; font-style:italic')console.error('%cNetwork error', 'color:#f44336; font-weight:bold; text-decoration:underline')console.groupEnd()
注意：每个 %c 只影响紧随其后的文本段，不能跨多个 console.log 复用同一组样式。别试图用一个样式字符串覆盖整个 group。
在微前端或跨 service 日志中避免颜色冲突
当多个子系统（比如 React 微应用 + Vue 管理后台 + Web Worker 日志）共用同一个控制台时，纯靠颜色容易混淆。这时候要加入前缀标识 + 颜色双重锚点：
- React 应用：用
console.log('%c[React] render completed', 'color:#61dafb') - Web Worker：用
console.log('%c[Worker] task done', 'color:#a29bfe; font-size:12px') - 第三方 SDK：用
console.log('%c[AuthSDK] token refreshed', 'color:#ff6b6b; background:#fff5f5')
关键点是前缀字符串必须固定、简短、可搜索；颜色尽量避开通用语义色（比如不用红色表示 AuthSDK 正常刷新）。否则团队成员看到红色第一反应是报错，反而掩盖真实问题。
性能与兼容性容易被忽略的细节
%c 在所有现代浏览器都支持，但老版 Safari（%c 的解析不稳定，可能出现样式错位或丢失。如果项目还需兼容这类环境，建议：
- 避免单行日志里混用超过 3 个
%c（比如console.log('%ca','%cb','%cc','x','y','z')） - 用
console.groupCollapsed替代console.group减少初始渲染压力 - 生产环境自动关闭所有自定义样式（通过
process.env.NODE_ENV === 'development'判断） - 不要在高频循环里调用带
%c的日志——样式解析比纯文本慢约 15%~20%
最隐蔽的问题是：某些前端监控 SDK（如 Sentry、Datadog 的 JS Agent）会劫持 console 方法，导致你的 %c 样式被过滤或重写。上线前务必在真实监控环境下验证日志是否仍按预期着色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
