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

Jecelyn Yeen

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

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

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

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

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

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

1. فتح وحدة التحكّم

2. أدخِل الأمر التالي في وحدة التحكّم.

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

3. يعرض الأمر أعلاه رسالة Chrome DevTools is awesome..

في ما يلي قائمة بمحددات التنسيق التي تتيحها Chrome DevTools حاليًا.

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

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

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..

3. يشير الرمز %i إلى أنّه يجب تحويل القيمة إلى عدد صحيح، ولكن الوسيطة هي سلسلة. وبالتالي، تعرض NaN (ليس رقمًا).

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

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

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

يمكنك استخدام محدّد التنسيق %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.

أسلوب مع سلاسل الهروب ANSI

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

من الشائع أن يلوّن مطوّرو Node.js رسائل السجلّ من خلال تسلسلات الهروب ANSI، وغالبًا ما يتم ذلك بمساعدة بعض مكتبات الأنماط، مثل chalk وcolors وansi-colors وkleur.

ومع ذلك، يمكنك تصميم الرسالة باستخدام تسلسلات الهروب ANSI بدون استخدام أي مكتبات. في ما يلي بنية الجملة:

\x1B[𝘗1;…;𝘗nm

مع أطيب التحيّات،

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

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

1. أدخِل الأمر التالي في وحدة التحكّم.

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

2. تؤدي التعليمة أعلاه إلى إنشاء رسالة Hello ذات خلفية حمراء ونص أصفر وخط تحته خط.

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

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

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

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 بأنماط مختلفة.