写入Console.log的风格
#javascript #网络开发人员 #webassembly #blazor

控制台是每个网络开发人员的一个很好的伴侣。
我们使用控制台记录所有内容,出于各种原因。 在这篇文章中,我将展示如何将一些CSS样式添加到控制台应用程序中,只是为了获得乐趣或为浏览器的开发人员工具控制台中的日志添加值。

要向控制台添加CSS样式,我们在字符串开始时使用格式指定符。
作为第二个参数,我们可以添加一些CSS规则。
看看下面的脚本:

console.log("%cThis is a red text", "red");

简单。
但是我们如何使用相同的功能,但是来自大型应用程序?
也很容易。

打开剃须刀页面,您想添加控制台格式并插入JSRUNTIME的注射。
然后在初始化的ASYNC或单击事件中,调用Blazor的Console.Log方法。
您可以使用与JavaScript中使用的相同参数。
您可以在下面找到要添加到应用程序的整个代码。

@code {
    @inject IJSRuntime JSRuntime

    protected override async Task OnInitializedAsync()
    {
        await JSRuntime.InvokeVoidAsync("console.log", "%cRed Origin  5.0.1 🚀", "color:#0dd8d8; background:#0b1021; font-size:1.5rem; padding:0.15rem 0.25rem; margin: 1rem auto; font-family: Rockwell; border: 2px solid #0dd8d8; border-radius: 4px;font-weight: bold; text-shadow: 1px 1px 1px #00af87bf;");
    }
}

在这种情况下,在控制台中,您可以在此图片中找到类似的消息:


感谢您阅读这篇文章,希望您发现它很有趣!

随时关注我,当新文章不在ð

时得到通知