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

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. يتم فتح لوحة المصادر ويتم تمييز سطر الرمز الذي تسبّب في تسجيل الرسالة في "وحدة التحكّم".

    تفتح "أدوات مطوري البرامج" لوحة "المصادر" بعد النقر على 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 لعرض الرمز الذي تسبّب في تنسيق الرسالة على هذا النحو، ثم انتقِل مرة أخرى إلى Console عند الانتهاء. افعل ذلك عندما تريد رؤية التعليمة البرمجية التي تسببت في تسجيل رسالة بطريقة معينة.

  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. انقر على جدول السجلّات. يتم تسجيل جدول حول الفنانين المشهورين في Console.

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

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

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

    مجموعة من الرسائل في Console

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

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

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

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

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

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

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

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

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

    A TypeError في وحدة التحكم.

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

    تمكين مستوى السجل المطوَّل.

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

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

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

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

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

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

    الاطّلاع على مصدر الرسائل في الشريط الجانبي

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

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

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

    استبعاد رسائل المتصفّح

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

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

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

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

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

    علامة التبويب **وحدة التحكّم** في الدرج

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

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