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

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

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

إعداد العرض التوضيحي وأدوات مطوّري البرامج

تم تصميم هذا البرنامج التعليمي بحيث يمكنك فتح العرض التوضيحي وتجربة جميع مهام سير العمل بنفسك. عندما تتابع جسديًا، من المرجح أن تتذكر مهام سير العمل لاحقًا.

1. افتح العرض التوضيحي.

2. اختياري: انقل العرض التوضيحي إلى نافذة منفصلة. في هذا المثال، يتوفّر البرنامج التعليمي على اليسار، بينما يتوفّر العرض التوضيحي على اليمين.

   

3. ركِّز على العرض التوضيحي ثم اضغط على Control+Shift+J أو Command+Option+J (Mac) لفتح "أدوات مطوّري البرامج". يتم فتح "أدوات مطوري البرامج" تلقائيًا على يمين العرض التوضيحي

   

4. اختياري: يمكنك إرساء أدوات مطوّري البرامج في أسفل النافذة أو إلغاء إرساءها في نافذة منفصلة.

   تم إرساء أدوات مطوّري البرامج في أسفل العرض التوضيحي:

   تم إلغاء إرساء أدوات مطوّري البرامج في نافذة منفصلة:

عرض الرسائل التي تم تسجيلها من JavaScript

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

1. انقر على زر معلومات التسجيل في العرض التوضيحي. يتم تسجيل دخول Hello, Console! إلى وحدة التحكّم.

   

2. بجانب رسالة Hello, Console! في وحدة التحكم، انقر على log.js:2. تفتح لوحة المصادر وتميِّز سطر الرمز الذي تسبب في تسجيل الرسالة بوحدة التحكم.

   

   تم تسجيل الرسالة عند رمز JavaScript للصفحة المسمى console.log('Hello, Console!').

