الميزات الجديدة في DevTools، الإصدار 134 من Chrome

Sofia Emelianova
Sofia Emelianova
GitHub

لوحة الخصوصية والأمان

تطوّرت لوحة الأمان القديمة لتصبح لوحة الخصوصية والأمان، كما تمّت إضافة قسم جديد مخصّص للخصوصية. في هذا القسم، يمكنك إجراء ما يلي:

  • عندما تكون "أدوات مطوّري البرامج" مفتوحة، يمكنك تقييد ملفات تعريف الارتباط الخارجية مؤقتًا مع استثناءات أو بدونها واختبار سلوك الموقع الإلكتروني.
  • اطّلِع على جدول يتضمّن معلومات عن ملفات تعريف الارتباط التابعة لجهات خارجية، بما في ذلك ما إذا كان قد تم حظرها أو استثناؤها من خلال وضع الحدّ المؤقت، ونوع ملفات تعريف الارتباط التي قد تتأثّر.

قبل وبعد إضافة قسم "الخصوصية" إلى لوحة "الأمان"

مشكلة في Chromium: 352364594.

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

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

الإعدادات المُسبقة المُعايرة لتقييد أداء وحدة المعالجة المركزية (CPU)

يمكنك الآن ضبط إعدادات المحاكاة تلقائيًا والحصول على إعدادَين مُسبقَين إضافيَين لتقييد وحدة المعالجة المركزية (CPU) يحاكيان أداء الأجهزة الجوّالة المنخفضة المستوى والمتوسطة المستوى بدقة أكبر.

في القائمة المنسدلة الأداء > تقييد سرعة وحدة المعالجة المركزية، اختَر المعايرة...، ثم انقر على المعايرة في الإعدادات، ثم على متابعة، وانتظِر إلى أن تحسب "أدوات مطوّلي البرامج" معدّلات التباطؤ لجهازك. يمكنك العثور على خيارات الحدّ من سرعة وحدة المعالجة المركزية التي تمّت معايرتها في القائمة المنسدلة الأداء > الحدّ من سرعة وحدة المعالجة المركزية.

قبل إضافة معايرة الحدّ الأقصى لعدد الطلبات وبعدها

اختيار أحداث أداء مختلفة في محادثة الذكاء الاصطناعي نفسها

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

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

تتضمّن لوحة الأداء جدولاً جديدًا في علامة التبويب الملخّص يتيح لك التمييز بين بيانات الطرف الأول والطرف الثالث وبيانات الإضافات.

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

بالإضافة إلى ذلك، انقر على رمز بجانب إدخال مميّز في الجدول للانتقال إلى علامة التبويب من الأسفل إلى الأعلى المجمّعة حسب الجهات الخارجية.

بيانات الحقول في تلميحات الأدوات والإحصاءات الخاصة بالعلامات

إذا فعّلت بيانات الحقل، يمكنك الآن الاطّلاع عليها في تلميحات أدوات علامات المقاييس وعلامة التبويب الإحصاءات.

قبل وبعد إضافة البيانات التي تمّت تعبئتها إلى تلميحات الأدوات الخاصة بالعلامات وعلامة التبويب "الإحصاءات"

مشكلة في Chromium: 368135130.

إحصاءات "إعادة التدفق الإلزامية"

تتضمّن علامة التبويب الأداء > الإحصاءات إضافة جديدة إلى مجموعة الإحصاءات: إعادة التدفق الإجباري. يحدث إعادة التدفق الإجباري عندما يوقف محرّك العرض تنفيذ النص البرمجي مؤقتًا لاحتساب عناصر النمط والتنسيق. يمكن أن تكون عمليات إعادة التدفق الإجباري من المشاكل التي يجب تجنُّبها.

عند تمرير مؤشر الماوس فوق الإحصاءات الجديدة، سيتم تمييز استدعاء الدالة الأعلى مع إعادة التدفق الإجباري، وتتبُّع تسلسل استدعاء الدوال، وعرض إجمالي وقت إعادة التدفق.

قبل إضافة إحصاءات "إعادة التدفق الإجباري" وبعدها

مشكلة في Chromium: 369766156.

إحصاء "تحسين حجم عناصر DOM"

هناك إحصاء جديد آخر هو تحسين حجم عناصر DOM. يمكن أن يؤدي حجم شجرة نموذج العناصر في المستند (DOM) الكبير إلى إبطاء أداء صفحتك.

