مرجع ميزات وحدة التحكّم

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

إذا كنت تبحث عن مرجع واجهة برمجة التطبيقات حول وظائف مثل console.log()، يمكنك الاطّلاع على مرجع Console API. للحصول على مرجع عن وظائف مثل monitorEvents()، يُرجى الاطّلاع على Console Utilities API مرجع.

فتح وحدة التحكّم

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

فتح لوحة Console

اضغط على Control+Shift+J أو Command+Option+J (على نظام التشغيل Mac).

وحدة التحكّم

لفتح وحدة التحكّم من قائمة الأوامر، ابدأ بكتابة Console ثم شغِّل الأمر Show Console الذي يحمل شارة Panel بجانبه.

الأمر لعرض لوحة Console

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

اضغط على مفتاح Escape أو انقر على تخصيص "أدوات المطوّر" والتحكّم فيها تخصيص أدوات مطوّري البرامج والتحكّم فيها ثم اختَر عرض أدراج وحدة التحكّم.

إظهار درج وحدة التحكّم

ينبثق الدرج في أسفل نافذة "أدوات مطوّري البرامج"، مع فتح علامة التبويب وحدة التحكّم.

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

لفتح علامة التبويب "وحدة التحكّم" من قائمة الأوامر، ابدأ بكتابة Console ثم شغِّل الأمر Show Console الذي يحمل شارة الدرج بجانبه.

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

فتح إعدادات وحدة التحكّم

انقر على الإعدادات. إعدادات وحدة التحكّم في أعلى يسار وحدة التحكّم.

إعدادات وحدة التحكّم

توضّح الروابط أدناه كل إعداد:

انقر على إظهار الشريط الجانبي لوحدة التحكّم إظهار الشريط الجانبي لوحدة التحكّم لعرض الشريحة الجانبية، وهي مفيدة للفلترة.

الشريط الجانبي لوحدة التحكّم

عرض الرسائل

يحتوي هذا القسم على ميزات تغيّر طريقة عرض الرسائل في وحدة التحكّم. اطّلِع على عرض الرسائل للحصول على جولة عملية.

إيقاف ميزة تجميع الرسائل

افتح إعدادات Console وأوقِف الخيار تجميع الرسائل المتشابهة لإيقاف السلوك التلقائي لميزة grouped messages (تجميع الرسائل) في Console. اطّلِع على تسجيل طلبات XHR وFetch للحصول على مثال.

عرض الرسائل من نقاط التوقف

تضع وحدة التحكّم علامة على الرسائل التي يتم تشغيلها من خلال نقاط التوقف بالطريقة التالية:

تضع وحدة التحكّم علامة على الرسائل التي تم إنشاؤها بواسطة نقاط تسجيل ونقاط إيقاف مشروطة.

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

عرض تتبعات بنية تخزين العناصر

تُسجِّل وحدة التحكّم تلقائيًا عمليات تتبُّع تسلسل استدعاء الدوالّ للأخطاء والتحذيرات. تتبع تسلسل استدعاء الدوال هو سجلّ لطلبات استدعاء الدوال (اللقطات) التي أدّت إلى الخطأ أو التحذير. تعرِض وحدة التحكّم اللقطات بالترتيب العكسي: يظهر أحدث لقطة في أعلى الصفحة.

لعرض تتبُّع تسلسل استدعاء الدوال البرمجية، انقر على رمز التوسيع توسيع بجانب خطأ أو تحذير.

تتبُّعات تسلسل استدعاء الدوال البرمجية

عرض أسباب الأخطاء في تتبع تسلسل استدعاء الدوال البرمجية

يمكن أن تعرض لك Console سلاسل من أسباب الخطأ في تتبع تسلسل استدعاء الدوال البرمجية، إن توفّرت.

لتسهيل تصحيح الأخطاء، يمكنك تحديد أسباب الأخطاء عند رصد الأخطاء وإعادة رميها. عندما ينتقل Console إلى أعلى سلسلة الأسباب، يطبع كل حزمة أخطاء مع بادئة Caused by:، ما يتيح لك العثور على الخطأ الأصلي.

سلسلة من أسباب الخطأ مسبوقة بـ "سببه:" في تتبع تسلسل استدعاء الدوال البرمجية

عرض عمليات تتبُّع تسلسل استدعاء الدوال البرمجية غير المتزامنة

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

في هذه الحالة، يعرض تتبُّع تسلسل استدعاء الدوال البرمجية "القصة الكاملة" للعملية غير المتزامنة.

تتبُّع تسلسل استدعاء الدوال البرمجية غير المتزامنة

عرض الإطارات المعروفة التابعة لجهات خارجية في قوائم تتبُّع تسلسل استدعاء الدوال البرمجية

