الميزات الجديدة في أدوات مطوّري البرامج (Chrome 71)

Kayce Basques
Kayce Basques
X GitHub

تشمل الميزات الجديدة والتغييرات الرئيسية التي ستتم إضافتها إلى "أدوات مطوّري البرامج في Chrome" في الإصدار 71 من Chrome ما يلي:

يمكنك مواصلة القراءة أو مشاهدة نسخة الفيديو من هذه الصفحة:

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

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

تمرير مؤشر الماوس فوق نتيجة "التعبير الحي" لتسليط الضوء على العقدة في نافذة العرض

الشكل 1 تمرير مؤشر الماوس فوق نتيجة "التعبير الحي" لتسليط الضوء على العقدة في نافذة العرض

تخزين عُقد DOM كمتغيّرات عامة

لتخزين عقدة DOM كمتغيّر عام، شغِّل عبارة في "وحدة التحكّم" تؤدي إلى تقييم عقدة، ثم انقر بزر الماوس الأيمن على النتيجة، واختَر تخزين كمتغيّر عام.

احفظها كمتغيّر عمومي في "وحدة التحكّم".

الشكل 2 الحفظ كمتغير عمومي في "وحدة التحكّم"

أو انقر بزر الماوس الأيمن على العقدة في شجرة نموذج المستند (DOM) واختَر تخزين كمتغيّر عام.

الحفظ كمتغير عمومي في "شجرة نموذج العناصر في المستند"

الشكل 3 الحفظ كمتغير عمومي في "شجرة نموذج العناصر في المستند"

تتوفّر الآن معلومات حول الجهة المنشِئة والأولوية في عمليات استيراد وتصدير ملفات HAR

إذا أردت تشخيص سجلّات الشبكة مع الزملاء، يمكنك تصدير طلبات الشبكة إلى ملف HAR.

تصدير طلبات الشبكة إلى ملف HAR

الشكل 8 تصدير طلبات الشبكة إلى ملف HAR

لاستيراد الملف مرة أخرى إلى "لوحة الشبكة"، ما عليك سوى سحبه وإفلاته.

عند تصدير ملف HAR، تتضمّن "أدوات مطوّري البرامج" الآن معلومات حول الجهة المنشِئة والأولوية في ملف HAR. عند إعادة استيراد ملفات HAR إلى "أدوات مطوّري البرامج"، تتم الآن تعبئة العمودَين المصدر والأولوية.

يوفّر الحقل _initiator المزيد من السياق حول سبب طلب المورد. ويتم ربط هذا العمود بعمود المُنشئ في جدول "الطلبات".

عمود "بادئ التشغيل"

الشكل 9 عمود "المُنشئ"

يمكنك أيضًا الضغط مع الاستمرار على مفتاح Shift وتمرير مؤشر الماوس فوق طلب لعرض الجهة التي أرسلته والتبعيات.

عرض الجهات التي بدأت عمليات التثبيت والتبعيات

الشكل 10 عرض الجهات التي بدأت عمليات التتبُّع والتبعيات

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

عمود "الأولوية"

الشكل 11 عمود "الأولوية"

انقر بزر الماوس الأيمن على عنوان جدول "الطلبات" واختَر الأولوية لعرض عمود الأولوية.

كيفية عرض عمود "الأولوية"

الشكل 12 كيفية عرض عمود الأولوية

الوصول إلى "قائمة الأوامر" من "القائمة الرئيسية"

استخدِم قائمة الأوامر للوصول بسرعة إلى لوحات وألسنة وميزات "أدوات مطوّري البرامج".

قائمة الأوامر

الشكل 13 قائمة الأوامر

يمكنك الآن فتح "قائمة الأوامر" من "القائمة الرئيسية". انقر على زر القائمة الرئيسية المحتوى الرئيسي واختَر تنفيذ الأمر.

فتح "قائمة الأوامر" من "القائمة الرئيسية"

الشكل 14 فتح "قائمة الأوامر" من "القائمة الرئيسية"

نقاط الإيقاف في وضع "نافذة ضمن النافذة"

Picture-in-Picture هي واجهة برمجة تطبيقات تجريبية جديدة تتيح للصفحة إنشاء نافذة فيديو عائمة فوق سطح المكتب.

فعِّل مربّعات الاختيار enterpictureinpicture وleavepictureinpicture وresize في لوحة "نقاط الإيقاف لأداة معالجة الحدث" لإيقاف التنفيذ مؤقتًا عند تشغيل أحد أحداث "نافذة ضمن النافذة". تتوقف "أدوات مطوّري البرامج" مؤقتًا عند السطر الأول من المعالج.

أحداث "نافذة ضمن النافذة" في لوحة "النقاط الفاصلة لأداة معالجة الحدث"

الشكل 16 أحداث "نافذة ضمن النافذة" في لوحة "النقاط الفاصلة لأداة معالجة الحدث"

(نصيحة إضافية) شغِّل monitorEvents() في "وحدة التحكّم" لمشاهدة الأحداث التي يتم تشغيلها في أحد العناصر

لنفترض أنّك تريد إضافة إطار أحمر حول زر بعد التركيز عليه والضغط على R أو E أو D، ولكنّك لا تعرف الأحداث التي يجب إضافة أدوات معالجة لها. استخدِم monitorEvents() لتسجيل جميع أحداث العنصر في "وحدة التحكّم".

  1. الحصول على مرجع للعقدة

    استخدام "الحفظ كمتغير عمومي" للحصول على مرجع للعقدة

    الشكل 17 استخدام الحفظ كمتغير عمومي للحصول على مرجع للعقدة

  2. مرِّر العقدة كمعلَمة أولى إلى monitorEvents().

    تمرير العقدة إلى الدالة monitorEvents()

    الشكل 18 تمرير العقدة إلى monitorEvents()

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

    أحداث العُقدة في Console

    الشكل 19 أحداث العُقدة في "وحدة التحكّم"

استخدِم الدالة unmonitorEvents() لإيقاف تسجيل الأحداث في "وحدة التحكّم".

unmonitorEvents(temp1);

مرِّر مصفوفة كمعلَمة ثانية إلى monitorEvents() إذا كنت تريد مراقبة أحداث أو أنواع أحداث معيّنة فقط:

monitorEvents(temp1, ['mouse', 'focus']);

يطلب النوع mouse من "أدوات مطوّري البرامج" تسجيل جميع الأحداث المتعلّقة بالماوس، مثل mousedown وclick. تشمل الأنواع الأخرى المتوافقة key وtouch وcontrol.

راجِع مرجع سطر الأوامر للتعرّف على وظائف مفيدة أخرى يمكنك استدعاؤها من "وحدة التحكّم".

تنزيل قنوات المعاينة

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

التواصل مع فريق Chrome DevTools

استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر متعلّق بـ "أدوات مطوّري البرامج".

الميزات الجديدة في "أدوات مطوّري البرامج"

قائمة بكل ما تم تناوله في سلسلة الميزات الجديدة في "أدوات مطوّري البرامج"