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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

نسخ مسار JavaScript

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

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

نسخ مسار JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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