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

Kayce Basques

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

اطّلِع على المزيد من المعلومات أو شاهِد نسخة الفيديو من هذه الصفحة:

تمرير مؤشر الماوس فوق تعبير مباشر لتمييز عقدة نموذج عناصر في المستند

عندما يتم تقييم تعبير مباشر على أنّه عقدة DOM، مرِّر مؤشر الماوس فوق نتيجة التعبير المباشر ل تمييز هذه العقدة في مساحة العرض.

تمرير مؤشر الماوس فوق نتيجة تعبير مباشر لتمييز العقدة في مساحة العرض

الشكل 1: تمرير مؤشر الماوس فوق نتيجة تعبير مباشر لتمييز العقدة في مساحة العرض

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

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

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

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

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

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

الشكل 3 الحفظ كمتغيّر عمومي في شجرة نموذج DOM

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

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

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

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

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

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

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

عمود المشغِّل

الشكل 9 عمود "الحدث البادئ"

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

عرض المشغّلات والتبعيات

الشكل 10 عرض المشغّلات والتبعيات

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  2. نقْل العقدة كوسيطة أولى إلى monitorEvents().

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

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

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

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

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

اتصل بالرقم unmonitorEvents() لإيقاف تسجيل الأحداث في وحدة التحكّم.

unmonitorEvents(temp1);

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

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

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

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

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

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

التواصل مع فريق "أدوات مطوّري البرامج في Chrome"

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

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

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