Console 日志样式预览 - %c 格式化输出效果测试

%c 是浏览器控制台 console.log() 的格式化占位符，允许你为输出的文本应用 CSS 样式。使用方法：在字符串中插入 %c，然后在后续参数中传入对应的 CSS 样式字符串。

示例：console.log('%c红色文字%c蓝色文字', 'color:red;font-size:16px;', 'color:blue;font-weight:bold;');

每个 %c 会影响它之后直到下一个 %c（或字符串结束）之间的所有文本。支持链式使用多个样式块。

广泛支持的属性：color、background、font-size、font-weight、font-style、font-family、padding、margin、border、border-radius、text-shadow、text-decoration、line-height、letter-spacing、text-transform。

部分支持：box-shadow（Chrome 支持良好）、background-image（Firefox 支持有限）、-webkit-text-stroke（仅 Webkit 内核）。

不支持：display、position、width/height、flex/grid 等布局属性。控制台输出本质上是内联文本，布局类属性无效。

Chrome/Edge 对样式支持最全面，Firefox 次之，Safari 略有差异。建议使用基础 CSS 属性以确保跨浏览器兼容。

最佳实践：

• 环境区分：开发环境使用详细样式日志，生产环境通过构建工具移除或简化。
• 品牌展示：在控制台输出品牌 Logo（使用 ASCII 艺术 + 样式），给开发者留下印象。
• 警告/错误标记：使用红色背景标记错误、黄色标记警告、绿色标记成功操作，便于快速识别。
• API 调试：用不同颜色区分请求方法（GET=蓝色、POST=绿色、DELETE=红色等）。
• 性能标记：结合 console.time() 使用彩色输出标注性能关键节点。

注意不要让样式日志过于花哨影响可读性，保持简洁清晰始终是第一原则。

样式参数多于 %c：多余的样式会被忽略，不会报错。

样式参数少于 %c：缺少样式对应的 %c 会以普通文本形式显示（部分浏览器会将 %c 字面输出，部分则静默忽略）。建议始终确保数量匹配。

没有 %c 但有样式参数：样式参数会被忽略，整个字符串以默认样式输出。

本工具会自动检测 %c 数量并生成对应数量的编辑器，帮助你避免不匹配问题。

移动端浏览器（Chrome for Android、Safari iOS）同样支持 %c 格式化，但由于移动端调试工具（如 vConsole、eruda）的实现差异，样式支持可能不完整。

在真机远程调试（Chrome DevTools Remote Debugging）中查看时，样式通常能正常渲染。如果你需要在移动端内嵌控制台查看日志，建议使用简单的颜色和字体样式，避免依赖高级 CSS 特性。