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

Jecelyn Yeen

لوحة وسائط جديدة

تعرض "أدوات مطوّري البرامج" الآن معلومات حول مشغّلات الوسائط في لوحة الوسائط.

لوحة وسائط جديدة

قبل ظهور لوحة الوسائط الجديدة في "أدوات مطوري البرامج"، كان من الممكن أن يكون تسجيل معلومات مشغّلات الفيديو وتصحيح الأخطاء المرتبطة بها تم العثور عليها في chrome://media-internals.

توفر لوحة الوسائط الجديدة طريقة أسهل لعرض الأحداث والسجلات والخصائص والجدول الزمني للإطار في علامة تبويب المتصفح نفسها كما في مشغّل الفيديو. يمكنك استخدام ميزة "العرض المباشر" والتحقّق من المشاكل المحتملة بشكل أسرع (مثل سبب حدوث الإطارات المسقطة، وسبب تفاعل JavaScript مع اللاعب بطريقة غير متوقعة).

مشكلة Chromium: 1018414

التقاط لقطات شاشة للعقدة من خلال قائمة سياق لوحة "العناصر"

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

على سبيل المثال، يمكنك أخذ لقطة شاشة لجدول المحتوى من خلال النقر بزر الماوس الأيمن على العنصر اختَر التقاط لقطة شاشة للعقدة.

التقاط لقطات شاشة للعقدة

مشكلة Chromium: 1100253

آخر الأخبار في علامة التبويب "المشاكل"

تم الآن استبدال شريط التحذير "مشاكل" في لوحة وحدة التحكم برسالة عادية.

مشاكل في رسالة وحدة التحكّم

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

مربّع اختيار "مشاكل ملفات تعريف الارتباط التابعة لجهات خارجية"

مشاكل Chromium: 1096481 و1068116 و1080589

محاكاة الخطوط المحلية المفقودة

افتح علامة تبويب الاستعراض واستخدِم ميزة إيقاف الخطوط المحلية الجديدة لمحاكاة الخطوط المفقودة local() مصدر في @font-face قاعدة

على سبيل المثال، عندما يشير الخط "Rubik" مثبَّت على جهازك وتستخدِمه قاعدة @font-face src. كخط local()، يستخدم Chrome ملف الخط المحلي من جهازك.

عند تفعيل الخيار إيقاف الخطوط المحلية، تتجاهل "أدوات مطوري البرامج" خطوط local() وتجلبها من الشبكة.

محاكاة الخطوط المحلية المفقودة

في كثير من الأحيان، يستخدم المطورون والمصممون نسختين مختلفتين من نفس الخط أثناء التطوير:

  • خط محلي لأدوات التصميم الخاصة بك،
  • خط ويب للتعليمات البرمجية

ويسهِّل إيقاف الخطوط المحلية عليك ما يلي:

  • تصحيح الأخطاء وقياس أداء تحميل خطوط الويب وتحسينها
  • التأكّد من صحة قواعد @font-face في خدمة مقارنة الأسعار (CSS)
  • تعرَّف على أي اختلافات بين خطوط الويب بنسخها المحلية.

مشكلة Chromium: 384968

محاكاة المستخدمين غير النشطين

تسمح Idle Detection API للمطوّرين برصد المستخدمين غير النشطين والتفاعل في حالة عدم النشاط. التغييرات. يمكنك الآن استخدام أدوات مطوّري البرامج لمحاكاة تغييرات حالة عدم النشاط في علامة التبويب أدوات الاستشعار لكل من حالة المستخدم وحالة الشاشة بدلاً من انتظار تغيير حالة عدم النشاط الفعلية. يمكنك فتح علامة التبويب أجهزة الاستشعار من الدرج.

محاكاة المستخدمين غير النشطين

مشكلة Chromium: 1090802

محاكاة "prefers-reduced-data"

يرصد طلب البحث عن وسائط prefers-reduced-data ما إذا كان المستخدم يفضّل أن يتم عرضه بدلاً من ذلك. المحتوى الذي يستخدم بيانات أقل لعرض الصفحة.

يمكنك الآن استخدام "أدوات مطوّري البرامج" لمحاكاة الاستعلام عن الوسائط في "prefers-reduced-data".

