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

Jecelyn Yeen

يوضِّح لك هذا الدليل كيفية تنسيق الرسائل وتنسيقها في وحدة التحكّم في أدوات مطوّري البرامج في 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، وغالبًا ما يكون ذلك بمساعدة بعض مكتبات الأنماط مثل الطباشير والألوان والألوان الزهرية والكلور.

ومع ذلك، يمكنك تصميم الرسالة باستخدام تسلسلات إلغاء 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 بـ 3 أنماط مختلفة. Hello World