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

Kayce Basques

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

   

   لاحظ أنّ عمود birthday لا تتم تعبئته إلا لصف واحد. تحقَّق من الرمز البرمجي لمعرفة السبب وراء ذلك.

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

   

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

    

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

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

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

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

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

   

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

   

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

   

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

   

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

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

ملاحظة مهمة: لا يفلتر وحدة التحكّم سوى رسائل الإخراج، بينما تبقى جميع الإدخالات التي كتبتها في وحدة التحكّم كما هي.

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

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

ملاحظة: للحصول على قائمة كاملة بطرق console.* ومستويات خطورتها، يمكنك الاطّلاع على مرجع Console API.

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

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

   

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

ملاحظة مهمة: يتذكّر وحدة التحكّم دائمًا فلتر القائمة المنسدلة الذي تطبّقه. ويظل هذا الفلتر ساريًا على جميع الصفحات وعمليات إعادة تحميل الصفحة و"أدوات مطوّري البرامج" وChrome. لتطبيق فلتر مؤقت بسرعة، استخدِم الـ شريط الجانبي.

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

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

1. اكتب Dave في مربّع الفلتر. يتم إخفاء جميع الرسائل التي لا تتضمّن السلسلة النصية Dave.

   

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

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

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

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

   

2. احذف /^[AH]/ من مربّع الفلتر. تظهر جميع الرسائل مرة أخرى.

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

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

ملاحظة مهمة: فلاتر الشريط الجانبي مؤقتة. لا يحتفظ وحدة التحكّم بهذه الفلاتر على جميع الصفحات وعمليات إعادة تحميل الصفحة و"أدوات مطوّري البرامج" وChrome.

1. انقر على عرض الشريط الجانبي لوحدة التحكّم .

   

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

   

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

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

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

   

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

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

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

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

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

   

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

تهانينا، لقد أكملت البرنامج التعليمي. انقر على توزيع الجائزة للحصول عليها.

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