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

كايس باسك

Twitter GitHub تأثير اهتزاز

صوفيا إميليانوفا

GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

عرض الرسائل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Open Console Settings (إعدادات وحدة التحكم).
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: تعرض "أدوات مطوري البرامج" جميع عناوين 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') سابقًا.

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

اختيار سياق JavaScript

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

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

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

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

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

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

المواقع الإلكترونية المملوكة والمكتسَبة

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

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

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

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

تحديد الخصائص القابلة للتعداد وغير القابلة للتعداد

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

التعرّف على الخصائص الخاصة لمثيلات الفئة

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

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

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

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

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

• يتضمّن أيّ عنصر السمة [[Prototype]].
• تتضمن برامج تضمين المجموعة الأولية السمة [[PrimitiveValue]].
• يحتوي كائنات ArrayBuffer على السمات التالية:
  • [[Int8Array]] و[[Uint8Array]] و[[Int16Array]] و[[Int32Array]]
  • [[ArrayBufferByteLength]]، [[ArrayBufferData]]
    نقطة رئيسية: لفحص مصفوفة JavaScript في ArrayBuffer التي يشير إليها أحد عناصر العرض، انقر على الزر .
• بالإضافة إلى السمات الخاصة بـ 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 Console .
• انقر بزر الماوس الأيمن على رسالة، ثم اختَر محو وحدة التحكم.
• اكتب clear() في وحدة التحكم، ثم اضغط على Enter.
• يمكنك الاتصال بـ "console.clear()" من خلال JavaScript لصفحة الويب الخاصة بك.
• اضغط على Control+L عندما تكون وحدة التحكّم محل التركيز.