الميزات الجديدة في "أدوات مطوّري البرامج" في الإصدار 136 من Chrome

Sofia Emelianova
Sofia Emelianova
GitHub

تحسينات على "لوحة الأداء"

يتضمّن هذا الإصدار عددًا من التحسينات على لوحة الأداء.

إحصاءات أداء جديدة

تتضمّن علامة التبويب الأداء > الإحصاءات إحصاءات جديدة:

  • بروتوكول HTTP الحديث الذي يسلّط الضوء على الطلبات التي تستخدم بروتوكول HTTP/1.1 القديم
  • استخدام فترات التخزين المؤقت الفعّالة التي تسلّط الضوء على الطلبات التي يمكن أن تستفيد من فترات التخزين المؤقت الأطول وتزيد من سرعة تحميل موقعك الإلكتروني
  • عرض الخط الذي يعرض لك الوقت المقدَّر الذي ستوفّره في حال تحسين font-display

ثلاث إحصاءات جديدة في علامة التبويب "الإحصاءات"

النقر لتحديد النص

يمكنك الآن النقر على العناصر في جداول الملخّص ومن الأسفل إلى الأعلى وشجرة طلبات التنفيذ وسجلّ الأحداث لإبقاء الأحداث ذات الصلة مميّزة في التتبُّع وتعتيم الباقي أثناء تصفّح تتبُّع الأداء.

توقيتات الخادم في "ملخّص طلبات الشبكة"

تعرض علامة التبويب الملخّص في لوحة الأداء الآن توقيتات الخادم لطلبات الشبكة التي تستخدم تكنولوجيات العرض من جهة الخادم.

جدول "أوقات الخادم" في "ملخّص طلب الشبكة"

تستخدِم لوحة الأداء البيانات من عنوان Server-Timing الردّ.

فلترة ملفات تعريف الارتباط في "الخصوصية والأمان"

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

الفلتر في جدول "ملفات تعريف الارتباط التابعة لجهات خارجية"

الأحجام بوحدة كيلوبايت في الجداول على مستوى اللوحات

لإبقاء الوحدات متطابقة ضمن السياق نفسه، تعرض الجداول في لوحتَي الشبكة والذاكرة وجدول الطرف الأول / الطرف الثالث في الأداء > الملخّص الآن جميع الأحجام بالكيلوبايت. يتيح لك ذلك مقارنة الأرقام مباشرةً في العمود نفسه وعبر اللوحات بدلاً من مراقبة وحدات الميغابايت مقابل الكيلوبايت مقابل البايت.

القيم قبل وبعد توحيد وحدات الحجم.

تتيح ميزة الإكمال التلقائي استخدام corner-shape وcorner-*-shape في "العناصر" > "الأنماط"

يمكن الآن لميزة الإكمال التلقائي في العناصر > الأنماط اقتراح القيم المناسبة للسمتَين corner-shape وcorner-*-shape.

خيارات الإكمال التلقائي للسمة "corner-shape"

مشكلة في Chromium: 402346406

تجريبية: تمييز المشاكل المتعلّقة بالعناصر والسمات في نموذج المستند (DOM)

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

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

تُبرز لوحة العناصر حاليًا العناصر الفرعية غير الصالحة من <select> وتعريفات ARIA غير المتطابقة وسمات ARIA غير الصالحة.

مشكلة في Chromium: 378738916.

‫Lighthouse 12.5.0

تعمل لوحة Lighthouse الآن بالإصدار 12.5.0 من Lighthouse.

أهم ما يميّز هذا الإصدار هو أنّ legacy-javascript يستخدم الآن Baseline بدلاً من esmodules. الاطّلاع على قائمة التغييرات الكاملة

للتعرّف على أساسيات استخدام لوحة Lighthouse في "أدوات مطوّري البرامج"، يمكنك الاطّلاع على Lighthouse: تحسين سرعة الموقع الإلكتروني.

مشكلة في Chromium: 40543651.

لمحات متنوّعة

في ما يلي بعض الإصلاحات والتحسينات الجديرة بالذكر في هذا الإصدار:

  • الأداء > الإحصاءات > شجرة التبعية للشبكة: تعرض الآن وقت جميع طلبات الشبكة في شجرة الشبكة (400708304).
    • شجرة اعتمادية الشبكة: تعرض الآن الوقت المستغرَق في جميع طلبات الشبكة في شجرة الشبكة (400708304).
  • الصور المتحركة: تم إصلاح خطأ كان يتسبّب في ظهور العناصر المنفصلة في لوحة الذاكرة بسبب الصور المتحركة التي تم التقاطها 400635410.
  • المسجّل: يستخدم الآن مربّع حوار التأكيد نفسه المستخدَم عند لصق الرمز عند تشغيل التسجيل للمرة الأولى.
  • الطبقات: يعرض الآن إجمالي عدد الطبقات وإجمالي الذاكرة لجميع الطبقات المرئية في شريط الحالة في أسفل الشاشة.
  • الذاكرة: تم تحسين عملية تهيئة لقطة الذاكرة المجمّعة من خلال تنفيذ المهام بالتوازي بين عاملَين بدلاً من استخدام عامل واحد (42203857).
  • المشاكل: يتم الآن الإبلاغ عن أخطاء مشاركة الموارد المتعدّدة المصادر (CORS) المتعلّقة بإذن الوصول إلى الشبكة المحلية (LNA) (395895368).
  • إمكانية الوصول:
    • التلميحات: تظهر الآن عند الضغط على مفتاح الاختصار بدلاً من التركيز (396311936).
    • العناصر > الأنماط: يمكن الآن التفاعل مع الوظيفة var() باستخدام لوحة المفاتيح، ما يعني أنّه يمكنك اختيار --custom-property والضغط على Enter للانتقال إلى هدف الرابط (401212692).

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

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

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

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

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

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