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

Kayce Basques

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

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

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

بعد تسجيل تحميل صفحة، تضع "أدوات مطوري البرامج" الآن علامة على مقاييس الأداء، مثل DOMContentLoaded وسرعة عرض أوّل مغزى (First Meaningful Paint) في قسم التوقيتات.

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

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

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

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

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

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

نسخ مسار JavaScript

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

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

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

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

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

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

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

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

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

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