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

Jecelyn Yeen

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

تتيح الآن لوحة "الأنماط" إمكانية تعديل الأنماط التي تم إنشاؤها باستخدام واجهات برمجة تطبيقات CSS Object Model (CSSOM). تستخدم العديد من إطارات العمل والمكتبات التي تستخدم CSS في JavaScript واجهات برمجة تطبيقات CSSOM من وراء الكواليس ل إنشاء الأنماط.

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

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

مشكلة Chromium ‎#946975

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

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

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

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

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

مشكلة Chromium ‎#772558

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

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

مشكلة Chromium ‎#1096008

إتاحة ميزات JavaScript الجديدة

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

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

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

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

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

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

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

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

مشكلة Chromium ‎#955497

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

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

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

مشكلة Chromium ‎#1066579

عرض لوحة "القيمة المحسوبة" بشكلٍ متّسق

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

مشكلة Chromium ‎#1073899

Offsets لرمز الآلة لملفات WebAssembly

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

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

مشكلة Chromium ‎#1071432

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

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

مشكلة Chromium ‎#800028

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

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

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

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

مشكلة Chromium ‎#1082963

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

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

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

مشكلة Chromium ‎#1055875

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

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

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

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

مشكلة Chromium ‎#912581

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

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

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

مشكلة Chromium ‎#974550

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

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

نقاط الإيقاف

مشكلة Chromium ‎#1041830

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

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

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

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

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

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