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

Kayce Basques

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

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

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

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

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

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

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

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

تمييز عقدة نصية

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

نسخ مسار JavaScript

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

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

نسخ مسار JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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