3. يمكنك الرجوع إلى وحدة التحكّم باستخدام أي من مهام سير العمل التالية:

   • انقر على علامة التبويب وحدة التحكم.
   • اضغط على Control+[ أو Command+[ (نظام التشغيل Mac) حتى يتم التركيز على وحدة التحكم.
   • افتح قائمة الأوامر، وابدأ كتابة Console، واختَر الأمر Show Console Panel (إظهار لوحة وحدة التحكم)، ثم اضغط على Enter.

4. انقر على الزر تحذير بشأن السجل في العرض التوضيحي. يتم تسجيل Abandon Hope All Ye Who Enter في "وحدة التحكم".

   

   إنّ الرسائل المنسَّقة على هذا النحو هي تحذيرات.

5. اختياري: انقر على log.js:12 لعرض الرمز الذي تسبب في تنسيق الرسالة على هذا النحو، ثم انتقل مرة أخرى إلى وحدة التحكم عند الانتهاء. افعل ذلك متى أردت رؤية التعليمة البرمجية التي تسببت في تسجيل رسالة بطريقة معينة.

6. انقر على رمز توسيع أمام Abandon Hope All Ye Who Enter. تعرض أدوات مطوّري البرامج تتبُّع تسلسل استدعاء الدوال البرمجية الذي أدى إلى وقت الاستدعاء.

   

   يشير تتبُّع تسلسل استدعاء الدوال البرمجية إلى أنّه تم استدعاء دالة logWarning، والتي بدورها تُسمى دالة باسم quoteDante. بمعنى آخر، ستجد الاستدعاء الذي حدث أولاً في أسفل تقرير تتبُّع تسلسل استدعاء الدوال البرمجية. يمكنك تسجيل عمليات تتبُّع تسلسل استدعاء الدوال البرمجية في أي وقت من خلال طلب الرقم console.trace().

7. انقر على خطأ في السجلّ. يتم تسجيل رسالة الخطأ التالية: I'm sorry, Dave. I'm afraid I can't do that.

   

8. انقر على Log Table. يتم تسجيل جدول حول الفنانين المشهورين إلى وحدة التحكم.

   

   يُرجى ملاحظة كيفية تعبئة عمود "birthday" لصف واحد فقط. تحقق من التعليمات البرمجية لمعرفة سبب ذلك.

9. انقر على مجموعة السجلّات. تم تجميع أسماء 4 سلاحف مشهورة لمكافحة الجريمة تحت التصنيف Adolescent Irradiated Espionage Tortoises.

   

10. انقر على Log Custom (تسجيل مخصَّص). ويتم تسجيل رسالة ذات حد أحمر وخلفية زرقاء في وحدة التحكم.

    

الفكرة الأساسية هنا هي أنّه عندما تريد تسجيل الرسائل في وحدة التحكم من JavaScript، استخدِم إحدى طرق console. تعمل كل طريقة على تنسيق الرسائل بشكلٍ مختلف.

هناك طرق أكثر مما تم توضيحه في هذا القسم. في نهاية البرنامج التعليمي، ستتعلم كيفية استكشاف بقية الطرق.

عرض الرسائل التي سجّلها المتصفّح

يسجل المتصفح الرسائل إلى وحدة التحكم أيضًا. يحدث هذا عادةً عند وجود مشكلة في الصفحة.

1. انقر على السبب 404. يسجِّل المتصفّح خطأ في الشبكة 404 لأنّ لغة JavaScript في الصفحة حاولت جلب ملف غير متوفّر.

   

2. انقر على سبب الخطأ. يسجِّل المتصفّح عنصر TypeError غير مرصود لأنّ JavaScript يحاول تعديل عقدة DOM غير متوفّرة.

   

3. انقر على القائمة المنسدلة Log Levels (مستويات التسجيل) وفعِّل الخيار Verbose (مطوَّل) إذا كان غير مفعَّل. ستتعرف على المزيد حول التصفية في القسم التالي. تحتاج إلى القيام بذلك للتأكد من أن الرسالة التالية التي تقوم بتسجيلها مرئية. ملاحظة: إذا كانت القائمة المنسدلة "المستويات الافتراضية" غير مفعّلة، قد تحتاج إلى إغلاق الشريط الجانبي لوحدة التحكّم. التصفية حسب مصدر الرسالة أدناه لمزيد من المعلومات حول الشريط الجانبي لوحدة التحكم.

   

4. انقر على انتهاك السبب. تصبح الصفحة غير مستجيبة لبضع ثوان، ثم يسجل المتصفّح الرسالة [Violation] 'click' handler took 3000ms في وحدة التحكّم. قد تختلف المدة الدقيقة.

   

تصفية الرسائل

سترى في بعض الصفحات وحدة التحكم ممتلئة بالرسائل. يوفر DevTools العديد من الطرق المختلفة لتصفية الرسائل غير ذات الصلة بالمهمة المطروحة.

الفلترة حسب مستوى السجلّ

يتم تحديد مستوى خطورة لكل طريقة console.*: Verbose أو Info أو Warning أو Error. على سبيل المثال، رسالة console.log() هي رسالة على مستوى Info، في حين أنّ console.error() رسالة على مستوى Error.

للفلترة حسب مستوى السجلّ:

1. انقر على القائمة المنسدلة مستويات السجل وعطّل الأخطاء. يتم إيقاف المستوى عندما لا تكون هناك علامة اختيار بجانبه. تختفي الرسائل على مستوى Error.

   

2. انقر على القائمة المنسدلة مستويات التسجيل مرة أخرى وأعِد تفعيل الأخطاء. تظهر الرسائل على مستوى Error مرة أخرى.

فلترة حسب النص

إذا كنت تريد عرض الرسائل التي تتضمن سلسلة معيَّنة فقط، اكتب تلك السلسلة في مربّع النص فلتر.

1. اكتب Dave في مربّع النص فلتر. يتم إخفاء جميع الرسائل التي لا تتضمّن السلسلة Dave. وقد يظهر لك أيضًا التصنيف Adolescent Irradiated Espionage Tortoises. هذا خطأ.

   

2. احذف Dave من مربّع النص فلتر. تظهر جميع الرسائل مرة أخرى.

الفلترة حسب التعبير العادي

عندما تريد عرض جميع الرسائل التي تتضمن نمطًا نصيًا، بدلاً من سلسلة معيّنة، استخدِم تعبيرًا عاديًا.

1. اكتب /^[AH]/ في مربّع النص فلتر. اكتب هذا النمط في RegExr للحصول على شرح لما تفعله.

   

2. احذف /^[AH]/ من مربّع النص فلتر. سيتم عرض جميع الرسائل من جديد.

الفلترة حسب مصدر الرسالة

عندما تريد عرض الرسائل الواردة من عنوان URL معيّن فقط، استخدِم الشريط الجانبي.

1. انقر على Show Console Sidebar (إظهار الشريط الجانبي لوحدة التحكّم) .

   

2. انقر على رمز توسيع بجانب الرسالة 12 رسالة. يعرض الشريط الجانبي قائمة بعناوين URL التي تسبَّبت في تسجيل الرسائل. على سبيل المثال، تسبَّب log.js في ظهور 11 رسالة.

   

الفلترة حسب رسائل المستخدمين

في وقت سابق، عند النقر على معلومات السجل، كان هناك نص برمجي يسمى console.log('Hello, Console!') لتسجيل الرسالة في وحدة التحكم. ويُطلق على الرسائل التي يتم تسجيلها من JavaScript مثل هذه اسم رسائل المستخدم. في المقابل، عند النقر على Cause 404، سجّل المتصفّح رسالة على مستوى Error تفيد بتعذُّر العثور على المورد المطلوب. تُعتبر مثل هذه الرسائل رسائل المتصفّح. يمكنك استخدام الشريط الجانبي لفلترة رسائل المتصفّح وعرض رسائل المستخدمين فقط.

1. انقر على 9 رسائل مستخدمين. رسائل المتصفِّح مخفية.

   

2. انقر على 12 رسالة لإظهار جميع الرسائل مرة أخرى.

استخدام وحدة التحكم بجانب أي لوحة أخرى

ماذا لو كنت تعدّل أنماطًا لكنّك تريد التحقّق بسرعة من سجلّ وحدة التحكم بحثًا عن أي تعديل؟ استخدم الدرج.

1. انقر على علامة التبويب العناصر.

2. اضغط على Escape. تفتح علامة التبويب وحدة التحكّم في الدرج. وتحتوي على جميع ميزات وحدة التحكم التي كنت تستخدمها خلال هذا البرنامج التعليمي.

   

الخطوات التالية

تهانينا، لقد أكملت البرنامج التعليمي. انقر على Dispense Trophy لاستلام الجائزة.

• اطلع على مرجع وحدة التحكم لاستكشاف المزيد من الميزات ومهام سير العمل ذات الصلة بواجهة مستخدم وحدة التحكم.
• يمكنك الاطّلاع على مرجع واجهة برمجة التطبيقات لوحدة التحكم للتعرُّف على المزيد من المعلومات حول جميع طرق console التي تم توضيحها في القسم عرض الرسائل التي تم تسجيلها من JavaScript واستكشاف طرق console الأخرى التي لم يتم تناولها في هذا البرنامج التعليمي.
• راجِع البدء لاستكشاف الإجراءات الأخرى التي يمكنك تنفيذها باستخدام "أدوات مطوري البرامج".
• يمكنك الاطّلاع على تنسيق الرسائل ونمطها في وحدة التحكّم لمعرفة المزيد من المعلومات حول جميع أساليب تنسيق وتنسيقات console.