محاكاة Favourite-reduced-data

مشكلة Chromium: 1096068

دعم ميزات JavaScript الجديدة

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

  • عوامل تشغيل المهام المنطقية: تتيح أدوات مطوّري البرامج الآن التخصيص المنطقي باستخدام الأداة &&= و||= و??= في لوحة التحكم والمصادر.
  • فواصل رقمية بطباعة رائعة - أصبحت أدوات مطوّري البرامج الآن تطبع الفواصل الرقمية بشكل صحيح في لوحة المصادر.

مشاكل Chromium: 1086817 و1080569

Lighthouse 6.2 في لوحة Lighthouse

تستخدم لوحة Lighthouse الإصدار 6.2 من Lighthouse. يُرجى الاطّلاع على ملاحظات الإصدار للحصول على قائمة التغييرات.

تغيير حجم الصورة

عمليات التدقيق الجديدة في Lighthouse 6.2:

  • تجنُّب مهام سلاسل المحادثات الرئيسية الطويلة: يقدم تقرير حول أطول المهام في سلسلة التعليمات الرئيسية، وهو مفيد وتحديد أسوأ الأسباب في تأخير الإدخال.
  • الروابط قابلة للزحف. تحقق مما إذا كانت سمة href عناصر الارتساء ترتبط بسمة بحيث يمكن اكتشاف الروابط.
  • عناصر الصورة غير محددة الحجم - تحقَّق مما إذا تم ضبط width وheight صريحين على عناصر الصورة. يمكن أن يؤدي حجم الصورة الفاضح إلى تقليل متغيّرات التصميم وتحسين متغيّرات التصميم التراكمية (CLS).
  • تجنَّب الصور المتحركة غير المركّبة. تعمل هذه السياسة على الإبلاغ عن الصور المتحركة غير المركّبة التي تظهر بشكل رديء. وتقليل متغيّرات التصميم التراكمية (CLS).
  • الاستماع إلى أحداث unload تُبلِغ هذه السياسة عن الحدث "unload". ننصحك باستخدام pagehide أو visibilitychange حدث بدلاً من ذلك لأنّ حدث unload لا يتم تنشيطه بشكل موثوق.

عمليات التدقيق المعدّلة في Lighthouse 6.2:

  • إزالة محتوى JavaScript غير المستخدَم ستُحسِّن أداة Lighthouse عملية التدقيق الآن إذا كانت الصفحة تحتوي خرائط مصدر JavaScript المتاحة للجميع.

مشكلة Chromium: 772558

إيقاف "المصادر الأخرى" نهائيًا بطاقة بيانات المتجر في لوحة "مشغّلات الخدمات"

توفّر "أدوات مطوري البرامج" الآن رابطًا لعرض قائمة كاملة بعاملي الخدمات من مصادر أخرى في علامة تبويب المتصفّح - chrome://serviceworker-internals/?devtools

عرضت "أدوات مطوري البرامج" سابقًا قائمة متداخلة ضمن لوحة التطبيق > مشغّلو الخدمات اللوحة.

رابط يؤدي إلى مصادر أخرى

مشكلة Chromium: 807440

عرض ملخّص التغطية للعناصر التي تمت فلترتها

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

في المثال أدناه، لاحظ كيف يقول الملخص في البداية 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. ثم قول 57 kB of 604 kB (10%) used so far. 546 kB unused. بعد تطبيق فلترة CSS.

ملخّص التغطية للعناصر التي تمّت فلترتها

مشكلة Chromium: 1061385

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

تُظهر أدوات مطوّري البرامج الآن عرضًا تفصيليًا لكل إطار. ويمكنك الوصول إليه بالنقر على إطار ضمن الإطارات. القائمة في لوحة التطبيق.

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

مشكلة Chromium: 1093247

تفاصيل الإطار للنوافذ المفتوحة

تعرض "أدوات مطوري البرامج" الآن النوافذ أو النوافذ المنبثقة المفتوحة أسفل شجرة الإطارات أيضًا. طريقة عرض تفاصيل الإطار من النوافذ المفتوحة تتضمن معلومات أمان إضافية.

