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

Jecelyn Yeen

تعديل الأنماط في أُطر عمل CSS-in-JS

يتيح جزء "الأنماط" الآن إمكانية أفضل لتعديل الأنماط التي تم إنشاؤها باستخدام واجهات برمجة التطبيقات لنموذج عناصر CSS (CSSOM). تستخدم العديد من أُطر عمل ومكتبات CSS-in-JS واجهات CSSOM API في الخلفية لإنشاء الأنماط.

يمكنك أيضًا تعديل الأنماط المُضافة في JavaScript باستخدام أوراق الأنماط القابلة للإنشاء الآن. أوراق الأنماط القابلة للإنشاء هي طريقة جديدة لإنشاء أنماط قابلة لإعادة الاستخدام وتوزيعها عند استخدام Shadow DOM.

على سبيل المثال، لم يكن من الممكن سابقًا تعديل أنماط h1 التي تمت إضافتها باستخدام CSSStyleSheet (واجهات CSSOM API). يمكن الآن تعديل ما يلي في لوحة "الأنماط":

المشكلة #946975 في Chromium

الإصدار 6 من Lighthouse في لوحة Lighthouse

تعمل لوحة Lighthouse الآن بالإصدار 6 من Lighthouse. يمكنك الاطّلاع على الميزات الجديدة في الإصدار 6.0 من Lighthouse للحصول على ملخّص لجميع التغييرات الرئيسية، أو ملاحظات الإصدار 6.0.0 للحصول على قائمة كاملة بجميع التغييرات.

تتضمّن الإصدار 6.0 من Lighthouse ثلاثة مقاييس جديدة في التقرير، وهي: سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) ومتغيّرات التصميم التراكمية (CLS) وإجمالي وقت الحظر (TBT). "سرعة عرض أكبر محتوى مرئي" و"متغيّرات التصميم التراكمية" هما مقياسان جديدان ضمن مؤشرات Core Web Vitals من Google، أما "إجمالي وقت الحظر" فهو مقياس تجريبي في المختبر لمقياس آخر ضمن Core Web Vitals، وهو "مهلة الاستجابة الأولى".

تمت إعادة ترجيح صيغة احتساب نتيجة الأداء أيضًا لتعكس بشكل أفضل تجربة التحميل لدى المستخدمين.

مقاييس أداء جديدة في Lighthouse 6.0

المشكلة #772558 في Chromium

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

تم إيقاف مقياس "سرعة عرض أوّل محتوى مفيد على الصفحة" (FMP) نهائيًا في الإصدار 6.0 من Lighthouse. تمت إزالته أيضًا من لوحة "الأداء". سرعة عرض أكبر محتوى مرئي هي المقياس المقترَح بدلاً من FMP. يمكنك الاطّلاع على مقالة سرعة عرض أوّل محتوى مفيد على الصفحة للحصول على شرح حول سبب إيقاف هذا المقياس نهائيًا.

مشكلة في Chromium #1096008

توفير ميزات JavaScript الجديدة

تتوفّر الآن في "أدوات مطوّلي البرامج" إمكانية استخدام بعض أحدث ميزات لغة JavaScript بشكل أفضل:

  • الإكمال التلقائي لصيغة السلسلة الاختيارية: أصبح الإكمال التلقائي للخاصية في "وحدة التحكّم" يتوافق الآن مع صيغة السلسلة الاختيارية، مثلاً، أصبح name?. يعمل بالإضافة إلى name. وname[.
  • تمييز البنية للحقول الخاصة: يتم الآن تمييز البنية للحقول الخاصة في الفئات وطباعتها بشكل منسّق في لوحة "المصادر".
  • تمييز بناء الجملة لعامل التشغيل Nullish coalescing: أصبحت "أدوات مطوّري البرامج" الآن تطبع بشكلٍ سليم عامل التشغيل Nullish coalescing في لوحة "المصادر".

مشاكل Chromium #1083214 و#1073903 و#1083797

تحذيرات جديدة بشأن اختصارات التطبيقات في لوحة "ملف البيان"

تساعد اختصارات التطبيقات المستخدمين في بدء المهام الشائعة أو المقترَحة بسرعة داخل تطبيق ويب.

تعرض لوحة "ملف البيان" الآن تحذيرات في الحالات التالية:

  • رموز اختصارات التطبيق أصغر من 96x96 بكسل
  • أنّ رموز اختصارات التطبيقات ورموز ملف البيان ليست مربّعة (لأنّه سيتم تجاهلها)

تحذيرات بشأن اختصارات التطبيقات

مشكلة Chromium #955497

أحداث respondWith Service Worker في علامة التبويب "التوقيت"

تتضمّن علامة التبويب "التوقيت" في لوحة "الشبكة" الآن أحداث respondWith للعامل في الخدمة. respondWith هو الوقت الذي يسبق مباشرةً تنفيذ معالج الأحداث fetch في عامل الخدمة إلى الوقت الذي يتم فيه تسوية الوعد respondWith الخاص بمعالج fetch.

‫ `respondWith` في مشغّل الخدمات

المشكلة 1066579 في Chromium

عرض لوحة "الأنماط المحتسَبة" بشكل متّسق

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

المشكلة 1073899 في Chromium

إزاحات رمز البايت لملفات WebAssembly

تستخدم "أدوات مطوّري البرامج" الآن إزاحات الرمز الثانوي لعرض أرقام أسطر تفكيك Wasm. يؤدي ذلك إلى توضيح أنّك تنظر إلى بيانات ثنائية، كما أنّه يتوافق بشكل أكبر مع الطريقة التي يشير بها وقت تشغيل Wasm إلى المواقع الجغرافية.

إزاحات رمز البايت

المشكلة 1071432 في Chromium

النسخ والقص على مستوى الأسطر في "لوحة المصادر"

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

المشكلة #800028 في Chromium

تعديلات على إعدادات Console

إلغاء تجميع رسائل وحدة التحكّم المتشابهة

ينطبق خيار تجميع الرسائل المتشابهة في "إعدادات وحدة التحكّم" الآن على الرسائل المكرّرة. في السابق، كان يتم تطبيقها على الرسائل المشابهة فقط.

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

المشكلة 1082963 في Chromium

الاحتفاظ بإعدادات السياق المحدَّد فقط

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

السياق المحدَّد فقط

المشكلة 1055875 في Chromium

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

معلومات ذاكرة التخزين المؤقت لتجميع JavaScript في "لوحة الأداء"

يتم الآن عرض معلومات ذاكرة التخزين المؤقت لتجميع JavaScript دائمًا في علامة التبويب "الملخّص" ضمن لوحة "الأداء". في السابق، لم تكن "أدوات مطوّري البرامج" تعرض أي معلومات ذات صلة بالتخزين المؤقت للرمز البرمجي إذا لم يتم التخزين المؤقت للرمز البرمجي.

معلومات ذاكرة التخزين المؤقت لتجميع JavaScript

المشكلة #912581 في Chromium

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

محاذاة توقيت التنقّل في لوحة "الأداء"

عدّلنا أيضًا أوقات أحداث DOMContentLoaded و"سرعة عرض أول جزء من المحتوى على الصفحة" و"سرعة عرض أكبر جزء من المحتوى على الصفحة" لتكون مرتبطة ببداية عملية التنقّل، ما يعني أنّها تتطابق مع التوقيتات التي يبلغ عنها PerformanceObserver.

المشكلة 974550 في Chromium

رموز جديدة لنقاط الإيقاف ونقاط الإيقاف المشروطة ونقاط تسجيل التصحيح

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

نقاط الإيقاف

المشكلة 1041830 في Chromium

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

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

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

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

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

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