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

Kayce Basques

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

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

نسخة فيديو من ملاحظات الإصدار هذه

عرض مقاييس الأداء بشكل مرئي

بعد تسجيل عملية تحميل صفحة، تضع "أدوات مطوّري البرامج" الآن علامة على مقاييس الأداء، مثل DOMContentLoaded وسرعة عرض أول محتوى ذي صلة، في قسم التوقيتات.

الشكل 1 مقياس "سرعة عرض أوّل محتوى مفيد على الصفحة" في قسم "التوقيت"

تمييز عُقد النص

عند تمرير مؤشر الماوس فوق عقدة نصية في "شجرة DOM"، تعمل "أدوات مطوّري Chrome" الآن على تمييز عقدة النص هذه في إطار العرض.

الشكل 2 تمييز عقدة نصية

نسخ مسار JavaScript

لنفترض أنّك تكتب اختبارًا آليًا يتضمّن النقر على عقدة (باستخدام الدالة page.click() في Puppeteer، على سبيل المثال) وتريد الحصول بسرعة على مرجع إلى عقدة DOM هذه. تتمثل سير العمل المعتاد في الانتقال إلى لوحة "العناصر"، والنقر بزر الماوس الأيمن على العقدة في "شجرة نموذج المستند"، واختيار نسخ > نسخ أداة الاختيار، ثم تمرير أداة اختيار CSS إلى document.querySelector(). ولكن إذا كان العنصر في Shadow DOM، لن ينجح هذا الأسلوب لأنّ أداة الاختيار ستعرض مسارًا من داخل شجرة Shadow.

للحصول بسرعة على مرجع لعقدة DOM، انقر بزر الماوس الأيمن على عقدة DOM واختَر نسخ > نسخ مسار JS. تنسخ "أدوات مطوّلي البرامج" إلى الحافظة document.querySelector() تعبيرًا يشير إلى العقدة. كما ذكرنا أعلاه، يكون هذا الإجراء مفيدًا بشكل خاص عند العمل مع Shadow DOM، ولكن يمكنك استخدامه مع أي عقدة DOM.

الشكل 3 نسخ مسار JavaScript

تنسخ "أدوات مطوّري البرامج" عبارة مثل العبارة أدناه إلى الحافظة:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

تعديلات على لوحة "عمليات التدقيق"

تعمل لوحة "عمليات التدقيق" الآن باستخدام الإصدار 3.2 من Lighthouse. يتضمّن الإصدار 3.2 عملية تدقيق جديدة باسم مكتبات JavaScript التي تم رصدها. تعرض عملية التدقيق هذه قائمة بمكتبات JavaScript التي رصدها Lighthouse على الصفحة. يمكنك العثور على عملية التدقيق هذه في تقريرك ضمن أفضل الممارسات > عمليات التدقيق التي تم اجتيازها.

الشكل 4 مكتبات JavaScript التي تم رصدها

يمكنك أيضًا الآن الوصول إلى لوحة "عمليات التدقيق" من "قائمة الأوامر" عن طريق كتابة Lighthouse أو PWA.

الشكل 5 كتابة lighthouse في "قائمة الأوامر"

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

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

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

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

• يمكنك إرسال الملاحظات وطلبات الميزات إلينا على crbug.com.
• يمكنك الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" باستخدام more_vert المزيد من الخيارات > مساعدة > الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" في "أدوات مطوّري البرامج".
• يمكنك نشر تغريدة على ‎@ChromeDevTools.
• يمكنك إضافة تعليقات على فيديوهات "الميزات الجديدة في أدوات مطوّري البرامج" على YouTube أو فيديوهات "نصائح حول أدوات مطوّري البرامج" على YouTube.

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

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