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

Kayce Basques

Sofia Emelianova

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

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

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

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

فتح لوحة Console

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

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

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

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

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

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

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

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

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

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

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

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

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

عرض الرسائل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ملاحظة مهمة: تُنفِّذ أدوات المطوّرين ميزة "وضع علامات على تسلسل استدعاء الدوال البرمجية غير المتزامنة" استنادًا إلى طريقة console.createTask() API. وتشجع أدوات المطوّرين على استخدام واجهة برمجة التطبيقات هذه في أطر العمل والعناصر المجردة. على سبيل المثال، تتيح Angular هذه الميزة.

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

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

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

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

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

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

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

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

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

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

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

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

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

إظهار أخطاء سياسة مشاركة الموارد المتعددة المصادر (CORS) أو إخفاؤها

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

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

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

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

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

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

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

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

افتح الشريط الجانبي لخدمة Console وانقر على رسائل المستخدمين لعرض الرسائل الواردة فقط من ترميز 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 و ضَع علامة في المربّع التعامل مع تقييم الرمز على أنّه إجراء من جانب المستخدم.

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

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

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

اختيار سياق JavaScript

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

افترض أنّ لديك إعلانًا على صفحتك مضمّنًا في <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 في JavaScript الذي يشير إليه كائن العرض، انقر على الزر .
• بالإضافة إلى السمات الخاصة بـ 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 عندما تكون وحدة التحكّم محل التركيز.