الميزات الجديدة في أدوات مطوّري البرامج (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 مما إذا كان المستخدم يفضّل عرض محتوى بديل يستهلك بيانات أقل لعرض الصفحة.

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

مشكلة في Chromium: 1096068

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

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

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

مشاكل Chromium: 1086817 و1080569

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

تعمل لوح�� Lighthouse الآن بالإصدار 6.2 من Lighthouse. يمكنك الاطّلاع على ملاحظات الإصدار للحصول على قائمة كاملة بالتغييرات.

عمليات التدقيق الجديدة في الإصدار 6.2 من Lighthouse:

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

عمليات التدقيق المعدَّلة في الإصدار 6.2 من Lighthouse:

• إزالة 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 في لوحة "الأنماط". بعد توسيع قسم نسبة التباين، تقدّم "أدوات مطوّري Chrome" اقتراحات بشأن ألوان AA وAAA. انقر على اللون المقترَح لتطبيقه.

مشكلة في Chromium: 1093227

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

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

مشكلة في Chromium: 1105205، 1116085

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

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

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

مشكلة في Chromium: 1103854

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

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

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

مشكلة في Chromium: 1106221

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

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

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

مشكلة في Chromium: 997694

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

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

مشكلة في Chromium: 1067184

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

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

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

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

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

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

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