اگر با جاوااسکریپت کار کرده باشید متوجه شده اید که 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;");خروجی در کنسول:
مثال 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");
