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

Kayce Basques

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

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

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

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

1. افتح الإصدار التجريبي.

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

   

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

   

4. اختياري: أرِس DevTools في أسفل النافذة أو أزِل تثبيته في نافذة منفصلة.

   أدوات مطوّري البرامج مُرسَخة في أسفل العرض التوضيحي:

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

عرض الرسائل المسجَّلة من 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. انقر على Log Custom (تسجيل مخصّص). يتم تسجيل رسالة ذات حدود حمراء وخلفية زرقاء في وحدة التحكّم.

    

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

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

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

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

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

   

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

   

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

   

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

   

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

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

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

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

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

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

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

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

   

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

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

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

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

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

   

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 رسالة لعرض جميع الرسائل مرة أخرى.

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

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

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

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

   

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

تهانينا، لقد أكملت البرنامج التعليمي. انقر على منح الكأس لتلقّي الكأس.

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