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

Kayce Basques

إتاحة العمل على حسابات متعددة في لوحة "عمليات التدقيق"

يمكنك الآن استخدام لوحة عمليات التدقيق مع ميزات أخرى في DevTools، مثل حظر الطلبات وعمليات الاستبدال المحلية.

على سبيل المثال، لنفترض أنّ تقرير لوحة عمليات التدقيق يشير إلى أنّ نتيجة أداء صفحتك هي 70 وإحدى أكبر فرص التحسين في الأداء هي التخلص من الموارد التي تمنع العرض.

نتيجة الأداء الأولية هي 70.

الشكل 1. نتيجة الأداء الأولية.

يشير التقرير الأولي إلى أنّ هناك 3 نصوص برمجية تمنع العرض، ما يشكّل مشكلة.

الشكل 2. يشير التقرير الأولي إلى أنّ هناك 3 نصوص برمجية تمنع العرض، ما يشكّل مشكلة.

بما أنّه يمكن الآن استخدام لوحة عمليات التدقيق مع حظر الطلبات، يمكنك سريعًا قياس مدى تأثير البرامج النصية التي تحظر العرض في أداء التحميل من خلال حظر طلبات البرامج النصية التي تحظر العرض أولاً:

استخدام علامة التبويب "حظر الطلبات" لحظر النصوص البرمجية التي تتسبب في حدوث مشاكل

الشكل 3. استخدام علامة التبويب حظر الطلبات لحظر النصوص البرمجية التي تتسبب في حدوث مشاكل

بعد ذلك، يمكنك مراجعة الصفحة مرة أخرى:

تحسّنت نتيجة الأداء إلى 97 بعد تفعيل ميزة حظر الطلبات.

الشكل 4. تحسّنت نتيجة الأداء إلى 97 بعد حظر النصوص البرمجية التي تتضمّن مشاكل.

يمكنك بدلاً من ذلك استخدام عمليات الاستبدال المحلية لإضافة سمات async إلى كل علامة من علامات script ، ولكن "سنترك ذلك كتمرين للقارئ". انتقِل إلى الإصدار التجريبي المخصّص للعملاء المتعدّدين لتجربة هذه الميزة. يمكنك أيضًا الاطّلاع على هذه التغريدة لمشاهدة فيديو توضيحي.

المشكلة 991906 في Chromium

تصحيح أخطاء معالج الدفع

يتيح الآن قسم الخدمات التي تعمل في الخلفية في لوحة التطبيق أحداث معالج الدفعات.

  1. انتقِل إلى لوحة التطبيق.
  2. افتح لوحة معالج الدفع.

  3. انقر على تسجيل. تسجِّل أدوات مطوّري البرامج أحداث معالج الدفع لمدة 3 أيام، حتى عند إغلاق أدوات المطوّرين.

    تسجيل أحداث معالج الدفعات

    الشكل 5. تسجيل أحداث معالج الدفعات

  4. فعِّل عرض الأحداث من نطاقات أخرى إذا كانت أحداث معالج الدفع تحدث على مصدر مختلف.

  5. بعد بدء حدث معالج الدفع، انقر على صف الحدث للاطّلاع على مزيد من المعلومات عنه.

    عرض حدث معالج دفع

    الشكل 6 عرض حدث معالج دفع

المشكلة 980291 في Chromium

الإصدار 5.2 من Lighthouse في لوحة "عمليات التدقيق"

تعمل لوحة عمليات التدقيق الآن باستخدام Lighthouse 5.2. تُعلمك عملية فحص استخدام الجهات الخارجية التشخيصي الجديد بعدد الرموز البرمجية التابعة لجهات خارجية التي تمّ طلبها ومدة حظر الرمز البرمجي التابع لجهة خارجية لسلسلة المحادثات الرئيسية أثناء تحميل الصفحة. اطّلِع على مقالة تحسين الموارد التابعة لجهات خارجية للتعرّف على مزيد من المعلومات حول كيفية تأثير الرمز البرمجي التابع لجهة خارجية في أداء التحميل.

لقطة شاشة لتدقيق "الاستخدام من جهة خارجية" في واجهة مستخدم تقرير Lighthouse

الشكل 7 تدقيق استخدام الجهات الخارجية

الخطأ رقم 772558 في Chromium

سرعة عرض أكبر محتوى مرئي في لوحة "الأداء"

عند تحليل أداء التحميل في لوحة الأداء، أصبح قسم المواعيد يحتوي الآن على علامة لسرعة عرض أكبر محتوى مرئي (LCP). يشير مقياس LCP إلى الوقت الذي يستغرقه ظهور أكبر عنصر محتوى مرئي في إطار العرض.

علامة LCP في قسم "المُدد الزمنية"

الشكل 8. علامة LCP في قسم المواقيت

لإبراز عقدة DOM المرتبطة بـ LCP:

  1. انقر على علامة LCP في قسم المواقيت.

  2. مرِّر مؤشر الماوس فوق العقدة ذات الصلة في علامة التبويب ملخّص لتمييز العقدة في مساحة العرض.

    قسم "العقدة ذات الصلة" في علامة التبويب "الملخّص"

    الشكل 9 قسم العقدة ذات الصلة في علامة التبويب الملخّص

  3. انقر على العقدة ذات الصلة لاختيارها في شجرة DOM.

الإبلاغ عن مشاكل "أدوات مطوّري البرامج" من القائمة الرئيسية

إذا واجهت خللًا في "أدوات مطوّري البرامج" وأردت الإبلاغ عن مشكلة، أو إذا كانت لديك فكرة عن كيفية تحسين "أدوات مطوّري البرامج" وأردت طلب ميزة جديدة، انتقِل إلى القائمة الرئيسية > المساعدة > الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" لإنشاء مشكلة في أداة تتبُّع فريق المهندسين في "أدوات مطوّري البرامج". إنّ تقديم مثال بسيط يمكن إعادة إنتاجه على Glitch يزيد بشكل كبير من قدرة الفريق على حلّ الخطأ أو تنفيذ طلب الميزة.

مساعدة > الإبلاغ عن مشكلة في "أدوات مطوّري البرامج"." width="800" height="604">

الشكل 10. القائمة الرئيسية > المساعدة > الإبلاغ عن مشكلة في "أدوات مطوّري البرامج"

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

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

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

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

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

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