后端开发教程 - Java、Spring Boot 实战 - msg200.com
控制台消息样式
作为开发人员，我们有时会将消息记录到控制台以进行调试。有时，获得意外的结果可能会令人感到压力很大，尤其是在应用程序中有多个组件的情况下。在这种情况下，控制台消息非常有用。
如果你能为控制台消息添加样式会怎么样？或许它不仅能用于调试，还能用来警告别人别再碰你的作品了。有趣的是，你可以%c在控制台语句中添加说明符来实现这一点。现在你知道了，打开开发者工具，在控制台中试试吧。
console.log('%cStyling Console Messages', 'color:green; background:#33eeaa; font-size:25px;')
%c说明符
该说明符%c允许您将 CSS 样式添加到控制台语句中。如上例所示，%c它将第二个参数中的 CSS 样式规则应用于控制台语句。有关其他说明符的信息，请参阅Google 开发者 — 控制台 API 参考。
其他控制台消息
我们还可以设置其他控制台语句的样式，但让我们重点介绍如何将 CSS 样式应用于其中的几个。
console.log('%cGeneral output of logging information', 'color: #330000;');
console.info('%cInformative logging of information', 'color: #0080ff;');
console.warn('%cOutputs a warning message', 'color: #ff8000;');
console.error('%cOutputs an error message', 'color: #ff0000;');
类似地，%cspecifier 也适用于其他控制台语句。请参阅MDN Web 文档 — 控制台 Web API。
应用多种样式
当然，一个控制台语句可以应用多种 CSS 样式。只需在控制台语句前面添加 即可%c。当然，指令之后的语句将使用参数中指定的 CSS 样式进行样式设置。
console.log('Multiple Styles: %cFirst Style. %cSecond Style','color:#085965; font-size:20px','color:#f53c55; font-size:30px')
值得注意的是，控制台语句中指定了三个参数，并且最后两个参数%c分别应用于说明符中声明的样式。
使用 CSS 样式数组来设置控制台消息的样式
事实上，CSS 样式可能会很长。不过，将样式分离到数组变量中会很有帮助。
const styles = [
'color: #4dbb63',
'background: #999588',
'font-size: 20px',
'text-shadow: 2px 2px #615e57',
'padding: 5px',
].join(';');
console.log('%cStyling Console Messages', styles);
请注意，该join()函数用于将数组转换为字符串。
结论
总而言之，控制台是一个我们可以利用的强大工具。但是，如果您对 Laravel 的新功能感兴趣，可以阅读文章“ Laravel 6 中的新功能”。