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

Kayce Basques

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

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

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

عرض مقاييس الأداء

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

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

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

عند تمرير مؤشر الماوس فوق عقدة نصية في شجرة نموذج العناصر في المستند، تُميِّز أدوات مطوّري البرامج الآن تلك العقدة النصية في إطار العرض.

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

نسخ مسار JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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