漂亮的 JavaScript 控制台消息

2025-06-08

漂亮的 JavaScript 控制台消息

Facebook

如果您曾经在登录 Facebook 时打开过浏览器工具，您可能已经注意到其中有上述内容（至少在撰写本文时它是这样的）。

撇开 DOM 警告不谈，它看起来和你生成的大多数消息有点不一样console.log，不是吗？一大段红色文字和一些稍大一点的文字。这有点奇怪，不是吗？

事实证明，这些console函数具有多种格式选项，因此如果您想将数字显示到特定的小数位，您可以%.#f像这样使用：

console.log('Pi to 5 decimal places: %.5f', Math.PI);
Enter fullscreen mode Exit fullscreen mode

但这只在 Firefox 中有效。

如果您想指定对象在日志消息中出现的位置，您可以使用%O：

console.log('We found an object, %O, in the system', { foo: 'bar' });
Enter fullscreen mode Exit fullscreen mode

但这一切都很好，我们如何制作大红色文字！

为此，我们将使用%c格式化程序在字符串中的某个位置应用 CSS：

console.log('%cR%ca%ci%cn%cb%co%cw', 'font-size: 20px; color: blue;', 'font-size: 25px; color: lightblue;', 'font-size: 30px; color: lightgreen;', 'font-size: 35px; color: green', 'font-size: 30px; color: yellow;', 'font-size: 25px; color: orange', 'font-size: 20px; color: red')
Enter fullscreen mode Exit fullscreen mode

你可以%c提供一串 CSS 规则，这些规则将一直应用到记录消息结束或找到下一条消息为止%c。这意味着你可以像上面那样创建可爱的彩虹效果，并在此过程中操控每个元素。或者，如果你想更大胆一些，可以这样做：

这个控制台着火了

console.log('%c' + 'This console is on fire', 'font-family:Comic Sans MS; font-size:50px; font-weight:bold; background: linear-gradient(#f00, yellow); border-radius: 5px; padding: 20px')
Enter fullscreen mode Exit fullscreen mode

是的，我们正在为文本设置渐变背景并添加一些填充和圆角！

现在你无法使用 CSS 的所有功能（比如，我还没弄清楚能不能做动画），而且它用处不大。不过，嘿，这挺有意思的，不是吗！😉

鏂囩珷鏉ユ簮锛�https://dev.to/aaronpowell/pretty-javascript-console-3epj
Devto 翻译
PREV
如何将 Firebase 与 Laravel 11 集成？
NEXT
CSS 可以做到这一点...而且很可怕！