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

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

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

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

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

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

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

    هذا الدليل التعليمي على اليسار، والعرض التجريبي على اليمين.

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

    تفتح "أدوات مطوّري البرامج" على يسار العرض الترويجي.

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

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

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

عرض الرسائل المسجَّلة من JavaScript

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

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

    وحدة التحكّم بعد النقر على "معلومات السجلّ"

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

    تفتح "أدوات مطوّري البرامج" لوحة "المصادر" بعد النقر على 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 في الصفحة حاول جلب ملف غير موجود.

    خطأ 404 في وحدة التحكّم

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

    خطأ TypeError في وحدة التحكّم

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

    تفعيل مستوى التسجيل المطوَّل

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

    انتهاك في وحدة التحكّم

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

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

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

يتم تحديد مستوى خطورة لكل طريقة 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 للحصول على شرح لما يفعله.

    فلترة أي رسالة لا تتطابق مع النمط ‎/^[AH]/‎

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

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

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

  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.