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

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

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

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

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

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

مشكلة Chromium: 1018414

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

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

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

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

مشكلة Chromium: 1100253

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

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

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

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

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

مشاكل 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) وسياسة المشاركة المتعددة المصادر (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.

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

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

الإصدار 127 من Chrome

الإصدار 126 من Chrome

الإصدار 125 من Chrome

الإصدار 124 من Chrome

الإصدار 123 من Chrome

الإصدار 122 من Chrome

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من Chrome

الإصدار 118 من Chrome

الإصدار 117 من Chrome

الإصدار 116 من Chrome

الإصدار 115 من Chrome

الإصدار 114 من Chrome

الإصدار 113 من Chrome

الإصدار 112 من Chrome

الإصدار 111 من Chrome

الإصدار 110 من Chrome

الإصدار 109 من Chrome

الإصدار 108 من Chrome

الإصدار 107 من Chrome

الإصدار 106 من Chrome

الإصدار 105 من Chrome

الإصدار 104 من Chrome

الإصدار 103 من Chrome

الإصدار 102 من Chrome

الإصدار 101 من Chrome

الإصدار 100 من Chrome

الإصدار 99 من Chrome

الإصدار 98 من Chrome

الإصدار 97 من Chrome

الإصدار 96 من Chrome

الإصدار 95 من Chrome

الإصدار 94 من Chrome

الإصدار 93 من Chrome

الإصدار 92 من Chrome

الإصدار 91 من Chrome

الإصدار 90 من Chrome

الإصدار 89 من Chrome

الإصدار 88 من Chrome

الإصدار 87 من Chrome

الإصدار 86 من Chrome

الإصدار 85 من Chrome

الإصدار 84 من Chrome

الإصدار 83 من Chrome

الإصدار 82 من Chrome

تم إلغاء الإصدار 82 من Chrome.

الإصدار 81 من Chrome

الإصدار 80 من Chrome

الإصدار 79 من Chrome

الإصدار 78 من Chrome

الإصدار 77 من Chrome

الإصدار 76 من Chrome

الإصدار 75 من Chrome

الإصدار 74 من Chrome

الإصدار 73 من Chrome

الإصدار 72 من Chrome

الإصدار 71 من Chrome

Chrome 70

الإصدار 68 من Chrome

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

الإصدار 64 من Chrome

الإصدار 63 من Chrome

الإصدار 62 من Chrome

الإصدار 61 من Chrome

الإصدار 60 من Chrome

الإصدار 59 من Chrome