عندما تتضمّن خرائط المصدر الحقل ignoreList، تخفي Console تلقائيًا من قوائم تتبُّع تسلسل استدعاء الدوالّ الإطارات التابعة لجهات خارجية من المصادر التي تم إنشاؤها بواسطة حِزم (مثل webpack) أو إطارات عمل (مثل Angular).

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

عرض عدد N من اللقطات الإضافية

لعرض تتبع تسلسل استدعاء الدوال البرمجية بالكامل في كل الأوقات، أوقِف الإعداد الإعدادات. الإعدادات > قائمة التجاهل > إضافة النصوص البرمجية المعروفة التابعة لجهات خارجية إلى قائمة التجاهل تلقائيًا.

إضافة النصوص البرمجية المعروفة التابعة لجهات خارجية إلى قائمة التجاهل تلقائيًا

تسجيل طلبات XHR والاسترجاع

افتح إعدادات وحدة التحكّم وفعِّل تسجيل طلبات XMLHttpRequest لتسجيل جميع طلبات XMLHttpRequest و Fetch في وحدة التحكّم أثناء حدوثها.

تسجيل طلبات XMLHttpRequest وFetch

تعرض الرسالة في أعلى المثال أعلاه سلوك التجميع التلقائي في Console. يوضّح المثال أدناه شكل السجلّ نفسه بعد إيقاف تجميع الرسائل.

شكل طلبات XMLHttpRequest وFetch المسجّلة بعد إلغاء التجميع

الاحتفاظ بالرسائل في جميع عمليات تحميل الصفحات

يتم تلقائيًا محو السجلّ في Console عند تحميل صفحة جديدة. للحفاظ على الرسائل عند تحميل الصفحات، افتح إعدادات وحدة التحكّم ثم فعِّل مربّع الاختيار الاحتفاظ بالسجلّ.

إخفاء رسائل الشبكة

يسجِّل المتصفّح تلقائيًا رسائل الشبكة في وحدة التحكّم. على سبيل المثال، تمثل الرسالة العلوية في المثال التالي خطأ 404.

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

لإخفاء رسائل الشبكة، اتّبِع الخطوات التالية:

  1. افتح إعدادات وحدة التحكّم.
  2. فعِّل مربّع الاختيار إخفاء الشبكة.

إظهار أخطاء CORS أو إخفاؤها

يمكن أن تعرض Console أخطاء CORS في حال تعذّر إرسال طلبات الشبكة بسبب مشاركة الموارد المتعدّدة المصادر (CORS).

لإظهار أخطاء CORS أو إخفائها:

  1. افتح إعدادات وحدة التحكّم.
  2. ضَع علامة في مربّع الاختيار عرض أخطاء CORS في وحدة التحكّم أو أزِلها.

عرض أخطاء CORS في وحدة التحكّم

إذا تم ضبط وحدة التحكّم لعرض أخطاء CORS وواجهت هذه الأخطاء، يمكنك النقر على الأزرار التالية بجانب الأخطاء:

زرّا "الشبكة" و"المشاكل"

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

هناك العديد من الطرق لفلترة الرسائل في "وحدة تحكّم Google".

فلترة رسائل المتصفّح

افتح الشريط الجانبي لخدمة Console وانقر على رسائل المستخدمين لعرض الرسائل الواردة فقط من ترميز JavaScript الخاص بالصفحة.

عرض رسائل المستخدمين

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

تحدّد أدوات المطوّرين مستويات شدّة معظم طرق console.*.

هناك أربعة مستويات:

  • Verbose
  • Info
  • Warning
  • Error

على سبيل المثال، console.log() في المجموعة Info، في حين أنّ console.error() في المجموعة Error. يوضّح مرجع Console API مستوى خطورة كل طريقة قابلة للتطبيق.

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

انقر على القائمة المنسدلة مستويات السجلّ لتفعيل رسائل Verbose أو Info أو Warning أو Error أو إيقافها.

القائمة المنسدلة "مستويات السجلّ"

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

استخدام الشريط الجانبي لعرض التحذيرات

فلترة الرسائل حسب عنوان URL

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

فلتر عنوان URL

تعمل النطاقات أيضًا. على سبيل المثال، إذا كان https://example.com/a.js و https://example.com/b.js يسجّلان الرسائل، يتيح لك url:https://example.com التركيز على الرسائل الواردة من النصَّين البرمجيين هذين.

لإخفاء جميع الرسائل من عنوان URL محدّد، اكتب -url: متبوعًا بعنوان URL، مثل https://b.wal.co. هذا فلتر عناوين URL سلبي.

فلتر عناوين URL سلبي تخفي "أدوات المطوّر" جميع الرسائل التي تتطابق مع عنوان URL المحدّد.

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

عرض الرسائل من نص برمجي معيّن

فلترة الرسائل من سياقات مختلفة

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

