تنسيق الرسائل وتنسيقها في وحدة التحكّم

جيسلين يين

يوضّح لك هذا الدليل كيفية تنسيق الرسائل وتنسيقها في وحدة تحكّم أدوات مطوّري البرامج في Chrome. اطلع على بدء استخدام رسائل التسجيل لمعرفة كيفية تسجيل الرسائل في وحدة التحكم.

يفترض هذا الدليل أنك على دراية بأساسيات تطوير الويب، مثل كيفية استخدام JavaScript لإضافة تفاعل إلى صفحة.

تنسيق رسائل وحدة التحكّم

يمكنك استخدام محدّدات التنسيق لتنسيق رسائل وحدة التحكّم.

تبدأ محددات التنسيق بحرف النسبة المئوية (%) وتنتهي بـ "حرف النوع" الذي يشير إلى نوع البيانات (عدد صحيح، عدد عائم، إلخ.).

على سبيل المثال:

  1. فتح وحدة التحكّم
  2. أدخِل أمر وحدة التحكّم التالي. js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. يعرض الأمر أعلاه رسالة Chrome DevTools is awesome.. قيمة سلسلة التنسيق

في ما يلي قائمة بمحددات التنسيق التي تتوافق مع "أدوات مطوري البرامج في Chrome" حاليًا.

المحدد الناتج
%s لتنسيق القيمة كسلسلة
‫%i أو %d لتنسيق القيمة كعدد صحيح
%f لتنسيق القيمة كقيمة نقطة عائمة
%o لتنسيق القيمة كعنصر DOM القابل للتوسيع
%O لتنسيق القيمة ككائن JavaScript قابل للتوسيع
%c تطبق قواعد نمط CSS على سلسلة الإخراج كما هو محدد بواسطة المعلمة الثانية

تطبيق محددات تنسيقات متعددة

يمكنك استخدام أكثر من محدد تنسيق واحد في الرسالة.

  1. أدخِل أمر وحدة التحكّم التالي. js 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. أدخِل أمر وحدة التحكّم التالي. js 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. أدخِل أمر وحدة التحكّم التالي. js console.log('Jane has %i kiwis.', 'two');
  2. يعرض الأمر أعلاه رسالة Jane has NaN kiwis.. NaN في رسالة وحدة التحكم
  3. تشير %i إلى أنه يجب/سيتم تحويل القيمة إلى عدد صحيح، غير أن الوسيطة هي سلسلة. وبالتالي، تعرض NaN (Not-A-Number).

رسائل وحدة التحكّم بالنمط

هناك طريقتان لتحديد نمط رسائل وحدة التحكم في أدوات مطوري البرامج.

نمط مع محدد التنسيق

يمكنك استخدام محدد التنسيق %c لاختيار نمط رسائل وحدة التحكم باستخدام CSS.

  1. أدخِل أمر وحدة التحكّم التالي. js 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، غالبًا بمساعدة بعض مكتبات الأنماط مثل chalk وcolors وansi-colors وkleur.

ومع ذلك، يمكنك تصميم الرسالة باستخدام تسلسلات الإلغاء حسب المعهد الوطني الأمريكي للمقاييس (ANSI) بدون استخدام أي مكتبات. فيما يلي بناء الجملة:

\x1B[𝘗1;…;𝘗nm

أين،

  • تُعدّ 𝘗1 إلى 𝘗n تسلسلات فرعية صالحة لمَعلمات SGR (اختيار عرض الرسومات).
  • ويمكن حذف أي من المعلَمات من 𝘗1 إلى 𝘗n، وفي هذه الحالة يُفترض أن تكون قيمتها صفرًا.
  • \x1B[m هو اختصار لـ \x1B[0m، حيث تتم إعادة ضبط سمة العرض.

على سبيل المثال:

  1. أدخِل أمر وحدة التحكّم التالي. js console.log('\x1B[41;93;4mHello\x1B[m');
  2. سيعرِض الأمر أعلاه رسالة Hello بخلفية حمراء ونص أصفر وتحتها خط. مرحبًا

في ما يلي قائمة برموز الألوان المتوافقة مع "أدوات مطوري البرامج".

واجهة الخلفية مظهر فاتح مظهر داكن
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

في ما يلي قائمة برموز النمط المتاحة في "أدوات مطوري البرامج".

المَعلمات المعنى
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؛R؛G؛B color: rgb(𝑅,𝐺,𝐵)
39 إعادة ضبط color property
48؛2؛R؛G؛B background: rgb(𝑅,𝐺,𝐵)
49 إعادة ضبط background property
53 إضافة overline إلى الموقع الإلكتروني "text-decoration"
55 إزالة overline من الموقع الإلكتروني "text-decoration"

فيما يلي مثال آخر أكثر تعقيدًا يتضمن أنماطًا متعددة.

  1. أدخل أمر وحدة التحكم التالي. ```js const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    console.log(hello + Space + world); ```

  2. يعرض الأمر أعلاه رسالة Hello World بثلاثة أنماط مختلفة. Hello World