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

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

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

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

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

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

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

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

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

اضغط على Escape أو انقر على Customize And Control DevTools ، ثم اختَر إظهار درج وحدة التحكّم.

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

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

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

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

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

• إخفاء الشبكة
• حفظ السجلّ
• السياق المحدّد فقط
• تجميع الرسائل المشابهة في وحدة التحكّم
• عرض أخطاء CORS في وحدة التحكّم
• تسجيل طلبات XMLHttpRequests
• التقييم السريع
• الإكمال التلقائي من السجلّ

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

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

عرض الرسائل

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

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

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

عرض الرسائل من نقاط الإيقاف

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

• console.* من المكالمات في نقاط توقف مشروطة مع علامة استفهام برتقالية ?
• رسائل نقطة تسجيل ذات نقطتَين ورديتَين ..

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

افتح "إعدادات وحدة التحكم" وفعِّل خيار تسجيل XMLHttpRequests لتسجيل جميع طلبات XMLHttpRequest وFetch إلى وحدة التحكم عند حدوثها.

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

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

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

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

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

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

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

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

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

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

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

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

• لفتح الطلب باستخدام TypeError مرتبط بسياسة CORS في لوحة الشبكة
• للاطّلاع على حلّ محتمَل في علامة التبويب المشاكل.

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

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

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

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

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

يضبط قسم "أدوات مطوري البرامج" معظم console.* طريقة لمستويات الخطورة.

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

• Verbose
• Info
• Warning
• Error

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

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

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

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

فلترة الرسائل حسب عنوان 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 للنص البرمجي الذي يحتوي على الرسائل التي تريد التركيز عليها.

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

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

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

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

على سبيل المثال، يؤدي ما يلي إلى فلترة جميع الرسائل غير المطابقة لـ /[gm][ta][mi]/.

البحث عن نص في السجلّات

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

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

تشغيل JavaScript

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

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

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

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

إعادة تنفيذ التعبيرات من السجلّ

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

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

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

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

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

تشغيل تفاعل المستخدِم من خلال التقييم

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

لتفعيل عمليات تفعيل المستخدمين من خلال أي تقييم، افتح إعدادات Console وضَع علامة في المربّع تقييم عمليات تفعيل المستخدمين.

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

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

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

اختيار سياق JavaScript

بشكل تلقائي، يتم ضبط القائمة المنسدلة سياق JavaScript على top، والتي تمثل سياق تصفح المستند الرئيسي.

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

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

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

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

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

المواقع الخاصة بالإعلانات والمحتوى المكتسَبة

تعمل وحدة التحكّم على ترتيب خصائص الكائن أولاً وتمييزها بخط غامق.

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

تقييم الموصّلات المخصَّصة

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

التعرّف على الخصائص القابلة للتعداد وغير القابلة للعد

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

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

تحدِّد Console الخصائص الخاصة لمثيلات الفئة ببادئة #.

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

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

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

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

• يتضمّن أي كائن [[Prototype]].
• برامج تضمين المجموعة الأساسية تتضمّن السمة [[PrimitiveValue]].
• كائنات ArrayBuffer لها السمات التالية:
  • [[Int8Array]] و[[Uint8Array]] و[[Int16Array]] و[[Int32Array]]
  • [[ArrayBufferByteLength]]، [[ArrayBufferData]]
• بالإضافة إلى السمات الخاصة بـ ArrayBuffer، تحتوي كائنات WebAssembly.Memory على السمة [[WebAssemblyMemory]].
• تتضمّن المجموعات الرئيسية (الخرائط والمجموعات) السمة [[Entries]] التي تحتوي على الإدخالات المرتبطة بمفاتيحها.
• كائنات Promise لها السمات التالية:
  • [[PromiseState]]: في انتظار المراجعة أو تم توصيلها أو مرفوضة
  • [[PromiseResult]]: undefined في حالة الانتظار، و<value> في حال تنفيذ الطلب، و<reason> في حال الرفض
• كائنات Proxy تحتوي على السمات التالية: كائن [[Handler]] وكائن [[Target]] و[[isRevoked]] (تم إيقاف التشغيل أو لا).

فحص الدوال

في 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 عندما تكون وحدة التحكّم محل التركيز.