تم فتح تفاصيل إطار النافذة.

مشكلة Chromium: 1107766

معلومات الأمان والعزل (COEP / COOP)

تعرض "أدوات مطوري البرامج" الآن سياقًا آمنًا وسياسة سياسة تضمين العناصر التي يمكن الوصول إليها (COEP) و سياسة Cross-Origin-Opener-Policy (COOP) في تفاصيل الإطار.

معلومات الأمان والعزل

ستتم قريبًا إضافة المزيد من معلومات الأمان إلى طريقة عرض تفاصيل الإطار.

مشكلة Chromium: 1051466

تعديلات لوحة "العناصر" و"الشبكة"

اقتراح ألوان يمكن الوصول إليه في جزء الأنماط

توفّر "أدوات مطوري البرامج" الآن اقتراحات الألوان للنص المنخفض التباين.

في المثال أدناه، تحتوي السمة h1 على نص منخفض التباين. لحلّ هذه المشكلة، افتح علبة الألوان في color. في جزء الأنماط. بعد توسيع قسم نسبة التباين، توفّر أدوات مطوّري البرامج علامة AA. واقتراحات ألوان AAA. انقر على اللون المقترَح لتطبيقه.

مشكلة Chromium: 1093227

استعادة جزء الخصائص في لوحة "العناصر"

عاد جزء "الخصائص" من جديد، وقد تم إيقافه في Chrome 84. في إصدار مستقبلي من "أدوات مطوري البرامج" سنعمل على تحسين سير العمل لفحص خصائص العناصر.

جزء الخصائص في لوحة "العناصر"

مشكلة Chromium: 1105205 و1116085

قيم عناوين X-Client-Data التي يمكن للمستخدمين قراءتها في لوحة "الشبكة"

عند فحص مورد الشبكة في لوحة "الشبكة"، أصبح "أدوات مطوّري البرامج" بتنسيق أي X-Client-Data قيم العنوان في جزء العناوين كتعليمة برمجية.

يحتوي عنوان HTTP X-Client-Data على قائمة بأرقام تعريف التجارب وعلامات Chrome المفعَّلة. في متصفحك. تبدو قيم العنوان الأولية كسلاسل مبهمة نظرًا لأنها بترميز base-64، المخازن المؤقتة للبروتوكول المتسلسلة. ولجعل المحتوى أكثر شفافية للمطورين، تهدف أدوات مطوري البرامج إلى لعرض القيم التي تم فك ترميزها.

قيم عنوان "X-Client-Data" التي يمكن لشخص عادي قراءتها

مشكلة Chromium: 1103854

الإكمال التلقائي للخطوط المخصّصة في لوحة "الأنماط"

تتم الآن إضافة الخطوط التي تم استيرادها إلى قائمة الإكمال التلقائي في CSS عند تعديل font-family في لوحة الأنماط.

في هذا المثال، 'Noto Sans' هو خط مخصّص تم تثبيته على الجهاز المحلي. يتم عرض البيانات في قائمة إكمال CSS. في السابق، لم يكن كذلك.

الإكمال التلقائي للخطوط المخصّصة

مشكلة Chromium: 1106221

عرض نوع المورد باستمرار في لوحة الشبكة

تعرض "أدوات مطوري البرامج" الآن بشكل متسق نوع المورد نفسه الذي يعرضه طلب الشبكة الأصلي تُلحِق / Redirect بقيمة العمود النوع عند حدوث إعادة التوجيه (الحالة 302).

في السابق، كانت "أدوات مطوري البرامج" تغيّر النوع إلى Other في بعض الأحيان.

عرض نوع مرجع إعادة التوجيه

مشكلة Chromium: 997694

محو الأزرار في لوحتَي "العناصر" و"الشبكة"

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

محو الأزرار في لوحتَي "العناصر" و"الشبكة"

مشكلة Chromium: 1067184

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

  • يمكنك إرسال اقتراح أو ملاحظات إلينا عبر crbug.com.
  • الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية   المزيد > مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج"
  • يمكنك نشر تغريدة على @ChromeDevTools.
  • شارِك في التعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج فيديوهات على YouTube.

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

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