قالب و سبک پیام ها را در کنسول

جسلین ین

این راهنما به شما نشان می‌دهد که چگونه پیام‌ها را در Chrome DevTools Console قالب‌بندی و قالب‌بندی کنید. برای آشنایی با نحوه ثبت پیام‌ها در کنسول، به شروع با ثبت پیام‌ها مراجعه کنید.

این راهنما فرض می‌کند که شما اصول توسعه وب، مانند نحوه استفاده از جاوا اسکریپت برای افزودن تعامل به صفحه را می‌دانید.

قالب بندی پیام های کنسول

می توانید از مشخص کننده های قالب برای قالب بندی پیام های کنسول استفاده کنید.

مشخص‌کننده‌های قالب با یک کاراکتر درصد (%) شروع می‌شوند و با یک کاراکتر نوع پایان می‌یابند که نوع داده (عدد صحیح، شناور و غیره) را نشان می‌دهد.

به عنوان مثال،

  1. کنسول را باز کنید

  2. دستور کنسول زیر را وارد کنید.

    const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

  3. دستور بالا باعث می‌شود Chrome DevTools is awesome. پیام فرمت مقدار رشته

در اینجا لیستی از مشخص‌کننده‌های قالب است که Chrome DevTools در حال حاضر پشتیبانی می‌کند.

مشخص کننده خروجی
%s مقدار را به عنوان یک رشته قالب بندی می کند
%i یا %d مقدار را به صورت یک عدد صحیح قالب بندی می کند
%f مقدار را به عنوان مقدار ممیز شناور قالب بندی می کند
%o مقدار را به عنوان یک عنصر DOM قابل گسترش قالب بندی می کند
%O مقدار را به عنوان یک شی جاوا اسکریپت قابل گسترش قالب بندی می کند
%c قوانین سبک CSS را همانطور که توسط پارامتر دوم مشخص شده است در رشته خروجی اعمال می کند

چند مشخص کننده فرمت را اعمال کنید

شما می توانید از بیش از یک فرمت مشخص کننده در یک پیام استفاده کنید.

  1. دستور کنسول زیر را وارد کنید.

    console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);

  2. دستور بالا تولید می کند The total weight of 3 apples and 2 oranges is 432.4 grams. پیام تعیین کننده های چند فرمت

تبدیل نوع را درک کنید

پیام خروجی با توجه به فرمت مشخص کننده تبدیل می شود.

  1. دستور کنسول زیر را وارد کنید.

    console.log('I have %i apples and %d oranges.', 2, 3.5);

  2. دستور بالا I have 2 apples and 3 oranges. پیام فرمت مقادیر عدد صحیح

  3. به جای ثبت 3.5 oranges ، خروجی 3 oranges است. %d نشان می دهد که مقدار باید به یک عدد صحیح تبدیل شود.

در اینجا مثالی از این است که اگر تبدیل نوع نامعتبر باشد چه اتفاقی می افتد.

  1. دستور کنسول زیر را وارد کنید.

    console.log('Jane has %i kiwis.', 'two');

  2. دستور بالا نشان می دهد Jane has NaN kiwis. پیام NaN در پیام کنسول

  3. %i نشان می دهد که مقدار باید به یک عدد صحیح تبدیل شود، اما آرگومان یک رشته است. بنابراین NaN (Not-A-Number) را برمی گرداند.

سبک پیام های کنسول

دو روش برای استایل دادن به پیام های کنسول در DevTools وجود دارد.

سبک با مشخص کننده فرمت

می توانید از مشخص کننده فرمت %c برای استایل دادن به پیام های کنسول با CSS استفاده کنید.

  1. دستور کنسول زیر را وارد کنید.

    const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);

  2. دستور بالا Hooray با استفاده از سبک های CSS تولید می کند. خروجی سبک با CSS

سبک با دنباله های فرار ANSI

می توانید از دنباله های فرار ANSI برای استایل دادن به پیام های کنسول استفاده کنید.

برای توسعه دهندگان Node.js معمول است که پیام های گزارش را از طریق دنباله های فرار ANSI، اغلب با کمک برخی از کتابخانه های سبک مانند گچ ، رنگ ها ، ansi-colors ، kleur رنگ آمیزی کنند.

با این وجود، می‌توانید پیام را با دنباله‌های فرار ANSI بدون استفاده از هیچ کتابخانه‌ای استایل دهید. در اینجا نحو است:

\x1B[𝘗1;…;𝘗nm

کجا،

  • 𝘗1 تا 𝘗n دنباله‌های معتبر پارامترهای SGR (انتخاب نمایش گرافیکی) هستند.
  • هر یک از پارامترهای 𝘗1 تا 𝘗n را می توان حذف کرد که در این صورت مقدار آن صفر در نظر گرفته می شود.
  • \x1B[m مخفف \x1B[0m است که در آن ویژگی نمایش بازنشانی می‌شود.

به عنوان مثال،

  1. دستور کنسول زیر را وارد کنید.

    console.log('\x1B[41;93;4mHello\x1B[m');

  2. دستور بالا یک پیام Hello با پس‌زمینه قرمز، متن زرد و خط‌دار تولید می‌کند. سلام

در اینجا لیستی از کدهای رنگی که در DevTools پشتیبانی می شوند، آمده است.

پیش زمینه پس زمینه تم سبک تم تاریک
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

در اینجا لیستی از کدهای استایل پشتیبانی شده در DevTools آمده است.

پارامتر(های) معنی
0 بازنشانی تمام ویژگی های نمایشگر
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 underline به ویژگی text-decoration اضافه کنید
9 اضافه کردن line-through به ویژگی text-decoration
22 ویژگی font-weight بازنشانی کنید
23 ویژگی font-style بازنشانی کنید
24 underline از ویژگی text-decoration حذف کنید
29 حذف line-through از ویژگی text-decoration
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 بازنشانی color property
48;2;𝑅;𝐺;𝐵 background: rgb(𝑅,𝐺,𝐵)
49 بازنشانی background property
53 اضافه کردن overline به ویژگی text-decoration
55 حذف overline از ویژگی text-decoration

در اینجا یک مثال پیچیده دیگر با استایل های متعدد وجود دارد.

  1. دستور کنسول زیر را وارد کنید.

    const hello = '\x1B[41;93;4mHello';
const space = '\x1B[m ';
const world = '\x1B[34;102;9mWorld';

console.log(hello + space + world);

  2. دستور بالا یک پیام Hello World با 3 سبک مختلف تولید می کند. سلام دنیا

،

جسلین ین

این راهنما به شما نشان می‌دهد که چگونه پیام‌ها را در Chrome DevTools Console قالب‌بندی و قالب‌بندی کنید. برای آشنایی با نحوه ثبت پیام‌ها در کنسول، به شروع با ثبت پیام‌ها مراجعه کنید.

این راهنما فرض می‌کند که شما اصول توسعه وب، مانند نحوه استفاده از جاوا اسکریپت برای افزودن تعامل به صفحه را می‌دانید.

قالب بندی پیام های کنسول

می توانید از مشخص کننده های قالب برای قالب بندی پیام های کنسول استفاده کنید.

مشخص‌کننده‌های قالب با یک کاراکتر درصد (%) شروع می‌شوند و با یک کاراکتر نوع پایان می‌یابند که نوع داده (عدد صحیح، شناور و غیره) را نشان می‌دهد.

به عنوان مثال،

  1. کنسول را باز کنید

  2. دستور کنسول زیر را وارد کنید.

    const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

  3. دستور بالا باعث می‌شود Chrome DevTools is awesome. پیام فرمت مقدار رشته

در اینجا لیستی از مشخص‌کننده‌های قالب است که Chrome DevTools در حال حاضر پشتیبانی می‌کند.

مشخص کننده خروجی
%s مقدار را به عنوان یک رشته قالب بندی می کند
%i یا %d مقدار را به صورت یک عدد صحیح قالب بندی می کند
%f مقدار را به عنوان مقدار ممیز شناور قالب بندی می کند
%o مقدار را به عنوان یک عنصر DOM قابل گسترش قالب بندی می کند
%O مقدار را به عنوان یک شی جاوا اسکریپت قابل گسترش قالب بندی می کند
%c قوانین سبک CSS را همانطور که توسط پارامتر دوم مشخص شده است در رشته خروجی اعمال می کند

چند مشخص کننده فرمت را اعمال کنید

شما می توانید از بیش از یک فرمت مشخص کننده در یک پیام استفاده کنید.

  1. دستور کنسول زیر را وارد کنید.

    console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);

  2. دستور بالا تولید می کند The total weight of 3 apples and 2 oranges is 432.4 grams. پیام تعیین کننده های چند فرمت

تبدیل نوع را درک کنید

پیام خروجی با توجه به فرمت مشخص کننده تبدیل می شود.

  1. دستور کنسول زیر را وارد کنید.

    console.log('I have %i apples and %d oranges.', 2, 3.5);

  2. دستور بالا I have 2 apples and 3 oranges. پیام فرمت مقادیر عدد صحیح

  3. به جای ثبت 3.5 oranges ، خروجی 3 oranges است. %d نشان می دهد که مقدار باید به یک عدد صحیح تبدیل شود.

در اینجا مثالی از این است که اگر تبدیل نوع نامعتبر باشد چه اتفاقی می افتد.

  1. دستور کنسول زیر را وارد کنید.

    console.log('Jane has %i kiwis.', 'two');

  2. دستور بالا نشان می دهد Jane has NaN kiwis. پیام NaN در پیام کنسول

  3. %i نشان می دهد که مقدار باید به یک عدد صحیح تبدیل شود، اما آرگومان یک رشته است. بنابراین NaN (Not-A-Number) را برمی گرداند.

سبک پیام های کنسول

دو روش برای استایل دادن به پیام های کنسول در DevTools وجود دارد.

سبک با مشخص کننده فرمت

می توانید از مشخص کننده فرمت %c برای استایل دادن به پیام های کنسول با CSS استفاده کنید.

  1. دستور کنسول زیر را وارد کنید.

    const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);

  2. دستور بالا Hooray با استفاده از سبک های CSS تولید می کند. خروجی سبک با CSS

سبک با دنباله های فرار ANSI

می توانید از دنباله های فرار ANSI برای استایل دادن به پیام های کنسول استفاده کنید.

برای توسعه دهندگان Node.js معمول است که پیام های گزارش را از طریق دنباله های فرار ANSI، اغلب با کمک برخی از کتابخانه های سبک مانند گچ ، رنگ ها ، ansi-colors ، kleur رنگ آمیزی کنند.

با این وجود، می‌توانید پیام را با دنباله‌های فرار ANSI بدون استفاده از هیچ کتابخانه‌ای استایل دهید. در اینجا نحو است:

\x1B[𝘗1;…;𝘗nm

کجا،

  • 𝘗1 تا 𝘗n دنباله‌های معتبر پارامترهای SGR (انتخاب نمایش گرافیکی) هستند.
  • هر یک از پارامترهای 𝘗1 تا 𝘗n را می توان حذف کرد که در این صورت مقدار آن صفر در نظر گرفته می شود.
  • \x1B[m مخفف \x1B[0m است که در آن ویژگی نمایش بازنشانی می‌شود.

به عنوان مثال،

  1. دستور کنسول زیر را وارد کنید.

    console.log('\x1B[41;93;4mHello\x1B[m');

  2. دستور بالا یک پیام Hello با پس‌زمینه قرمز، متن زرد و خط‌دار تولید می‌کند. سلام

در اینجا لیستی از کدهای رنگی که در DevTools پشتیبانی می شوند، آمده است.

پیش زمینه پس زمینه تم سبک تم تاریک
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

در اینجا لیستی از کدهای استایل پشتیبانی شده در DevTools آمده است.

پارامتر(های) معنی
0 بازنشانی تمام ویژگی های نمایشگر
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 underline به ویژگی text-decoration اضافه کنید
9 اضافه کردن line-through به ویژگی text-decoration
22 ویژگی font-weight بازنشانی کنید
23 ویژگی font-style بازنشانی کنید
24 underline از ویژگی text-decoration حذف کنید
29 حذف line-through از ویژگی text-decoration
38;2;𝑅;𝐺;𝐵 color: rgb(𝑅,𝐺,𝐵)
39 بازنشانی color property
48;2;𝑅;𝐺;𝐵 background: rgb(𝑅,𝐺,𝐵)
49 بازنشانی background property
53 اضافه کردن overline به ویژگی text-decoration
55 حذف overline از ویژگی text-decoration

در اینجا یک مثال پیچیده دیگر با استایل های متعدد وجود دارد.

  1. دستور کنسول زیر را وارد کنید.

    const hello = '\x1B[41;93;4mHello';
const space = '\x1B[m ';
const world = '\x1B[34;102;9mWorld';

console.log(hello + space + world);

  2. دستور بالا یک پیام Hello World با 3 سبک مختلف تولید می کند. سلام دنیا