اضافه کردن استایل css به تابع console.log در جاوااسکریپت

Mohamad 1 ماه پیش

اگر با جاوااسکریپت کار کرده باشید متوجه شده اید که console.log() یکی از پرکاربردترین توابع جاوااسکریپت برای پیدا کردن ارورهاست. دنبال کردن خروجی های console.log() در مرورگرها به خصوص اگر تعداد آن ها زیاد باشد می تواند خسته کننده باشد. اما می توان این مشکل را با افزودن css به این خروجی ها برطرف کرد.

مشخص کننده فرمت

قبل از اینکه استایل خود را به console.log() اضافه کنیم بگذارید نگاهی به چگونگی اعمال این دستورالعمل بیاندازیم. مشخص کننده فرمت (format specifier) که با % نشان داده می شود در کنار یک حرف قرار می گیرد. این حرف نوع فرمتی که بر روی آن مقدار اعمال خواهد شد را نشان می دهد.

در زیر لیست مشخص کننده های فرمت و خروجی آن ها آورده شده است.

مشخص کنندهخروجی
%sفرمت مقادیر از نوع رشته (string)
%i یا  %dفرمت مقادیر از نوع عدد صحیح (integer)
%fفرمت مقادیر از نوع اعداد اعشاری (float)
%oفرمت مقادیر از نوع المان های DOM
%Oفرمت مقادیر از نوع اشیاء جاوااسکریپت (JavaScript object)
%cاستایل به خروجی های string

مثال 1:

برای افزودن استایل به خروجی کنسول از مشخص کننده فرمت %c استفاده می کنیم، سپس پیام را قرار می دهیم. در انتها استایل خود را به پیام اضافه می کنیم:

console.log("%cHello World", "color: green; font-weight: bold;");

 خروجی در کنسول:

IBvmfwtZdvnvPYagogwMT7bVKqQkhvB0mhtlnsKC.png

مثال 2: 

تغییر فونت در خروجی:

console.log("%cThis is a default font style","color: blue; font-size: 20px");

console.log("%cThis is a custom font style","color: blue; font-family:serif; font-size: 20px");

console.log("%cThis is a custom font style","color: blue; font-family:monospace; font-size: 20px");

console.log("%cThis is a custom font style","color: blue; font-family:sans-serif; font-size: 20px");

 

0 دیدگاه
برای قرار دادن دیدگاه وارد شوید