الميزات الجديدة في أدوات مطوّري البرامج (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). "سرعة عرض أكبر محتوى مرئي" (LCP) و"متغيّرات التصميم التراكمية" (CLS) هما مقياسان جديدان ضمن مؤشرات Core Web Vitals من Google، أما "إجمالي وقت الحظر" (TBT) فهو مقياس تقريبي يتم قياسه في المختبر لمقياس آخر ضمن Core Web Vitals، وهو "مهلة الاستجابة الأولى" (FID).

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

مقاييس أداء جديدة في الإصدار 6.0 من Lighthouse

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

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

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

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

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

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

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

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

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

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

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

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

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

المشكلة 955497 في Chromium

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

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

‫ `respondWith` الخاص بمشغّل الخدمات

المشكلة 1066579 في Chromium

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

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

المشكلة 1073899 في Chromium

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

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

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

المشكلة 1071432 في Chromium

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

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

المشكلة 800028 في Chromium

تعديلات على إعدادات وحدة التحكّم

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

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

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

مشكلة Chromium #1082963

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

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

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

المشكلة 1055875 في Chromium

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

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

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

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

المشكلة 912581 في Chromium

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

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

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

المشكلة 974550 في Chromium

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

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

نقاط الإيقاف

المشكلة 1041830 في Chromium

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

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

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

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

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

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