فلترة الرسائل التي لا تتطابق مع نمط تعبير عادي

اكتب تعبيرًا عاديًا مثل /[foo]\s[bar]/ في مربّع نص الفلتر لفلترة أي رسائل لا تتطابق مع هذا النمط. لا يمكن إدخال المسافات، استخدِم \s بدلاً من ذلك. تتحقّق أدوات المطوّرين من توفّر النمط في نص الرسالة أو النص البرمجي الذي أدّى إلى تسجيل الرسالة.

على سبيل المثال، يزيل الفلتر التالي جميع الرسائل التي لا تتطابق مع /[gm][ta][mi]/.

فلترة أي رسائل لا تتطابق مع /[gm][ta][mi]/

للبحث عن نص في رسائل السجلّ:

  1. لفتح شريط بحث مضمّن، اضغط على Command+F (نظام التشغيل Mac) أو Ctrl+F (نظام التشغيل Windows وLinux).
  2. في الشريط، اكتب طلب البحث. في هذا المثال، يكون الطلب هو legacy. كتابة طلب بحث يمكنك اختياريًا إجراء ما يلي:
    • انقر على مطابقة الحالة مطابقة حالة الأحرف لجعل طلب البحث حسّاسًا لحالة الأحرف.
    • انقر على زر التعبير العادي استخدام التعبير العادي للبحث باستخدام تعبير عادي.
  3. اضغط على Enter. للانتقال إلى نتيجة البحث السابقة أو التالية، اضغط على الزر "أعلى" أو "أسفل".

تشغيل JavaScript

يحتوي هذا القسم على ميزات ذات صلة بتشغيل JavaScript في وحدة التحكّم. اطّلِع على تشغيل JavaScript للحصول على جولة عملية.

خيارات نسخ السلسلة

تُخرج وحدة التحكّم سلاسل كقيم ثابتة صالحة لبرنامج JavaScript تلقائيًا. انقر بزر الماوس الأيمن على أحد النتائج واختَر من بين ثلاثة خيارات للنسخ:

  • نسخ القيمة كقيمة ثابتة بتنسيق JavaScript يتخطّى الرموز الخاصة المناسبة ويلفّ السلسلة بين علامتَي اقتباس مفردتَين أو علامتَي اقتباس مزودتَين أو علامتَي اقتباس معكوفتَين، وذلك حسب المحتوى.
  • نسخ محتوى السلسلة تنسخ السلسلة الأولية الدقيقة إلى الحافظة، بما في ذلك الأسطر الجديدة والرموز الخاصة الأخرى.
  • نسخ كقيمة ثابتة بتنسيق JSON تنسيق السلسلة إلى ملف JSON صالح

خيارات النسخ

إعادة تشغيل التعبيرات من السجلّ

اضغط على مفتاح السهم المتّجه للأعلى للتنقّل في سجلّ عبارات JavaScript التي سبق أن نفّذتها في Console. اضغط على Enter لتشغيل هذا التعبير مرة أخرى.

مشاهدة قيمة تعبير في الوقت الفعلي باستخدام ميزة "التعبيرات المباشرة"

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

إيقاف التقييم الفوري

أثناء كتابة تعبيرات JavaScript في وحدة التحكّم، يعرض التقييم الفوري معاينة للقيمة المعروضة عند تنفيذ هذا التعبير. افتح إعدادات وحدة التحكّم وأوقِف مربّع الاختيار التقييم الفوري لإيقاف معاينات القيمة المعروضة.

بدء تفاعل المستخدِم من خلال التقييم

تفعيل المستخدِم هو حالة جلسة التصفّح التي تعتمد على إجراءات المستخدِم. تعني الحالة "نشط" أنّ المستخدِم يتفاعل حاليًا مع الصفحة أو تفاعل منذ تحميل الصفحة.

لبدء تنشيط المستخدمين باستخدام أي تقييم، افتح إعدادات Console و ضَع علامة في المربّع مربّع اختيار التعامل مع تقييم الرمز على أنّه إجراء من جانب المستخدم.

إيقاف ميزة "الإكمال التلقائي من السجلّ"

أثناء كتابة تعبير، تعرض نافذة الإكمال التلقائي المنبثقة في وحدة التحكّم التعبيرات التي نفّذتها في وقت سابق. ويُضاف الحرف > إلى مقدمة هذه التعبيرات. في المثال التالي، قيّمت أدوات المطوّرين document.querySelector('a') وdocument.querySelector('img') في وقت سابق.

نافذة الإكمال التلقائي المنبثقة تعرض عبارات من السجلّ

افتح إعدادات وحدة التحكّم و أوقِف مربّع الاختيار الإكمال التلقائي من السجلّ لتوقّف عن عرض التعبيرات من السجلّ.

اختيار سياق JavaScript

