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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

عرض الرسائل

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

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

افتح إعدادات وحدة التحكّم وأوقِف تجميع الرسائل المتشابهة لإيقاف سلوك التجميع التلقائي للرسائل في وحدة التحكّم. يمكنك الاطّلاع على تسجيل طلبات XHR وFetch للحصول على مثال.

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

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

• console.* عمليات استدعاء في نقاط الإيقاف المشروطة مع علامة استفهام برتقالية ?
• رسائل Logpoint التي تتضمّن نقطتَين ورديتَين ..

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تتم تلقائيًا محو بيانات "وحدة التحكّم" عند تحميل صفحة جديدة. لإبقاء الرسائل ظاهرة عند إعادة تحميل الصفحة، افتح إعدادات وحدة التحكّم ثم ضَع علامة في المربّع الاحتفاظ بالسجلّ.

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

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

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

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

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

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

لعرض أخطاء CORS أو إخفائها، اتّبِع الخطوات التالية:

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

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

• انقر على لفتح الطلب الذي يتضمّن TypeError متعلقًا بمشاركة الموارد من مصادر متعددة (CORS) في لوحة الشبكة.
• للحصول على حلّ محتمل في علامة التبويب المشاكل.

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

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

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

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

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

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

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

• Verbose
• Info
• Warning
• Error

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

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

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

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

فلترة الرسائل حسب عنوان 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. يمكنك اختياريًا إجراء ما يلي:
   • انقر على مطابقة حالة الأحرف لجعل طلب البحث حساسًا لحالة الأحرف.
   • انقر على استخدام التعبير العادي للبحث باستخدام تعبير RegEx.
3. اضغط على Enter. للانتقال إلى نتيجة البحث السابقة أو التالية، اضغط على الزر المتّجه للأعلى أو للأسفل.

تشغيل JavaScript

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

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

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

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

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

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

لمحو سجلّ وحدة التحكّم، انقر بزر الماوس الأيمن على مساحة فارغة في وحدة التحكّم واختَر محو سجلّ وحدة التحكّم من قائمة السياق.

محو الرسائل ونسخها وتوسيعها وتصغيرها وحفظها

لمحو نافذة وحدة التحكّم، نفِّذ أحد الإجراءات التالية:

• انقر على حظر محو وحدة التحكّم في شريط الإجراءات في أعلى الصفحة.
• اضغط على Ctrl+L أو Cmd+K.
• انقر بزر الماوس الأيمن على مساحة فارغة في وحدة التحكّم واختَر محو وحدة التحكّم من قائمة السياق.

لتوسيع جميع الرسائل أو تصغيرها، انقر على توسيع توسيع الكل أو تصغير تصغير الكل في شريط الإجراءات في أعلى الصفحة.

من قائمة السياق، يمكنك أيضًا إجراء ما يلي:

• نسخ وحدة التحكّم: لنسخ جميع الرسائل الحالية إلى الحافظة، ولكن ليس سجلّ الأوامر السابقة
• حفظ باسم...: احفظ جميع الرسائل الحالية في ملف .log نصي عادي.

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

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

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

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

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

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

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

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

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

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

اختيار سياق JavaScript

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

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

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

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

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

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

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

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

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

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

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

التعرّف على السمات القابلة للتعداد وغير القابلة للتعداد

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

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

تحدّد وحدة التحكّم السمات الخاصة لمثيلات الفئات باستخدام البادئة #.

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

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

باستخدام صيغة ECMAScript، يضمّ الكائن Console بعض السمات الداخلية في 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 عندما تكون "وحدة التحكّم" محل التركيز.