استایل‌ دادن به خروجی‌های جاوااسکریپت در کنسول

استایل‌ دادن به خروجی‌های جاوااسکریپت در کنسول

زیبا جلوه‌ دادن یک متن به اثربخشی آن کمک بسیاری می‌کند اما دولوپرها گاهی اوقات می‌بایست متونی را صرفاً جهت اطلاع خود در جایی چاپ کنند که یکی از آن‌ها کنسول مرورگر است که بازهم زیباسازی آن خالی از لطف نیست. در این مقاله به ارائهٔ ترفندی می‌‌پردازیم که کمک می‌کند خروجی کدهای جاوااسکریپت را در کنسول استایل دهیم.

بااستفاده از کنسول جاوااسکریپت مرورگر گوگل کروم، می‌توانید به‌راحتی خروجی کدها را در کنسول مشاهده کنید (برای آشنایی بیشتر با نحوهٔ انجام این‌کار، به آموزش به‌کارگیری کنسول توسعهٔ جاوااسکریپت در مرورگر گوگل کروم مراجعه نمایید). حال برای شروع، کد زیر را درنظر بگیرید:

console.log("%c%s",
            "color: red; background: yellow; font-size: 24px;",
            "WARNING!");

اولین آرگومان ورودی -یعنی %c%s- استایل نوشته را مشخص می‌کند، دومین آرگومان رنگ را مشخص می‌کند که در کد بالا red (قرمز) می‌باشد، سومین آرگومان بک‌گراند را مشخص می‌کند که در کد بالا yellow (زرد)  می‌باشد و آرگمان بعدی سایز نوشته و آخرین آرگمان خودِ نوشته را نشان می‌دهد که در کد بالا !WARNING است. اگر این کد را در کنسول جاوااسکریپت اجرا کنید، کلمۀ !WARNING را به‌ رنگ قرمز، با بک‌گراند زرد و فونت نسبتاً بزرگی خواهید دید. 

منبع


سحر شاکر