ทันเอไอ

认识 Styled Logging：给 Console 文字“上妆”的功能，源自 14 年前的 Firebug 插件

泰国政府 TH AI Passport 网站的开发者控制台里出现巨大的“停”字，让许多人好奇。其实这 Styled Logging 功能早在 2012 年 Firebug 插件时代就已存在

最近不少泰国网民在访问政府网站 TH AI Passport 时，打开 Developer Console（隐藏在浏览器中的开发者工具）后吓了一跳——一个巨大醒目的“停”字赫然在列。很多人这才知道控制台原来可以显示如此精美的格式化文字，但实际上这项功能已开放给开发者使用超过十年了。

这项功能名为 Styled Logging，即通过 console.log 命令用 CSS（定义网页样式的语言）来设置控制台文字的格式，方法是在文字前加上 %c 标识符，后接 CSS 属性值，如字体颜色、字号或背景色。例如 console.log("%c文字", "color: red; font-size: 20px;")，控制台中显示的文字就会立刻变成红色大字。

时间回到 2006 年，当时的浏览器还没有像今天这样内置 Developer Console。Netscape 前软件工程师、Firefox 项目联合创始人 Joe Hewitt 于是开发了 Firebug 插件，让开发者可以直接在浏览器中调试（查找并修复错误）网页。2012 年，Firebug 1.11 版本通过 %c 加入了 Styled Logging 功能，支持在同一条日志中设置多种 CSS 样式，这正是该功能广为人知的起点。

此后各大浏览器陆续将其纳入自家开发者工具：Firefox 从 2014 年的 31 版本起将 Styled Console Logs 列为内置基础功能，Chrome、Edge 和 Safari 同样提供支持。如今 %c 已被正式写入 WHATWG Console Specification 国际标准。

至于 TH AI Passport 网站的案例，在控制台显示大号警告文字是网站常用的技巧，目的是提醒普通用户不要在控制台中粘贴来路不明的代码，以免被骗执行危险指令。因此如果看到这类文字，不必惊慌，只要别听信陌生人、从别处复制代码粘贴进来就安全无虞。