يتم تلقائيًا ضبط القائمة المنسدلة سياق JavaScript على أعلى، ما يمثّل سياق التصفّح للملف الرئيسي.

القائمة المنسدلة &quot;سياق JavaScript&quot;

لنفترض أنّ لديك إعلانًا على صفحتك مضمّنًا في <iframe>. إذا كنت تريد تشغيل JavaScript من أجل تعديل نموذج العناصر في المستند (DOM) للإعلان لإجراء ذلك، عليك أولاً اختيار سياق التصفّح للإعلان من القائمة المنسدلة سياق JavaScript.

اختيار سياق JavaScript مختلف

فحص خصائص العناصر

يمكن أن تعرِض وحدة التحكّم قائمة تفاعلية بسمات كائن JavaScript الذي تحدّده.

لتصفُّح القائمة، اكتب اسم العنصر في وحدة التحكّم واضغط على Enter.

لفحص سمات عناصر DOM، اتّبِع الخطوات الواردة في مقالة عرض سمات عناصر DOM.

رصد المواقع المملوكة والمكتسَبة

تُرتّب وحدة التحكّم سمات العناصر الخاصة أولاً وتُبرزها بخط عريض.

عرض خصائص الكائن

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

عرض السمات المُكتسَبة

تقييم أدوات الوصول المخصّصة

لا تقيِّم "أدوات مطوّري البرامج" تلقائيًا أدوات الوصول التي تنشئها. دالة وصول مخصّصة لتقييم دالة وصول مخصّصة في عنصر، انقر على (...). عنصر الوصول المخصّص الذي تم تقييمه

رصد السمات التي يمكن عدّها وغير القابلة للعدّ

تكون الخصائص التي يمكن إدراجها بلون مشرق. يتم كتم الخصائص غير القابلة للعدّ. السمات التي يمكن عدّها والسمات التي لا يمكن عدّها يمكن تكرار السمات التي يمكن عدّها باستخدام حلقة for … in أو الطريقة Object.keys().

رصد الخصائص الخاصة لمثيلات الفئة

تُحدِّد Console السمات الخاصة لكائنات الصف باستخدام البادئة #.

خاصية خاصة لمثيل صف

يمكن أن تكمل Console أيضًا السمات الخاصة تلقائيًا حتى عند تقييمها خارج نطاق الفئة.

ميزة الإكمال التلقائي للمواقع الخاصة

فحص سمات JavaScript الداخلية

تستعير وحدة التحكّم ترميز ECMAScript، وتضع بعض السمات الداخلية في JavaScript بين قوسَين مربّعَين مزدوجَين. ولا يمكنك التفاعل مع هذه السمات في الرمز البرمجي. ومع ذلك، قد يكون من المفيد فحصها.

قد تظهر لك السمات الداخلية التالية على عناصر مختلفة:

فحص الدوالّ

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

لعرض سمات الدالة الداخلية في JavaScript، استخدِم الأمر console.dir().

فحص خصائص دالة

تتضمّن الدوالّ السمات التالية:

  • [[FunctionLocation]]. رابط إلى السطر الذي يتضمّن تعريف الدالة في ملف مصدر
  • [[Scopes]]. يسرد القيم والتعبيرات التي يمكن للدالة الوصول إليها. لفحص نطاقات الدوالّ أثناء تصحيح الأخطاء، اطّلِع على عرض وتعديل السمات المحلية والغلقات والسمات العامة.
  • تتسم الدوالّ المرتبطة بالسمات التالية:
    • [[TargetFunction]]: استهداف bind()
    • [[BoundThis]]: قيمة this.
    • [[BoundArgs]]. صفيف من وسيطات الدالة دالة محدودة
  • يتم وضع علامة على دوالّ المولد باستخدام السمة [[IsGenerator]]: true. دالة المولد
  • تُعرِض أدوات الإنشاء كائنات مكرّرة، وهي تتضمّن السمات التالية:
    • [[GeneratorLocation]]. رابط إلى سطر يحتوي على تعريف المُنشئ في ملف مصدر
    • [[GeneratorState]]: suspended أو closed أو running.
    • [[GeneratorFunction]]. أداة إنشاء التقارير التي عرضت العنصر.
    • [[GeneratorReceiver]]. عنصر يتلقّى القيمة عنصر الموسّع

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

يمكنك استخدام أيٍّ من عمليات سير العمل التالية لمحو السجلّ في وحدة التحكّم:

  • انقر على محو وحدة التحكّم محو..
  • انقر بزر الماوس الأيمن على رسالة، ثم اختَر محو وحدة التحكّم.
  • اكتب clear() في وحدة التحكّم، ثم اضغط على Enter.
  • يمكنك الاتصال بـ console.clear() من JavaScript في صفحة الويب.
  • اضغط على Control+L عندما يكون التركيز على "وحدة التحكّم".