توضّح الإحصاءات عمليات إعادة تدفق التنسيقات وعمليات إعادة احتساب الأنماط الطويلة التي تأثّرت بحجم نموذج العناصر في المستند (DOM) الكبير في تتبُّع الأداء، كما تقدّم إحصاءات عن إجمالي العناصر والعمق وأكبر عدد من العناصر الفرعية.

قبل إضافة إحصاء "تحسين حجم عناصر DOM" وبعدها

تمديد سجلّ تتبُّع الأداء باستخدام console.timeStamp

تتيح Extensibility API الآن استخدامconsole.timeStamp. بالإضافة إلى performance.measure وperformance.mark، يمكنك الآن إنشاء مسارات مخصّصة في تتبُّع الأداء وتسجيل علامات مخصّصة باستخدام console.timeStamp، كبديل أخفّ لا يضيف إدخالات إلى المخطط الزمني للأداء الداخلي للمتصفّح، بل يعرضها فقط في تتبُّع الأداء.

على سبيل المثال، يمكنك استخدام الصيغة التالية:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

من خلال إعدادات الالتقاط > عرض قنوات الإصدار المخصّصة، ستظهر قناة الإصدار المخصّصة في التتبُّع على النحو التالي:

قبل وبعد إضافة ميزة console.timeStamp

تحسينات على "لوحة العناصر"

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

قيم في الوقت الفعلي للأنماط المتحركة

تعمل علامة التبويب العناصر > الأنماط الآن على تعديل قيم الأنماط المتحركة في الوقت الفعلي.

إتاحة الفئة الزائفة :open وعناصر زائفة مختلفة

تتيح لوحة العناصر الآن استخدام الفئة الزائفة :open في القسم الأنماط > :hov > فرض حالة عنصر معيّن لعناصر HTML معيّنة، مثل <details> و<select> و<dialog> و<input>.

قبل إضافة الخيار ‎:open وبعدها

بالإضافة إلى ذلك، تتيح لوحة العناصر الآن أيضًا العديد من العناصر الزائفة الجديدة: ::checkmark و::picker-icon والعناصر الزائفة ذات الصلة بالصور الدوّارة ::column و::scroll-button و::scroll-marker و::scroll-marker-group.

مشاكل Chromium: 383157184 و379805728.

نسخ جميع رسائل وحدة التحكّم

يمكنك الآن النقر بزر الماوس الأيمن ونسخ جميع رسائل وحدة التحكّم في آن واحد.

قبل إضافة خيار &quot;نسخ وحدة التحكّم&quot; وبعدها

بالإضافة إلى ذلك، يمكنك العثور على خيار نسخ مشابه في قائمة السياق الشبكة > حمولة الطلب.

مشاكل Chromium: 40206460 و384967020.

وحدات البايت في لوحة "الذاكرة"

تعرض لوحة الذاكرة الآن الأحجام بوحدات البايت المناسبة بدلاً من أعداد كبيرة من البايت.

قبل عرض وحدات البايت وبعده

مشكلة في Chromium: 388589515.

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

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

  • الأداء:
    • التعليقات التوضيحية: يمكنك الآن النقر على التصنيف لاختيار الإدخال المناسب (crbug.com/388224764).
    • الإحصاءات: يؤدي النقر على CLS في علامة التبويب الإحصاءات الآن إلى اختيار أسوأ مجموعة بدلاً من أسوأ تغيير.
  • قائمة التجاهل: يتم الآن تلقائيًا تجاهل الأجزاء الداخلية للعُقد التي تبدأ بـ node: (crbug.com/382453615).
  • التعبيرات المباشرة: تم إصلاح الخطأ الذي كان يتسبّب في تأثير التعبير المباشر في الأمر $_ (crbug.com/388437265).
  • العناصر > الأنماط: تحتوي الآن الأطوال النسبية على نافذة منبثقة تعرض القيمة المطلقة (crbug.com/40778486).
  • تسهيل الاستخدام: يتم الآن الإعلان عن عناوين الأعمدة إذا كان يمكن ترتيبها.
  • أصبحت رموز علامات التبويب الآن على الجانب الأيسر بجانب أسماء علامات التبويب بدلاً من الجانب الأيمن.

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

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

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

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

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

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